CSS方框模型

边距 margin：元素外面的区域。它永远没有颜色，总是透明的。
边框 border：扩展到元素周围，位于任何填充的外部边缘上。边框可以具有多种类型，宽度，颜色。
填充 padding：存在于内容周围，并且会继承内容区的背景色。
内容 content：被填充包围。
如下图所示：

定义一个宽250px，高100px的

，并且具有红色的背景和1px的黑色边框：

div{
  width:250px;
  height:100px;
  background-color:#ff0000;
  border:1px solid #000000;
}

如果我们利用这些相同的属性定义第二个元素，但是还添加某种大小的margin和padding属性，那么将开始看到元素的大小如何变化。

div{
  width:250px;
  height:100px;
  background-color:#ff0000;
  border:5px solid #000000;
  margin:10px;
  padding:10px;
}

在添加了边距和填充后，包围元素本身的整个方框的总高度和总宽度要大得多。

元素的总宽度（width）是以下属性值之和：
width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
元素的总高度（height）是以下属性值之和：
height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom
因此，第二个div的实际宽度为300 （250+10+10+5+5+10+10），实际高度是150（100+10+10+5+5+10+10）

关于定位

相对定位是HTML使用的默认定位类型。利用dispaly样式属性的block值编排样式的元素会自动放置在新行上，而inline元素则将被放置在与它们之前的那个元素相同的行上。例如，

和

标签被视作是块元素，而标签则被视作是内联元素。
CSS支持的是另一种定位被称为绝对定位，因为它允许设置HTML内容在页面上的页面上的精确位置。但是其位置仍然是相对于出现在页面上的任何父元素的。
特定的样式规则使用的定位类型是有position属性确定的，它能够具有以下两个值之一：relative或absolute。在指定了定位的类型之后，可以使用以下属性提供的特定的位置。
left right top bottom

控制元素的堆叠方式

z-index样式属性使你能够设置元素的顺序，从而控制它们如何彼此堆叠。Z索引是指计算机屏幕里面的第三维（z轴）的概念。
z-index属性用于设置一个数值，指示样式规则的相对Z索引。分配给z-index的数字只相对于样式表中的其他样式规则才是有意义的，这意味着为单个规则设置z-index属性并没有多大意义。另一方面，如果为应用于重叠元素的多个样式规则设置z-index属性，具有更高z-index值的元素将出现在具有较低z-index值的元素上面。

管理文本流

概念上的当前行是一个用于在页面上的文本流。当把文本与其他元素混合在一起时，控制文本如何在那些其他的元素周围流动很重要。

float：确定文本如何在元素周围流动
clear：阻止文本在元素周围流动。
overflow：当元素太小以至于不能包含所有的文本时，控制文本的溢出。

float属性控制文本如何在元素周围流动，它可以设置为left或right，这些值确定相对于流动的文本把一个元素定位于何处。因此，把图像的float属性设置为left，将把图像定位到流动文本的左边。

clear属性组织文本流动到某个元素旁边，该属性可以设置为none，left，right，both。它的默认值是none，指示在流动文本时将不会对元素做任何特殊考虑。left值将导致文本停止在元素周围流动，直到页面的左边没有元素为止。right，both同上。

overflow属性处理溢出文本，它指的是文本在其矩形区域内放不下。如果把元素的width和height设置得太小，就可能会发生这种情况。visble设置可以自动扩大元素，使得溢出文本能够放入其中，这是该属性的默认设置。hidden值将使元素保持相同的大小，并且允许溢出文本从视图中隐藏起来。有趣的值是scroll，它可以给元素添加滚动条，使得可以来回移动查看文本。

box-sizing：默认值是context-box，可以设置border-box。两者不同

阴影：box-shadow：设置四个值和颜色 如：box-shadow：4px 0px 6px 6px red；
第一个值水平偏移，第二个值垂直偏移，第三个值模糊半径，第四个值阴影大小。
模糊半径和阴影大小可以不设置。颜色默认黑色。box-shadow：insert 4px 0px 6px 6px red；为内阴影

轮廓：outline 不占据空间在border外 如：outline：5px dashed blue；