#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、继承的样式权重最小

<div class="box">
    <a href="#">层叠</a>
</div>

.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);
    }
}

屏幕不小于600px时，最多显示4张图片。屏幕小于或等于600px时，一行最多只能放两张。

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;
    }    高度为100px

14、行内元素（或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 （因为行内和行内块的空间只有自身的那些位置，那些位置都让高度和宽度占据，而宽度和高度是根据内容决定的）

#CSS-阶段性查缺补漏（1）

CSS属性

猜你喜欢