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.