盒子模型：所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间，一般来说这些被占据的空间都要比单纯的内容要大。如何让元素进行位置的调整，其实就是通过调整盒子的边框和距离等参数来调整盒子的位置
盒子包括：content（内容）、border（边框）、padding（间隙）、margin（间隔）。
盒子模型的高度=content+padding+border+margin
1.border：一般用于分离元素 ，border的外围即为元素的最外围，因此计算元素的宽和高的时候就要将border纳入
属性（有三个）：color（他的设置方法与文字的属性完全一样），width（border的粗细程度thin、medium、thick、<length>），style（样式）。
style属性：none、hidden、dotted、dashed、solid、double、groove、ridge、inset和outset。其中none和hidden都是不显示border，二者的效果相同，只是运用在表格中是，hidden可以解决边框的冲突问题。
2.padding：用于控制content与border之间的距离，在浏览器中使用width或height属性指定了父块的宽或高，由于width和height的值中包含padding，那么content就会受到padding的挤压。（top、right、bottom、left）
3.margin：指的是元素与元素间的距离，用于控制块与块之间的距离。
（1）行内元素之间的margin = margin-right + margin-left
（2）块级元素之间的margin = 两者中较大者
（3）父子关系（一个div在另一个div内部）：子块的margin将以父块的content为参考
元素的定位
元素在网页中都必须有自己合理的位置，才能搭建出整个页面的结构。css定位的几种原理方法（position、float、z-index）
1.float定位：是css排版中非常的重要，属性float的值很简单，可以设置为left、right、none。当我们设置了向左向右浮动的时候，元素会向其父元素的左侧或右侧靠近。
2.position定位：指定块的位置，即块相对于父块的位置和相对于它自身应该在的位置，它的属性值有（static、absolute、relative、fixed）。
3.z-index属性：用于调整定位时重叠块的上下位置，与它的名称一样，想象页面为x-y轴，垂直于页面的方向为z轴，z-index值大的页面位于其值小的上方。它的属性值为整数，可以是负数也可以是正数。
