盒模型、定位

CSS 盒子模型(Box Model)

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计
和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边
框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

盒子类型

1. 行盒，display等于inline的元素
2. 块盒，display等于block的元素

行盒在页面中不换行、块盒独占一行

display默认值为inline

浏览器默认样式表设置的块盒：容器元素、h1~h6、p

常见的行盒：span、a、img、video、audio

盒子的组成部分

无论是行盒、还是块盒，都由下面几个部分组成

1. Margin(外边距) - 清除边框外的区域，外边距是透明的。

2. Border(边框) - 围绕在内边距和内容外的边框。

3. Padding(内边距) - 清除内容周围的区域，内边距是透明的。

4. Content(内容) - 盒子的内容，显示文本和图像。

层模型

如何让html元素在网页中精确定位，就像图像软件PhotoShop中的图层一样
可以对每个图层能够精确定位操作。CSS定义了一组定位（positioning）
属性来支持层布局模型。

层模型有三种形式：

1. 绝对定位(position: absolute)

需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文
档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近
的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，
则相对于body元素，即相对于浏览器窗口。

2. 相对定位(position: relative)

需要设置position:relative（表示相对定位），它通过left、right、
top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过
程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起
来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、
top、bottom属性确定，偏移前的位置保留不动。

3. 固定定位(position: fixed)

fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标
是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览
器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，
或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口
内视图的某个位置，不会受文档流动影响，这与
background-attachment:fixed;属性功能相同。