选择符
- 子选择符：>
- 紧邻同胞选择符：+
- 一般同胞选择符：~
- 属性名选择符：标签名[属性名]
- 属性值选择符：标签名[属性名='属性值']
举例：选中除了第一个之外的其它元素：
HTML代码：
<ul> <li><a>Gryffindor</a></li> <li><a>Herqipaqi</a></li> <li><a>Ravencolor</a></li> <li><a>Slythirin</a></li> </ul>
CSS代码（只选择下一个li里面的a元素）：
ul li + li a **{border-left:1px solid #aaa;}
还有比较新奇的，用于多级菜单的逐层显示：
li:hover > ul {display:none;}
伪类
a链接一共有4个伪类：
- :link
- :visited
- :hover
- :active
由于这4个伪类的特指度相同，如果不按照这里列出的顺序使用它们，浏览器可能不会显示预期结果。记忆办法：LoVe&HAte~~
:hover可以用于任何元素
（特指度表示一条规则有多明确。一条规则的特指度，由它的选择符中包含多少个标签、类名和ID决定。）
:focus伪类
应用于任何元素，表示元素获得焦点的状态。
:target伪类
如果用户点击一个指向页面中其他元素的链接，则那个元素就是目标，可以用:target选中它。
比如：<a href="#more_info">More Infomation</a>，指向的是ID为more_info的元素，我再把#more_info:target {background:#eee;}，就会在点击链接转向ID为more_info的元素时，为该元素添加浅灰色背景。
结构化伪类
:first-child和:last-child —— 注意点：并不是加在父元素上，而是一组同胞元素的首个或尾个上
当然还有更灵活的:nth-child(n) —— n为数值，最常用于提高表格的可读性
伪元素
::first-letter
可以实现段落首字符放大的效果，如：p::first-letter {font-size:300%;}
::first-line
可以选中文本段落的第一行，如：p::first-line {font-family:Arial;}
::before和::after
可用于在特定元素的内容前面或后面添加特殊内容，比如：<p class='age'>25</p>，给它加上如下样式p.age::before {content:'Age: '}，能得到以下结果：Age: 25
（搜索引擎不会取得伪元素的信息，所以不要在伪元素中添加你想让搜索引擎抓到的重要内容）
十六进制表示的颜色值
纯红色 #ff0000
纯绿色 #00ff00
纯蓝色 #0000ff
6个数值两两分成3组，分别代表红、绿、蓝色值，根据每组的第一个值可以大概猜出颜色，因为十六进制的顺序是0123456789abcdef，由浅入深，所以可以估计#7c a9 be偏蓝绿色。
如果每组的两个值相等，可以简写，如纯红：#f00，纯绿：#0f0，纯蓝：#00f
叠加外边距（竖直方向）
给一列相同的元素设置相同的上下边距，中间元素的上下边距会重叠，也就是会覆盖值小的那个外边距。
根据经验，为文本元素设置外边距时通常需要混合使用不同的单位。比如说，一个段落的左、右外边距可以使用像素，以便该段落始终与包含元素边界保持固定间距，不受字号变大或变小的影响。而对于上、下外边距，以em为单位则可以让段间距随字号变化而相应增大或减小。就像这样：p {font-size:1em; margin:.75em 30px;}
围住浮动子元素的三种办法(重点)
问题：当一个元素的子元素都设置浮动后，它将无法包裹住这些浮动元素，实际高度将会很小甚至为0.
解决措施：
- 为父元素添加overflow:hidden;
- 同时浮动父元素；
- 添加非浮动的清除元素；
示例：方法3的衍生版，给父元素的伪元素::after清除浮动；
:after { content:'.'; display:block; height:0; visibility:hidden; clear:both; }
定位position
static,relative,absolute,fixed
relative是相对于原本该在的位置，调节top,right,bottom,left，但这个元素原来占据的空间没有动，页面除了它本身没有任何变化。
absolute将元素彻底从文档流中拿出来，默认相对body元素进行top,right,bottom,left
定位，会随着页面滚动而滚动。实际上，绝对定位元素的任何祖先元素都可以成为它的定位上下文，只要把相应祖先元素的position设定为relative即可。
fixed将元素彻底从文档流中拿出来，相对
浏览器窗口
进行top,right,bottom,left定位，不会随着页面滚动而滚动。
事实上，只要把元素的外边距和内边距设定好，多数情况下只用静态定位就足以实现页面布局了。除非真需要那么做，否则不要轻易修改元素默认的position属性。
文本垂直居中的一种办法：将文本的line-height设置成父元素的高度，而行高是在文本行上下平均分配的。
背景background
背景图片居中：通过把background-position设定为50% 50%，把background-repeat设定为no-repeat，可以实现图片在背景区域内居中的效果。
背景图片铺满：
**background-size: cover; **拉大背景图片，使其完全填满背景区，保持宽高比（有裁切）。
background-size: contain;缩放图片，使其刚好放在背景区，保持宽高比（露底）。
background-attachment属性控制滚动元素内的背景图片是否随元素而移动，默认值scroll，随着移动。如果值为fixed，背景图片位置保持不变，常用来给网页添加淡色水印。
简写背景属性
background: url(...) center #fff no-repeat contain fixed;
声明中少写了哪一种属性的值，就会用默认值。
CSS3新增的背景属性：
background-clip —— 控制背景元素绘制的区域，比如可以让背景颜色和背景图片只出现在内容区，而不出现在内边距区域。默认情况下，背景绘制区域是扩展到边框外边界的；
background-origin —— 控制背景定位区域的原点；
background-break —— 控制分离元素（比如跨越多行的行内盒子）的显示效果；
CSS3中背景图片可以有多张，并可以层叠，先声明的图片在上层
渐进增强和优雅降级
渐进增强(progressive enhancement)
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级(graceful degradation)
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
VSP厂商前缀（处理各大浏览器对部分CSS3属性不支持的问题）
-o-
-ms-
-moz-
-webkit-
以下CSS属性必须加VPS：
border-image
background
linear-gradient
transition
background-image
radial-gradient
transform
针对背景图片或渐变
translate
transform-origin
背景线性渐变
默认从上到下：background:linear-gradient(#000,#fff);
从左到右：background:linear-gradient(left,#000,#fff);
左上到右下：background:linear-gradient(-45deg,#000,#fff);
渐变点：一般用百分比确定的渐变区域的临界点。
背景径向渐变
background: -webkit-radial-gradient(#fff, #64d1dd, #70aa25);
background: -webkit-radial-gradient(circle, #fff, #64d1dd, #70aa25);
background: -webkit-radial-gradient(50px 30px, circle, #fff, #64d1dd, #70aa25);
字体大小（推荐使用rem）
实用经验：如果你想用em，但又需要设定具体的字体大小，可以把body的font-size设定为62.5%。这样，就等于把基准大小从16px改为10px（10/16=62.5%）。然后，em与px的对应关系就很明确了，比如1em就是10px，1.28em就是12.8px。
但是，em有一个致命伤，就是相对大小会逐层复合，会有很多计算，比较麻烦！
幸好，CSS3推出rem，所有元素都是相对HTML根元素，避免了逐层复合的麻烦！如今已被几乎各大浏览器支持（除了IE8及之前的老版本）。
文本属性
首行缩进：text-indent
字符间距：letter-spacing
单词间距：word-spacing
文本装饰：text-decoration
文本转换：text-transform
垂直对齐：vertical-align:任意长度值以及sub,super,top,middle,bottom等
vertical-align以基线为参照上下移动文本，但这个属性只影响行内元素。如果你想在垂直方向上对齐块级元素，必须把其display属性设定为inline。文本内一般用来设上下标。
如何在网页中应用网格排版？
画一个100*18的矩形，在它底部画一条线，并作为背景图片平铺在网页上即可。（18px是自定义的网格高度，可自行调整）
分栏布局
box-sizing:border-box; —— 改变盒子的内边距和边框时，不会对盒子整体宽度造成影响。
IE6和IE7不支持box-sizing属性，有一个专门解决这个问题的borderBoxModel.js，可以使用条件注释把它添加到HTML标记之后、结束的</body>标记之前。
子-星选择符 >*
选择符可以选择“所有元素”，故而，在一个选择符后面加一个，比如someSelector*就可以选择someSelector所代表元素的所有后代元素，如果再加一个>，变成someSelector > *，就会只选择someSelector所代表元素的所有子元素，而非后代元素。
用CSS3单元格实现分栏布局(重点)
这种方法不会导致固定不变的表格布局，也不会出现难以重新应用样式的问题（比如在手持设备上显示为一栏）。CSS可以把一个HTML元素的display属性设置为table、table-row、table-cell。通过这种办法可以模拟相应的HTML元素的行为。而通过CSS把布局中的栏设定为table-cell有三个好处：
1.单元格不需要浮动就可以并排显示，而且直接为它们应用内边距也不会破坏布局。
2.默认情况下，一行中的所有单元格高度相同，因而也不需要人造的等高栏效果了。
3.任何没有明确设定宽度的栏都是流动的。
（这种办法秒杀多栏布局采取的浮动法、外边距法，只有一个不足，就是IE7以及更低版本不支持！）
界面组件
用div画一个三角形：
div { border:12px solid; border-color:transparent red transparent transparent; height:0px; width:0px; }
网友评论