CSS 原理理解

网页制作最初，HTML规定了 Normal Document Stream（标准文档流）来规范元素在网页中的显示法则：
标准文档流中元素分两种：块内元素，行内元素。

• 块内元素的特点有两个：（div标签）
  
  • 每个元素占据一个矩形区域，并且和相邻的兄弟块级元素竖直排列，不会排在同一行。
  • 块级元素在水平方向上会自动伸展，伸展到包含它的元素的边界为止。
• 行内元素的特点：（span标签）
  
  • 针对的是文字这一类元素，例如使字母做一个基本单位，字母之间可以横向排列，到最右端自动折行
  • 对于<strong></strong>这类标签，并不独立占据文档流中的一块区域，而只是指出了文字所占的范围。

再就是

竖直margin中的塌陷现象，上下紧密排列的元素的外边距并不是两个元素外边距之和，而是选取那个最大的外边距作为两个元素之间的外边距。

嵌套margin，子块的margin以父块的内容作为参考（实践？）。

Float

对于float，浮动，其实仍是在标准流之中的。

• （长度变化相对于标准流）对于标志为float的块级元素（行内元素？），块级元素的内容不再独占一行而随元素内容的宽度而变化这一特性使相邻的块级元素可以出现并排一行的情况。
• （位置变化）float：left/right，元素向其父元素的左侧或右侧靠紧。

清除浮动影响（其实并不不清楚）。

Position

static：默认，就是按盒子按照标准流（包括浮动方式）进行布局。

relative：以标准流的排版方式作为基础，使元素盒子相对于它原本的标准位置偏移指定的距离，仍处于标准流之中。重要理解：盒子真正所占有的区域还是按照标准流的排布方式所在的位置，并不是它偏移后的位置。

absolute：以它的包含框（父框）为基准进行偏移，脱离了标准流，对处于标准流的元素不产生影响。

fixed：只以浏览器窗口为基准进行定位，拖动滚动条位置不会变，（页面缩放，被标记元素还是在原来的位置，不会跟着按比例缩小？）