盒子模型

三个属性均有四个方向。上top、右right、下bottom、左left。

外间距的合并

当一个元素出现在另一个元素上面时，第一个元素的下边距与第二元素的上边距会发生合并
当一个元素包含在另一个元素中时，并且没有内边距或边框把外边距分隔开时，两个元素的上外边距会发生合并
外边距的合并的好处，让排版在视觉上显得更美观

定位方式

绝对定位
先设置父标签为非static定位，然后设置元素的position属性为absolute，最后再设置偏移量。

相对定位

先设置元素的position属性为relative,然后再设置偏移量

固定定位

先设置元素的position属性为fixed，然后再设置偏移量

设置元素为固定定位后，元素会浮动在面面上方

层级

设置元素定位方式后，元素会浮在页面上方，此时可以通过z-index属性设置优先级，控制元素的堆叠顺序

取值为数字，值越大优先级越高，默认为auto(大多数浏览器默认为0)

注意：只能给非static定位的元素设置z-index属性。

浮动

通过float属性来实现元素的浮动，可以让块级元素脱离常规的文档流，向左或向右移动，在同一行显示，

如果一行显示不下，则会换行显示。

.box{

  padding: 30px;
  border: 1px solid #006DFD;
  overflow: hidden; /*忽略子标签浮动后，子标签无法撑开父标签的影响*/
}
.box>.child1{
  width: 200px;
  height: 200px;
  background-color: #fce876;
  float: left;
}
.box>.child2{
  width: 200px;
  height: 200px;
  background-color: #aa6c3d;
  float: right;
}