CSS知识整理
一. 基础
1. css的引入：
<link rel="stylesheet" href="">
link标签中，rel属性代表relation，href是hypertext reference，即超文本引用。另外，type属性总是会隐式声明为text/css，但这并不是一个绝对安全的做法。最后一个值得说的属性是media，它的3个被广泛支持的取值是all、screen和print。
<style type="text/css"></style>
style标签一定要使用type属性，与link相同，它的值是text/css
@import: url(..)
在所有css之前使用@import，可以用来加载外部样式表，如果不放置在所有css之前就不起作用。在@import语句前后添加html注释，可以避免一些老旧浏览器上的错误，而且仍然可以正确加载。
2. 内联样式：
style属性在xhtml 1.1中已经将其标注为不建议使用
二、选择器
1. 元素选择器：p {...}, div {...}
2. 通配选择器：*
3. 类选择器：.container
4. id选择器：#view
5. 属性选择器：img[alt] {...}（包含xx属性的选择器，值不限），img[alt="logo"]（具体属性选择器）
6. 后代选择器：ul li
7. 子元素选择器 ul > li
8. 相邻兄弟选择器： header + div（header元素之后紧挨着的div）
9. 伪类选择器：a:link，a:visited，input:focus，button:hover，button:active，ul:first-child，ul:last-child，ul li:nth-child(1)，p:first-letter（仅对段落的第一个字母生效）
10. 之前和之后选择器：h1:after { content: "！" } （css2.1允许插入生成的内容，并使用:before和:after直接设置样式）
11.选择器的特殊性：用户代理会计算选择器的特殊性，特殊性总和最高的选择器将会胜出。
id选择器 0, 1, 0, 0
类选择器、属性选择器和伪类选择器 0, 0, 1, 0
元素和伪元素选择器 0, 0, 0, 1
结合符和通配选择器对特殊性没有任何贡献
另外，每个内联声明的特殊性都是 1, 0, 0, 0
!important为重要声明，如果一个重要声明和非重要声明发生冲突，胜出的总是重要声明
如果两个规则的权重、来源和特殊性完全相同，在样式表中后出现的一个将胜出
继承的值没有特殊性，0比没有特殊性要强
总结以上：重要性 > 特殊性 > 出现顺序
三、字体
1. font-size的作用是设置字体的em框大小，即font-size = 1em，而不能保证实际字符的大小。
2. 通过@font-face: (font-family: 'xxx'; src='...') 可以导入字体
3. 使用text-indent可以为块级元素的第一行设置一个缩进，允许使用负值，并且该值可以继承
4. text-align的几个基本取值：left、center、right、justify、inherit。在使用justify时，可能造成大段空白，通过指定letter-spacing也许可以解决此问题。
5. line-height的计算值计算方法为：（line-height声明值 - font-size的计算值）/ 2，将这个数值分别应用到内容区的顶部和底部，这个结果就是该元素的行内框
6. vertical-align属性只能应用于行内元素和替换元素，常用取值包括sub（下标）、super（上标）、top、middle、bottom、baseline（默认值，基线是字体底部用于对齐的那条线）
7. letter-spacing和word-spacing的默认值是0
8. text-transform的值uppercase和lowercase可以方便的用于切换大小写，而不用修改html文档
9. text-decoration的常用值为none、underline、overline、line-through
10. text-shadow: 0px 0px 5px green; （右偏移、上偏移、模糊半径、颜色）
11. white-space: nowrap可以防止元素中的内容换行，相反pre可以正常格式化
四、盒模型
1. CSS假定每个元素都会生成一个矩形框，称为元素框。从内到外的可选属性为padding、border、和margin，这就是完整的盒模型
2. 大多数元素都在正常流中，要让一个元素不在正常流中，唯一的办法就是使之称为浮动或定位元素
3. 如果元素的内容包含在文档中，如<span>hello, world</span>，称为非替换元素
4. 替换元素是指作为其他内容占位符的一个元素，如<img src="logo.png" alt="logo" />
5. 块级元素是指p、h1、div之类的元素，这些元素在正常流中时，会在其框之前和之后生成“换行”，通过声明display: block;可以让元素生成块级框
6. 行内元素是块级元素的后代，通过声明display: inline可以让元素生成一个行内框
7. 在盒模型的7个属性中，width、margin-left和margin-right可以设置为auto
8. 在设置盒模型属性时，要考虑充分受限的情况，用户代理会做出相应调整，这里省略掉此内容
9. 一个替换元素的width不同于其固有宽度，height也会成比例变化（图片的成立比缩放）
10. 不同元素的垂直外边距会合并（margin-top和margin-bottom）
11. 匿名文本是指所有未包含在行内元素中的字符串（textNode）
12. 使用display修改元素的显示属性，并不会改变其本质。行内元素可能是块元素的后代，但反过来不行。
13. inline-block元素会作为替换元素放在行中，也就是说inline-block元素的底端默认位于baseline上，而且内部没有行分隔符
14. run-in是一个很有趣的属性，可以使某些块元素成为下一个块元素的行内部分。在某些情况下有用，比如标题正文混排。如果run-in元素的下一个兄弟节点不是块元素，则不会起作用。
15. 宽度和高度不能应用到行内非替换元素
16. margin: top right bottom left; 四个值的顺序，如果缺少做外边距的值，则用右外边距的值。如果缺少下的值，则用上的值。如果缺少右的值，则用上的值。
17. 如果向行内非替换元素应用margin，因为这个属性没有对行高造成影响，所以没有任何视觉效果
18. 边框绘制在元素的背景之上，所以当border-style设置为虚线（dashed、dotted）时，背景会透过来。
19. 可以通过声明border-color: transparent来得到一个有宽度但透明的边框。在ie7以前不支持此值。
20. background-attachment: fixed; 可以声明原图像相对于可视区是固定的，不会受滚动影响。
21. 大部分盒模型属性都无法继承
五、浮动和定位
1. 浮动元素会从文档的正常流中删除，但仍然会影响布局。一个元素浮动时，其他内容会“环绕”该元素。
2. 浮动元素的外边距不会合并
3. 如果要浮动一个非替换元素，必须为该元素声明一个width。负责根据css规范，元素的宽度趋于0
4. 浮动元素会生成一个块级框，不论这个元素本身是什么
5. 可以使用clear: left来使一个元素不会放置在浮动元素的右边，如果需要确保元素不与任何浮动元素在同一行上，要使用clear:both
6. position: static、relative、absolute、fixed、inherit。
当position为relative时，元素框向对原位置进行偏移，他原本所占空间仍然保留
当position为absolute时，元素从文档流完全删除，相对于其包含块定位（最近的一个特殊定位元素）
当position为fixed时，类似于absolute，其包含块为视窗本身
当position为static时，元素正常生成，块级元素生成一个矩形框，作为文档流的一部分，行内元素会创建一个或多个行框，置于其父元素中
7. overflow: visible、hidden、scroll、auto
默认值visible表明，元素的内容即使超出元素框仍然可见，元素框的不会因此改变
scroll，始终提供某种滚动机制
hidden，超出元素框的内容将被隐藏
auto，取决于用户代理，通常是在必要时提供一个滚动机制
8. visibility:visible、hidden。可见性，即使设置为不可见，仍然会影响文档布局，就像透明元素一样
9. position:absolute; top:0; left:0; right:0; margin: auto; 会导致该元素相对屏幕居中
六、表格
table display: table
tr display: table-row
td, th display: table-cell
thead display: table-header-group
tbody display: table-row-group
tfoot display: table-footer-group
col display: table-column
colgroup display: table-column-group
caption display: table-caption
1. 如果两个或多个边框相邻，他们会相互合并。实际上不是完全合并，而是看哪些边框会胜出
如果某个边框的border-style为hidden，它会优于其他边框
如果某个边框的border-style为none，它的优先级最低
窄边不敌粗边框
如果合并边框的样式和宽度都一样，只是颜色不同，按照以下顺序显示 cell、row、row group、column、 column group、 table
2. 自动布局不如固定布局效率高，但这正是HTML表使用多年的模型，只要表的width为auto就会触发这个模型
七、列表
1. list-style-type：decimal（数字）、disc（实心圆）、none、circle（空心圆）、square（方块）...
2. list-style-type属性及其他列表相关属性只能用于display: list-item的元素
3. list-style-image: url(...) 可以加载外部图片用于列表标志
八、用户界面
1. cursor可以改变光标的样式，常用值为default、pointer、move、resize、wait、help...
2. cursor: url(...) 可以加载外部图片
3. outline类似于边框，但outline不会影响盒模型
