#CSS-阶段性查缺补漏（1）
1. 浏览器前缀（无前缀属性总是放在最后）
对于任何新的样式，最终规范可能与浏览器渲染它的方式稍微不同。
-webkit-border-radius: 10px; //苹果Safari浏览器和谷歌的Chrome浏览器
-moz-border-radius: 10px; //Firefox浏览器
-o-border-radius: 10px; //Opera浏览器
border-radius: 10px;注：Autoprefixer:一个以最好的方式处理浏览器前缀的后处理程序。
2. IE盒模型
IE8及以上和其他浏览器：width和height指的是内容（content）;
IE8以下为IE 盒子模型，width和height包括content、padding、border.
3. IE6、7下display:inline-block的兼容性
大致描述：IE6、IE7支持对html行内元素设置inline-block。实际上只是看起来支持而已，IE6、IE7并不识别inline-block这个属性值，只是触发了layout，让行内元素有了inline-block的表征，比如说：行内显示且可设置宽高等等。
实现块级元素的inline-block属性值设置：详解
div { display:inline-block; _zoom:1;_display:inline;}/*推荐IE6*/
div { display:inline-block; *zoom:1;*display:inline;}/*推荐IE6或IE7*/下划线（_）是只有IE6才能识别，而星号（*）是只有IE6和IE7可识别，作用就是用于区分不同浏览器的。
zoom始终可以触发layout, 而_display:inline;或者*display:inline;是为了让元素重新获得display:inline;的属性。
4. haslayout是IE7-浏览器的特有属性
有两种状态：true或false。当其为true时，代表该元素有自己的布局，否则代表该元素的布局继承于父元素。
CSS属性
可以触发hasLayout的有如下CSS属性：
【1】display:inline-block
【2】height/width:除了auto
【3】float:left/right
【4】position:absolute
【5】writing-mode(IE专有属性，设置文本的垂直显示):tb-rl
【6】zoom(IE专有属性，设置或检索对象的缩放比例):除了normal
【IE7专有的触发hasLayout的CSS属性】
【1】min-height/max-height/min-width/max-width:除none
【2】overflow\overflow-x\overflow-y:除visible
【3】position:fixed
5. em、px、rem
em是相对于应用于当前元素的字体尺寸，而百分比则是相对于父元素的尺寸。
em：如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。我们在写CSS的时候，需要注意三点：
1. body选择器中声明Font-size=62.5%；
2. 将你的原来的px数值除以10，然后换上em作为单位；
3. IE底下，“em”会有一个问题存在。调整字体大小的时候，同样会打破我们的弹性布局，需要设置：
html {font-size: 100%}rem：只是相对HTML根元素大小，(IE8以上,对于不支持它的浏览器，就多写一个绝对单位的声明)
如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。
如果希望随着当前元素的字体尺寸em是相对于应用于当前当前元素的字体尺寸；而百分比则是相对于父元素的尺寸。寸而改变尺寸，则使用em最佳，如：行高、字体大小。相反，如果是随着父容器或者是整体页面布局而改变尺寸，则使用%更好，如元素的高度和宽度设置。
工具：字体尺寸转换
6、继承的样式权重最小
.box { color: red}继承的颜色并不会显示，因为继承的样式权重最小，浏览器对a标签设置了默认样式，将继承的样式层叠了。
7、calc() 函数 （结合媒体查询，实现响应式布局）
.box img {
width:calc(100%/4 - 40px);
margin:20px;
float: left;
}
@media (max-width :600px){
.box img {
width:calc(100%/2 - 40px);
}
}8、垂直外边距合并
判断两个margin是否会折叠，要判断他们是否满足以下三个条件：
- 都在普通流中
- 在同一个块级格式化上下文中
- 没有被行盒、空隙、内填充、边框阻断
9、透明度设置
.alert {
opacity:0.8;
filter:alpha(opacity=80); //兼容IE
}10、浮动float
因为浮动元素脱离文档流，所以包围的图片的文本的div不占据空间。
浮动的特点：1. .item {float: left;} ,则item2 除了文本，其他内容都不可见
2. 行内元素设置浮动后形成一个块框，因此可以使用width、height、margin和padding
清除浮动：
1、父级元素设置
.parent {
overflow: hidden;
*zoom: 1; //兼容IE6、7
}2、伪类元素清除浮动
选择符 .clear::after{
content:".";
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;
}
.clear{zoom:1;} //兼容IE6、7
11、BFC（block formating context）:块级格式化上下文
- 特点： 1. 在一个块级格式化上下文中，块框会朝着垂直方向一个接一个的排列 2.在一个块级格式化上下文中，包含里面的所有元素，但不包含创建了新块格式化上下文的元素。（结合上一点理解）
- 创建BFC的情况： a. 浮动float不为none； b. position值为absolute、fixed的元素 c. display不为block 的元素 d.overflow不为visible的元素。
12、overflow ：hidden; 能清除浮动的原因
不仅对超出的内容进行了处理，而且创建了BFC，使父元素重新自适应了子元素，顺便清除了浮动。
13、高度设置百分比的情况 height：100%；
- 父元素在不设置高度的情况下，是自适应子元素的高度的
- 在高度为0或不设置高度的情况下，高度是文字的行高，但是设置了高度则用的是设置的高度而不再是行高
{
height:100px;
line-height:30px;
} 高度为100px14、行内元素（或display:inline;）
有两个特点：1. 上下外边距、width、height不会起作用
2. padding会起作用，但是padding-top、padding-bottom不会占据位置，而且会把其他元素盖住。
15. inline和inline-block会引起间距的空格
解决方法：1. 可以给父元素添加font-size:0; 但是文本的内容会消失；
2. 父元素letter-spacing: -5px; 设置合理的值，
3. 直接设置浮动
16、auto
无意义的auto:
- 对于行内元素，左右外边距设置为auto,其结果为0 （因为行内和行内块的空间只有自身的那些位置，那些位置都让高度和宽度占据，而宽度和高度是根据内容决定的）