HTML网页布局

*网页布局
   -1.盒子模型+浮动 
   -2.定位

*盒子模型
  盒子构成：内容+内边距+边框+外边距

  内边距: 内容与边框之间的距离
  外边距: 边框以外的距离

  内边距:padding
  padding-[top,bottom,left,right]: 设置指定位置的内边距
  padding: 上下左右
  padding: 上下  左右
  padding: 上  左右  下
  padding: 上  右  下  左

  外边距:margin
  margin-[top,bottom,left,right]: 设置指定位置的外边距
  margin: 上下左右
  margin: 上下  左右
  margin: 上  左右  下
  margin: 上  右  下  左

  妙用：块元素居中 
  margin: 0px auto;

  边框：border
  border-color:边框颜色
  border-style:边框风格
  border-width:边框粗细
  综合：
  border：边框粗细 边框风格 边框颜色

-浮动
  元素按照默认的从上到下或者从左到右顺序排序，标准文档流。
  float:  1.left  2.right   3.none(默认)

  clear: 清除浮动影响  1.left  2.right  3.both

  父边框塌陷解决方案:
  父元素:after{
            display: block;
            content: '';
            clear: both;
  }

-定位
 position属性
 -static：默认值，没有定位

 -relative：相对定位
 特点:
 1.不脱离标准文档流，对周边元素没有影响。
 2.相对于本身原来的位置定位。
 

 -absolute：绝对定位
 特点：
 1.脱离标准文档流，对周边元素产生影响。
 2.【当祖先元素有定位，则相对于最近的祖先元素定位】。
   当祖先元素没有定位，则相对于浏览器定位。

 -fixed：固定定位
 特点：
 1.脱离标准文档流，对周边元素产生影响。
 2.永远相对于浏览器定位。