CSS 选择符优先级
!important 声明＞内联样式（style）＞id 选择符（#id）＞类选择符（.class）＝伪类选择符（:hover ）＝属性选择符（[attr] ）＞类型选择符（标签）＝伪元素选择符（:first-child）
sticky 定位问题
sticky 定位的元素受父级块级元素影响，其宽度继承的是父级的宽度，另外其只能显示在父级的内容区，当滚动距离超过其父级的高度时，即超过内容区后，其也会相应得被推出可视区域，使用时要注意。
注：sticky 元素的父级元素不能含有 overflow:hidden 和 overflow:auto 属性。
display:inline-block 详解及兼容性方法
2002 年 W3C 推出 CSS2.1 规范时，给 元素的 display 属性增加了 inline-block 值。其作用是 “这个值导致一个元素产生一个块状盒模型（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 元素的属性）。
兼容实现方法：
“垂直居中” 之研究
使用一个 100% 高的隐藏元素来辅助，设置 vertical-align 迫使内容区垂直居中，支持图片、多行文字（不固定高度），是目前兼容性最好的方法
iOS 设备下 iframe 内容无法滚动的问题
很长时间以来，iOS 设备上 Safari 中超出边界的元素将不能滚动，这时候需要用个小技巧来解决这个问题。
html 代码：
css 代码：
禁止双击时选择页面内容
在做图片滚动时，在双击左右箭头，快速切换图片滚动时，会选择附近区域的文字，感觉不是很好。
针对这个问题可以对相应的元素添加 onselectstart="return false;"（IE、Chrome），另外针对火狐添加 -moz-user-select:none，即代码如下所示：
如何去除点击链接或按钮时出现的虚线？
有时候在点击链接或者按钮的时，总有一个虚线框在触发元素上，显得特别刺眼（如用 a 标签 做 Tab 切换），那如何去除这个虚线框呢？
在 IE 中，需要在元素的 html 代码中加入 hidefocus=”true” 属性。即：
或者在直接给元素定义样式：
而在 Firefox 等浏览器中则相对比较容易，直接给元素定义样式 outline:none; 就可以了，另外针对 Firefox 的 input/button 元素要通过私有属性特别处理：
多行文字两端对齐
多行文字尤其是表单的 label 标签，因为字数不一，却要两端排版对齐。
正确的做法是 text-align:justify。但是还需要加上 CSS3 草案的 text-justify:distribute 。
这种做法存在的问题是：除了 IE 之外，尚无浏览器实现 text-justify:distribute。且 IE 必须还加上 text-align-last:justify。
是的，尽管 IE 常为我们所不齿，但是在文字排版和国际化方面，IE 是做的最好的。仅就两端分布对齐这个特例而言，IE 领先了其他浏览器 10 年以上。
这样综合下来，有如下代码：
以图换字的思路及方法
做网页的时候经常会遇到个问题：想让普通文字链接显示个性化的图片，就要对链接使用背景图片，同时让链接里的文字消失，这就需要用到 “以图换字”（Fahrner Image Replacement），就是用图片替换文字表现。
具体方法是位置移动：也就是让内容进行位置移动，移出显示区之外。
扩展阅读：Revised Image Replacement 上有更丰富的方法。
用 CSS Border 实现三角形的思路及方法
在盒模型中，上下左右边框交界处出会呈现平滑的斜线。利用这个特点，通过设置不同的上下左右边框宽度或者颜色可以得到小三角，小梯形等。
用 CSS 实现梯形角标时在 Firefox 下出现奇异白线的问题及解决方法
利用上条的思路，可以实现在容器上显示梯形角标：
但是在 Firefox 下会在梯形两端各出现一条白线，经确认是 Firefox 对 rotate 支持的 bug。
可以使用如下代码修复：
清除（闭合）浮动
按照 CSS 规范，浮动元素（floats）会被移出文档流，不会影响到块状元素的布局而只会影响内联元素（通常是文本）的排列。因此当其高度超出父级元素时，一般父级元素不会自动伸展以适应内容的高度，从而造成内容溢出影响破坏布局的现象。这种现象叫“浮动溢出”或者“高度塌陷”，如何避免？
解决方法：
注：overflow:hidden 用来布局容易出问题，一是很可能造成其内部的浮动层显示不全（致命伤）；二是在某些情况下会造成双击空白处全选（没总结出规律，偶尔会出现）。此外，某些时候还会造成性能问题。
这时，现代浏览器可以使用以下方法
另一种方法就是在父级元素内最后面插入一个额外的标签，并令其清除浮动以撑开父级元素。这种方法优点是兼容性好，缺点是需要额外的无语义的标签
强制文本自动换行和不换行的方法
防止文本撑破页面，强制自动换行：
强制<pre>换行：
注：强制文本不换行可以使用：white-space:nowrap;
IE 的 “hasLayout” 模式研究
“hasLayout” 模式
hasLayout 是 Windows Internet Explorer 渲染引擎的一个内部组成部分。在 IE 中，一个元素要么自己对自身的内容进行计算尺寸和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了 hasLayout 的属性，属性值可以为 true 或 false。
当一个元素的 hasLayout 属性值为 true 时，我们说这个元素有一个布局（Layout）。当一个元素有一个布局时，它负责对自己和可能的子孙元素进行尺寸计算和定位，而不是依赖于祖先元素来完成这些工作。
IE6、7 上的很多布局方面 Bug 都是和这个属性有关或者可以用这个属性解决的。
触发 “hasLayout”
- body、img、table、tr、th、td 等元素的 hasLayout 一直为 true。
- type 为 text、button、file 或 select 的 input 的 hasLayout 一直为 true。
- 设置 {position:absolute} 的元素的 hasLayout 为 true。
- 设置 {float:left|right} 的元素的 hasLayout 为 true。
- 设置 {display:inline-block} 的元素的 hasLayout 为 true。
- 设置 {height:xx} 或 {width:xx} 的元素必须具备以下两个条件之一，其 hasLayout 才能为 true：
- IE8 兼容模式和 IE8 以前的浏览器中，在标准 (strict) 模式下其 display 的值是 block。
- 元素在怪异模式（Quirks mode）下。
- 设置了 {zoom:xx} 的元素在 IE8 的兼容模式或 IE8 之前的浏览器中其 hasLayout 为 true，但在 IE8 的标准模式下则不会触发 hasLayout。
- 设置了 {writing-mode:tb-rl} 的元素的 hasLayout 为 true。
- 元素的 contentEditable 的属性值为 true。
- 在 IE8 标准模式下设置了 {display:block} 的元素的 hasLayout 一直为 true。
防止链接变成一次链接
所谓伪类就是指依赖于浏览器或是用户的状态。对于链接来讲，存在 link，hover，visited，active 四种状态，即四种伪类选择器：a:link（存在链接，但无鼠标动作），a:visited（被点击或访问过），a:hover（鼠标悬停于链接上时的状态），a:active（鼠标点击与释放之间的状态）。
CSS 便是以这几个伪类选择器实现了其为数不多的动态效果。目前最为常用的就是导航条和按钮的动态显示。
在使用链接的伪类选择器时，一般会发现链接点击一次后，会永远显示 visited 状态，没有办法表示 hover、active 了，所以我们要解决这个 “一次性按钮” 问题。
将样式表里面链接四种伪类选择器顺序修改成为：
顺序这样，后面的优先级大于前面的，就行了。
之所以排在后面的优先级大，是因为浏览器读取 CSS 文件时是自上而下的。
但这并不是充分条件。visited，hover，active 这三种状态不是独立的，它们存在交集。
比方说一个按钮，如果它被点击过，而且你正点击这个按钮，那么这个按钮既是 visited，也是 active，而且因为鼠标悬于按钮之上，所以它也处在 hover 的状态。那么这个时候，你把 CSS 文件中的 visited 置于最后的话，那么 hover 和 active 两种状态的属性都会被 visited 的属性所覆盖而不显示。
同理，active 必须置于 hover 之后才能显示其属性。
要点：
- visited 必须置于 hover 和 active 之上；
- active 必须置于 hover 之后；
- link 的位置无所谓，所以你只需保证 VHA 的顺序即可。
所以我们一般设置 a 的样式时候，都是按照 LVHA（简记为 LoVeHAte）的顺序来进行设置，可以避免出现上述的 bug。