css基本概念记录（持续更新）

1.css选择器分类

• 选择器：如标签、类名、id
• 选择符:空格（后代）、> (父子)、+（相邻兄弟）、～（兄弟）、|| （列关系）
• 伪类：特征“：”，与浏览器/用户行为相关
• 伪元素：特征“：：”(IE8仅支持:伪元素)

2.css盒子

• 外在盒子：负责元素是可以一行显示，还是只能换行显示
• 内在盒子：又叫容器盒子，负责宽高、内容呈现
• 附加盒子：学名标记盒子（marker box），专门用来放圆点、数字这些项目符号。IE浏览器下伪元素不支持list-item或许就是无法创建这个“标记盒子”导致的
• 主块级盒子：所有的“块级元素”都有一个“主块级盒子”, list-item除此之外还有一个“附加盒子”
• 内容区域（content area）：内容区域指一种围绕文字看不见的盒子，其大小仅受字符本身特性控制，本质上是一个字符盒子（character box）；但是有些元素，如图片这样的替换元素，其内容显然不是文字，不存在字符盒子之类的，因此，对于这些元素，内容区域可以看成元素自身。
• 内联盒子（inline box）:“内联盒子”不会让内容成块显示，而是排成一行，这里的“内联盒子”实际指的就是元素的“外在盒子”，用来决定元素是内联还是块级。该盒子又可以细分为“内联盒子”和“匿名内联盒子”两类
• 行框盒子（line box）: 每一行就是一个“行框盒子”（实线框标注），每个“行框盒子”又是由一个一个“内联盒子”组成的
• 包含盒子（containing box）: 由一行一行的“行框盒子”组成。(在CSS规范中，并没有“包含盒子”的说法，更准确的称呼应该是“包含块”（containing block）)

3.内联元素

“内联元素”的“内联”特指“外在盒子”，和“display为inline的元素”不是一个概念！inline-block和inline-table都是“内联元素”，因为它们的“外在盒子”都是内联盒子

4.替换元素

根据是否具有可替换内容，我们也可以把元素分为替换元素和非替换元素。例如：<img>、<object>、<video>、<iframe>、<textarea>、<input>.替换元素有三个特性：

1. 内容的外观不受页面上css的影响。用专业的话讲就是在样式表现在CSS作用域之外。如果要修改样式，需要浏览器自身暴露的一些API
2. 有自己的尺寸。如：<video>、<iframe>或者<canvas>默认为300像素×150像素（不包含边框），<img>图片为0像素，表单元素则和浏览器相关
3. 在很多CSS属性上有自己的一套表现规则。如：vertical-align 替换元素是baseline被定义为字符x的下边缘，而替换元素为元素的下边缘