标签：

CSS 选择符优先级

!important 声明＞内联样式（style）＞id 选择符（#id）＞类选择符（.class）＝伪类选择符（:hover ）＝属性选择符（[attr] ）＞类型选择符（标签）＝伪元素选择符（:first-child）

sticky 定位问题

sticky 定位的元素受父级块级元素影响，其宽度担任的是父级的宽度，此外其只能显示在父级的内容区，当滚动距离赶过其父级的高度时，即赶过内容区后，其也会相应得被推出可视区域，使用时要注意。
注：sticky 元素的父级元素不能含有 overflow:hidden 和 overflow:auto 属性。

display:inline-block 详解及兼容性要领

2002 年 W3C 推出 CSS2.1 规范时，给 。其感化是 “这个值导致一个元素孕育产生一个块状盒模型（block box），而自己作为单一的内联盒模型（inline box）流动摆列（flow）”。即 display 为 inline-block 的元素既可以像块状元素一样界说高度宽度，又可以和内联元素（好比文字）摆列在一行。
这个效果在页面设计的时候，很多处所都可以带来便当，最常见的莫过于在对链接进行 “以图换字” 时，既可以像内联元素那样实现一行摆列，又可以设置像块状元素那样设置单个链接巨细，还可以通过 text-indent 来隐藏文字显示配景图片。
此刻对付 inline-block 属性运用的需求也越来越多，可惜依旧只有 Firefox、Safari/Chrome、Opera、IE8+ 撑持。但 IE6、7 可以通过触发 hasLayout 属性来模拟（因为 inline-block 会触发 IE 的 hasLayout，从而使内联元素具有类似 inline-block 元素的属性）。Firefox2 有 -moz-inline-box 和 -moz-inline-stack 私有属性，在实际应用中两者都有一些 bug：-moz-inline-box 会存在 text-align（无法程度居中 / 居右，使用 -moz-box-pack:center/end 来修正）、line-height（无法垂直居中，使用 -moz-box-align:center 来修正）等属性无效的问题; 而相对来说 -moz-inline-stack 的表示好些，但也有 bug：如果元素的父级元素具有 display:inline 属性则会使 Firefox 中其包罗的链接不成点击，这个需要对元素用 position:relative 来解决，此外 text-align、line-height 等属性无效，目前无法修正）。

兼容实现要领：

display:inline-block;
*display:inline;
zoom:1;/* 这两个属性在 IE6、7 中让块状元素实现 display:inline-block 的效果 */
width:100px;
height:100px;/* 这两个属性为任意非 auto 值 */
text-indent:-999em;/* 现代浏览器中隐藏文字 */
font:0/0 "";
overflow:hidden;/* 这两个属性任选其一共同上文，实现 IE 隐藏文字 */
vertical-align:middle;/* 垂直居中，防备与其他内联元素有对照大的偏离 */
 
“垂直居中” 之研究

使用一个 100% 高的隐藏元素来帮助，设置 vertical-align 迫使内容区垂直居中，撑持图片、多行文字（不固定高度），是目前兼容性最好的要领

<div class="vertical-center">
<div class="text-wrap">
<p>text</p>
<p>text</p>
</div>
</div>
<div class="vertical-center">
<img src="">
</div>
 
.vertical-center:after {
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
content: "";
}
.text-wrap {/* 对付文本需要多包一层 */
display: inline-block;
*display: inline;
*zoom: 1;
width: 100%;
vertical-align: middle;
}
 
iOS 设备下 iframe 内容无法滚动的问题