知识整理之CSS篇

CSS篇主要从CSS兼容、CSS3新特性、CSS选择器、高频属性、高频布局、高频知识点、性能优化等方面进行归纳。如对HTML知识点感兴趣，可移步至：知识整理之HTML篇

CSS Hack

CSS Hack 就是针对不同的浏览器或不同版本浏览器写特定的 CSS 样式达到让浏览器兼容的过程。

CSS Hack 常见的有三种形式：CSS属性Hack、CSS选择符Hack以及IE条件注释Hack。

CSS属性Hack(在标准模式下)

color: red;  /* 所有浏览器识别 */
_color: red; /* 仅IE6 浏览器识别 */
-color: red; /* 仅IE6 浏览器识别 */
*color: red; /* 仅IE6、IE7 浏览器识别 */
+color: red; /* 仅IE6、IE7 浏览器识别 */
*+color: red; /* 仅IE6、IE7 浏览器识别 */
#color: red; /* 仅IE6、IE7 浏览器识别 */
color: red\0; /* 仅IE8-IE10 浏览器识别 */ 
color: red\9\0; /* 仅IE9、IE10 浏览器识别 */ 
color: red!important; /* 仅IE6 浏览器不支持 */

CSS选择符Hack

*html #demo { color: red; } /* 仅IE6 浏览器识别 */
*+html #demo { color: red; } /* 仅IE6、IE7 浏览器识别 */
body:nth-of-type(1) #demo { color: red; } /* IE9+、FF3.5+、Chrome、Safari、Opera 可以识别 */
head:first-child+body #demo { color: red; } /* IE7+、FF、Chrome、Safari、Opera 可以识别 */
:root #demo { color: red9; } /* 仅IE9 识别 */

IE条件注释Hack

<!--[if IE]>此处内容只有IE可见<![endif]-->
<!--[if IE6]>此处内容只有IE6.0可见<![endif]-->
<!--[if !IE 7]>此处内容只有IE7不能识别，其他版本都能识别，当然要在IE5以上。<![endif]-->
<!--[if gt IE 6]> IE6以上版本可识别,IE6无法识别 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
<!--[if lt IE 7]> 低于IE7的版本才能识别，IE7无法识别。 <![endif]-->
<!--[if lte IE 7]> IE7以及IE7以下版本可识别<![endif]-->
<!--[if !IE]>此处内容只有非IE可见<![endif]-->

常见浏览器兼容性问题与解决方案？

不同浏览器的标签默认的 padding 和 margin 不同

问题症状：常用标签，不加样式控制的情况下，各自的 margin 、 padding 差异较大。

解决方案：

* {
    margin: 0;
    padding: 0;
}

备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设置各个标签的 margin 、 padding 是0。

块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大

问题症状：常见症状是IE6中后面的一块被顶到下一行。

解决方案：在float的标签样式中设置

#demo { display: inline }

当标签的高度设置小于10px，在IE6、IE7中会超出自己设置的高度

问题症状：IE6、7和遨游里这个标签的高度不受控制，超出自己设置的高度。

解决方案：给超出高度的标签设置

#demo { overflow: hidden; }
/* 或者 */
#demo { line-height: 8px; }  /* 假设标签高度为9px */

行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug

问题症状：IE6里的间距比超过设置的间距

解决方案：

#demo {
    display: block;
    display: inline;
    display: table;
}

备注：行内属性标签，为了设置宽高，我们需要设置 display:block; (除了input标签比较特殊)。在用 float布局 并有横向的 margin 后，在IE6下，他就具有了 块属性float后的横向margin的bug 。不过因为它本身就是行内属性标签，所以我们再加上 display:inline 的话，它的高宽就不可设了。这时候我们还需要在 display:inline 后面加入 display:talbe 。

图片默认有间距

问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距， 加了问题一中提到的通配符也不起作用 。

解决方案：

img { float: left; }

备注：因为 img 标签是行内属性标签，所以只要不超出容器宽度， img 标签都会排在一行里，但是部分浏览器的 img 标签之间会有个间距。去掉这个间距使用float是正道。

IE9一下浏览器不能使用opacity

解决方案：

#demo {
    opacity: 0.5;
    filter: alpha(opacity=50);
    filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
}

介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

CSS盒子模型：由四个属性组成的外边距(margin)、内边距(padding)、边界(border)、内容区(width和height)

• 盒子模型有两种， IE 盒子模型、W3C 盒子模型
• IE盒子模型宽高 = 内边距﹢边界﹢内容区
• 标准盒子模型宽高 = 内容区宽高
• css设置方法

