CSS学习笔记（五）：盒模式和内容格式化

页面布局

• 文档流：HTML文档页面中，内容像流水那样从左向右，从上到下“流过”页面（从左向右读的语言）
• 替换元素：用作为其他内容占位符的一个元素，如 img 元素，大多数表单元素也可以被替换
• 非替换元素：元素的内容包含在文档中，如一个段落的文本内容都放在该元素本身之内
• 块级元素：指段落、标题、div之类，在正常文档流中时，会在它的框之前和之后生成“换行”，所以处在正常流中的块级元素会垂直放置
• 行内元素：元素不会在其之前和之后生成“换行”

盒模式(box model)/框模型

• CSS假定每个元素会生成一个或多个矩形框（或盒子），成为元素框(element box)，各个元素框中心有一个内容区(content area)，内容区周围是可选的内边距(padding)、边框(border)、外边距(margin)
• 元素框描述了一个元素在文档布局中所占空间的大小，因此每个元素框会影响其他元素框的位置和大小
  
  图片来自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

1. inline-block:作为替换元素被放在行中，如图像放在文本行（设置width、height会使行高变动）
2. run-in:即行、块混合。 使块元素成为下一个元素的行内部分
   一个元素生成 run-in框，且该框后面是一个块级框，则该 run-in元素将成为块级框开始处的一个行内框
   run-in元素只会从文档中的父元素继承属性，而不是放在哪个元素中，就从哪里继承 只有当 run-in框后面是一个块框，
   run-in才起作用，否则 run-in框将变为块框