1.盒模型

   不管是什么元素,CSS都假定每个元素会生成一个或多个矩形框,我们称之为元素。各元素框的中心是内容区域，四周有可选的内边距、边框、轮廓和外边距。默认情况下，内容区的背景出现在内边距范围内。外边距区域始终都是透明的，因此透过它能看到父元素。内边距不能为负值，但是外边距可以。

（1）重要概念

• 常规流动：即渲染西方语言时从左至右，从上至下的顺序，以及传统的HTML文档采用的文本布局方式。多数元素都采用常规流动方式，除非元素浮动、定位了，放入弹性盒子或采用栅格布局了。
• 非置换元素：内容包含在文档中的元素。
• 置换元素：为其他内容占位的元素。典型的是img。
• 根元素：位于文档树的顶端。
• 块级框：段落、标题或div等元素生成的框。
• 行内框：strong或span等元素生成的框体。
• 行内块级框：内部特征像块级框，外部特征像行内框。行内元素的行为有点像置换元素，但不完全相同。可以理解为把一个div像图片一样插入一行文本中。

（2）容纳块

   每个元素的框体都相对容纳块放置，简单的说，容纳块是元素框体的布局上下文。容纳块由离元素最近的那个生成列表项目或块级框的祖辈元素的边界构成。

2.元素的显示方式

（1）display

   可以改变元素的显示方式。

（2）box-sizing

   这个值用于改变width和height值的具体意义。

3.行内元素

（1）重要概念

• 匿名文本：不在任何元素中的字符串。
• 字体框：由字体定义，也叫字符框。字形可能比字体框矮。
• 内容区：内容区可以是各字符的字体框连在一起构成的方框，也可以是元素中各字符的字形合在一起构成的方框。
• 行距：font-size和line-height之差。
• 行内框：内容区加行距后得到的方框。
• 行框：过一行中各行内框最高点和最低点的方框。

（2）CSS定义的一些行为和有用的概念

• 内容区相当于块级框的内容框。
• 行内元素的背景填充在内容区加内边距所在的区域里。
• 行内元素的边框在内容区外的内边距外侧。
• 非置换元素的内边距、边框和外边距在对应的方框上没有纵向效果，即对行内框的高度没有影响。

（3）行内框高度的确定

• 确定行内各置换元素和匿名文本的font-size和line-height值，后者减去前者，得到行距。行距除以2，分别添加到字体框的上部和下部。
• 确定各置换元素的height、marginb-top、margin-bottom、padding-top、padding-bottom、border-top-width和border-bottom-width，各值想加。
• 确定各内容区在一行的基线上方和下方分别超出多少。
• 确定设定了verical-align属性的元素纵向偏移有多少。
• 知道所有行内框的位置之后，计算行框的高度：基线与最高的那个行内框顶边之间的距离加上基线与最低那个行内框底边之间的距离。