CSS布局

CSS有三种定位机制：标准文档流（nomal flow），浮动（floats），绝对定位（absolute positioning）

标准文档流：
特点：从上到下，从左到右，输出文档内容（顾名思义：像流水一样，有一定的高度和宽度）

组成：由块级元素和行级元素组成

块级元素：从左到右撑满整个页面，独占一行；
              触碰到页面边缘时，会自动换行;

行级元素：能在同一行内显示；
             不会改变HTML文档结构

盒子模型有四个部分组成：
   边框：border
   外边距：margin
   内边距：padding
   盒子中的内容：content

margin : 上     右     下     左 （四个值） 
margin：上    左右    下   （三个值 ）
margin 上下   左右     （两个属性值）

盒子3D模型：第一层：border
                  第二层：content + padding 
                  第三层：background-img
                  第四层：margin

盒子模型的尺寸 = 盒子中内容的尺寸 + 内边距 + 边界 + 外边距

float属性：使纵向排列的块级元素，横向排列
3个属性值： left ---左浮动    right ----右浮动   none ----不浮动
特点：元素会左移，右移，直至触碰到容器为止
       设置了浮动的元素，仍处于标准文档流中
某元素设置浮动后，会影响其紧邻其后面的元素，即：即使某元素的下一个元素是块级元素，那么该块级元素也不会换行，，而是紧跟在设置浮动的元素的后面或或者前面
这时，如果不需要这样的布局，就需要清除浮动，给受浮动影响的元素设置清除浮动的方法如下：

方法一：clear：both 
    用途：当父包含层受浮动影响，且父包含层缩成一条线的时候，用clear：both是无效的，它一般用于紧邻其后面的元素的清除浮动 
方法二：width: 100%（不确定是不是一定要是百分之百）
           overflow: hidden
   用途：父级元素或者是紧邻其后面的元素受到浮动影响的话，都可以用该方法来设置清除浮动

position定位
1. 静态定位 ： static（ 静态定位） 
2.相对定位：   relative（相对定位）
 特点：相对于自身原有位置进行偏移
         仍处于标准文档流中
         随即拥有偏移属性和Z-index属性
会产生空间层堆叠，以自身位置为基础，设置偏移属性之后可能会覆盖其他紧邻的元素
3.绝对定位：   absolute(绝对定位)     fixed(固定定位)
特点：建立了以包含快为偏移基准的定位
        完全脱离标准文档流（不会对其兄级元素造成影响）
        随即拥有偏移属性和Z-index属性
当一个元素设置了绝对定位却没有设置宽度的时候，元素的宽度会根据内容来调节

文本缩进：text-indent:300px;