/* 标准盒模型 */
box-sizing: content-box;

/* IE盒模型 */
box-sizing: border-box;

/* 继承父元素 */
box-sizing: inherit;

对BFC规范的理解？

什么是BFC

• BFC （Block Formatting Context）即“ 块级格式化上下文 ”。常规流（也称标准流、普通流）是一个文档在被显示时最常见的布局形态。一个框在常规流中必须属于一个格式化上下文，你可以把BFC想象成一个大箱子，箱子外边的元素将不与箱子内的元素产生作用。
• BFC 是W3C CSS 2.1 规范中的一个概念， 它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用 。当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。也可以说BFC就是一个作用范围。

形成BFC的条件

• 浮动元素，float 除 none 以外的值
• 定位元素，position（absolute，fixed）
• display 为以下其中之一的值 inline-block，table-cell，table-caption
• overflow 除了 visible 以外的值（hidden，auto，scroll）

BFC的特性

• 内部的Box会在垂直方向上一个接一个的放置
• 垂直方向上的距离由margin决定
• bfc的区域不会与float的元素区域重叠
• 计算bfc的高度时，浮动元素也参与计算
• bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素

具体特性解释，可移步至 CSS中的BFC详解

什么是 FOUC？如何来避免 FOUC？

什么是外边距重叠？ 重叠的结果是什么？

解释下什么是浮动和它的工作原理？

什么是浮动？

非IE浏览器下，容器不设高度且子元素浮动时，容器高度不能被内容撑开。 此时，内容会溢出到容器外面而影响布局。这种现象被称为浮动（溢出）。

工作原理

• 浮动元素脱离文档流，不占据空间（引起“高度塌陷”现象）
• 浮动元素碰到包含它的边框或者其他浮动元素的边框停留

如何清除浮动

1. 给浮动元素的父元素添加高度（扩展性不好）

如果一个元素要浮动，那么它的父元素一定要有高度。高度的盒子，才能关住浮动。可以通过直接给父元素设置height，实际应用中我们不大可能给所有的盒子加高度，不仅麻烦，并且不能适应页面的快速变化；另外一种，父容器的高度可以通过内容撑开（比如img图片），实际当中此方法用的比较多。

2. clear:both

在最后一个子元素新添加最后一个冗余元素，然后将其设置clear:both,这样就可以清除浮动。 这里强调一点，即在父级元素末尾添加的元素必须是一个块级元素，否则无法撑起父级元素高度。

<style>
#wrap{
      border: 1px solid;
}
#inner{
      float: left;
      width: 200px;
      height: 200px;
      background: pink;
}
</style>

<div id="wrap">
    <div id="inner"></div>
    <div style="clear: both;"></div>
</div>

3. 伪元素清除浮动

上面那种办法固然可以清除浮动，但是我们不想在页面中添加这些没有意义的冗余元素，此时如何清除浮动吗？

结合 :after 伪元素和 IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。

<style>
#wrap {
    border: 1px solid;
}
#inner {
    float: left;
    width: 200px;
    height: 200px;
    background: pink;
}
.clearfix {
    *zoom: 1; 
}
/*ie6 7 不支持伪元素*/
.clearfix:after {
    content: '';
    display: block;
    clear: both;
    height: 0;
    line-height: 0;
    visibility: hidden;  /*允许浏览器渲染它，但是不显示出来*/
}
</style>

<div id="wrap" class="clearfix">
    <div id="inner"></div>
</div>

4. 给父元素使用overflow:hidden

这种方案让父容器形成了BFC（块级格式上下文），而BFC可以包含浮动，通常用来解决浮动父元素高度坍塌的问题。

设置zoom:1清除浮动原理?

• 触发 hasLayout ，清除浮动。
• zoom 属性是 IE浏览器 的专有属性， 它可以设置或检索对象的缩放比例 。解决ie下比较奇葩的bug。譬如外边距（margin）的重叠，浮动清除，触发ie的haslayout属性等。
• 原理 ：当设置了 zoom 的值之后，所设置的元素就会就会扩大或者缩小，高度宽度就会重新计算了，这里一旦改变 zoom 值时其实也会发生重新渲染，运用这个原理，也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题。
• zoom 属是 IE浏览器 的专有属性，火狐和老版本的webkit核心的浏览器都不支持这个属性。然而， zoom 现在已经被逐步标准化，出现在 CSS 3.0 规范草案中。
• 目前非ie由于不支持这个属性，它们又是通过什么属性来实现元素的缩放呢？ 可以通过css3里面的动画属性 scale 进行缩放。