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