黑马程序员技术交流社区

标题: 技术贴（css） [打印本页]

作者: onloading 时间: 2019-6-8 13:52
标题: 技术贴（css）
###一、文字控制属性小结

1、文字颜色 color
Color取值
a、直接写英文单词yellow，red等等
b、16进制表示#aabbcc或者#abc
c、rgb（）如rgb（0，0，0）
d、rgb（）如rgba（0,0,0,0.5）a为透明度
常用测试颜色16进制：
黑色系列：#000； #333；  #666； #999；
灰色系列：#ccc； #eee； #ddd； #dedede；
红色：#f00；
文字大小 font-size
文字字体 font-family
取值可以取一个或者多个，如果取多个值要用英文的逗号隔开，表示先找第一个字体如果没有就往后面查找，依次类推；
如果是汉语的文字要用引文状态的引号引起来；

2、Unicode字体
字体加粗 font-weight
如果要用数字来表示加粗或者不加粗，千万不能书写单位px；

3、字体样式(风格) font-style
实际开发中我们很少让文字倾斜，但是我们会让倾斜的i和em不倾斜；

4、文本水平居中 text-align: center;
text-align文本居中控制，取值：left、right、center；
text-align让文字在父级盒子里面居中显示；
文本的行高 line-height
line-height取值为数字+px单位，可以设置文字行与行之间的距离；
如何量取设计稿的行高？
从第一行文字的开始到第二行文字的开始就是行高

5、文本首行缩进 text-indent
text-indent首航缩进，取值为具体的像素值或者直接em，1em等于一个字的大小；
text-indent:2em;  首行缩进2个字；
6、字体的综合写法 font复合属性

注意:使用font的综合书写的时候一定要按照顺序书写，属性之间用空格隔开，如果没有的属性可以省略不写，文字大小和字体是必须要书写的，否则不生效；

实际工作中一般只用：font:文字大小字体；
7、文本线条装饰 text-decoration（死记硬背）
text-decoration:none;没有线
text-decoration：underline；下划线
text-decoration:line-through; 中划线/删除线
text-decoration:overline;上划线

###二、标签显示模式小结

实际开发的时候有的需要独占一行，有的需要一行放多个，所以把标签的显示模式分为以下三种：
块级元素：自己独占一行； ---代表标签 div、h标签
行内元素：一行可以共存多个；---代表标签 span、a
行内块元素：一行可以共存多个； ---代表标签 img、 input
块级元素(死记硬背)
特点：独占一行，设置宽高能够生效，也可以控制外边距和内边距；
默认的宽度是父级的100%；
   是一个容器盒子，里面可以放行内或者块元素；
注意：p标签是块级元素，但是p标签里面不能放div标签；
   同理h标签（标题标签）dt等都是文字类块级标签，里面尽量不能放其他块级元素；
常见的块级元素：div/p/h1-h6/ul/li/dl/dt/dd
行内元素(死记硬背)
特点：01、一行可以共存多个，设置宽高不生效，一般宽高是自己本身的内容撑开；
02、行内元素里面最好只放文本或者其他的行内元素；
常见的行内元素：a  span  u  sdel  strong emi  ins 等；
注意：超链接里面不能嵌套超链接；
特殊情况a标签里面可以放块级元素，但是最好给a转换成块级模式；
行内块元素：
一行共存多个，默认宽高由内容撑开，但是可以控制固定的宽度和高度和外边距，内边距；
一句话总结：行内块元素可以一行共存多个，能够设置宽高并且生效；
三种显示模式相互转换
将元素转化为块级元素：display:block;
将元素转化为行内元素：display:inline;
将元素转化为行内块元素：display:inline-block;

###三、嵌套垂直外边距合并小结

问题环境
如果两个盒子有嵌套包含的父子级关系，如果给子级盒子设置了margin-top，效果显示父级盒子也会跟着掉下来；

解决方案：
1、为父级设置上边框（不用）
2、直接给父级设置padding-top：1px，如果父级有高度注意减去对应的高度；（不推荐使用）；
3、直接给父级添加overflow:hidden;（常用方法）---利用了overflow:hidden;强制区分了父子级关系

###四、清除浮动小结

清除浮动本质：父级盒子因为子级浮动引起内部高度为0的问题，清除浮动之后，父级就会根据浮动的盒子自动检测高度，从而解决影响下面盒子的布局问题；
解决方案
清除浮动的方法：额外标签法、父级加overflow属性法、使用after伪元素法、使用双伪元素清除浮动、固定高度法；
方法1：直接飞父级设置固定的高度，但是有时不方便设置高度，这样就不能使用这个方法；
额外标签法
在浮动元素的末尾（找到最后浮动的盒子）添加一个空的标签：
<div style=“clear:both;”></div>
书写方便，但是会添加许多没有意义的标签，不建议使用

方法2：父级加overflow属性法
直接给父级添加overflow:hidden;，强制的撑开父级的高度；

方法3：after伪元素法（会使用一直用）
After伪元素清除浮动法实际开发中推荐使用：
谁的子级盒子有浮动，我们就给谁添加，也就是在当前盒子的最后面添加一个空的盒子相当于我们的额外标签法；
/*声明清除浮动的样式*/
.clearfix:after {
content: "";
display: block;
height: 0;
visibility: hidden;
clear: both;
  }
.clearfix {
   *zoom: 1;  /*ie6,7 专门清除浮动的样式*/
}

方法4：双伪元素清除浮动
/*声明清除浮动的样式*/
.clearfix:before ,.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear:both;
}
.clearfix {
         *zoom: 1;  /*ie6,7 专门清除浮动的样式*/
}
谁里面有浮动就在谁的开始标签身上添加class=“clearfix”

五、css属性书写顺序小结

1、布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
2、自身属性：width / height / margin / padding / border / background
3、文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
4、其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2