页面布局
- 文档流：HTML文档页面中，内容像流水那样从左向右，从上到下“流过”页面（从左向右读的语言）
- 替换元素：用作为其他内容占位符的一个元素，如 img 元素，大多数表单元素也可以被替换
- 非替换元素：元素的内容包含在文档中，如一个段落的文本内容都放在该元素本身之内
- 块级元素：指段落、标题、div之类，在正常文档流中时，会在它的框之前和之后生成“换行”，所以处在正常流中的块级元素会垂直放置
- 行内元素：元素不会在其之前和之后生成“换行”
盒模式(box model)/框模型
- CSS假定每个元素会生成一个或多个矩形框（或盒子），成为元素框(element box)，各个元素框中心有一个内容区(content area)，内容区周围是可选的内边距(padding)、边框(border)、外边距(margin)
- 元素框描述了一个元素在文档布局中所占空间的大小，因此每个元素框会影响其他元素框的位置和大小
![https://www.w3.org/TR/CSS2/images/boxdim.png]()
图片来自https://www.w3.org/TR/CSS2/images/boxdim.png
笔记
水平格式化
- 内边距不能为负，边框宽度不能为负
- width影响的是内容区的宽度，而不是整个可见元素框，所以 padding、 border、 margin值都会加到 width、 height上
- 正常流中块级元素框的水平部分总和就是父元素的 width，对边距设置距离时，取auto的值会自动确定所需长度，使元素宽等于父元素的 width
- margin、width均被指定，总长度超出父元素的宽度时，会导致过分受限，（针对从左至右阅读的语言）margin-right会被用户代理强制性设置为
auto。 - margin-left、margin-right设为 auto时，会在父元素中居中。margin-left、margin-right、width均为
auto时，margin-left、margin-right会被设为0，width取最大值。 - 对于替换元素，width设为 auto时，元素宽度为内容的固有宽度，如果给一个元素设定的 width值不同于其固有宽度，则 height值也会跟着成比例的变化，除非height值自己设置了特定值。
垂直格式化
- 只有height、margin-top、margin-bottom可以设置为 auto，padding-top、padding-bottom、border设为 auto时，会被取为0
- 要将元素垂直居中，可以将 margin-top、margin-bottom取 25%
- 只取了margin，其他边距为0时，垂直外边距会自动合并。相邻的外边距，较小的那个会合并（或重叠）到较大的一个中
- li前面的标志可以在列表项内容外，也可以在内容内，取决于 list-style-position的值，若标志在内部，则这个 ul/ol 就是一个块元素
行内元素
- 行框：包含行中出现的行内框的最高点和最低点的最小框
行内框：对于非替换元素，行内框的高度为 line-height，行内非替换元素的 padding、border、margin都不会影响行框高度，但会影响元素布局（边距会出现在行内元素的开始和末尾，因此会将文本推离/拉近行内元素）
对于替换元素，行内框的高度为内容区的高度（内容区为元素的固有高度加上所有的 padding、border、margin）。有固有高度的替换元素（如一个img）可能导致行框比正常高，但这不会改变任何元素的 line-height，只是会让行框的高度足够高以便恰好包含替换元素
行内元素的背景应用于内容区和所有内边距
- 基线在各em框（也称字符框）中位置对于不同字体是不同的
改变元素显示
display
- inline-block:作为替换元素被放在行中，如图像放在文本行（设置width、height会使行高变动）
- run-in:即行、块混合。 使块元素成为下一个元素的行内部分
一个元素生成 run-in框，且该框后面是一个块级框，则该 run-in元素将成为块级框开始处的一个行内框
run-in元素只会从文档中的父元素继承属性，而不是放在哪个元素中，就从哪里继承 只有当 run-in框后面是一个块框，
run-in才起作用，否则 run-in框将变为块框