《网页布局基础篇》------自动居中-列布局

1.CSS中的定位机制：
标准文档流
浮动
绝对定位

2.标准文档流
特点：

1）.从上到下，从左到右，输出文档内容
2）.由块级元素和行级元素组成

3.块级元素
特点：

1）.从左到右撑满页面，独占一行
2）.触碰到页面边缘时，会自动换行

常见块级元素即块级标签，如

div,ul,li,dl,dt,p…..

4.行级元素
特点：

1）.能在同一行内显示
2）.不会改变HTML文档结构

常见行级元素即行级标签，如

span,strong,img,input……

5.块级元素和行级元素都是盒子模型

6.盒子模型
盒子模型由4部分组成：

边框border
外边距margin
内边距padding
盒子中的内容content

7.盒子3D模型

第一层：border
第二层：content+padding
第三层：background-image
第四层：background-color
第五层：margin

盒子模型尺寸=边框+外边距+内边距+盒子中的内容尺寸
页面

8.如何自动居中
大致页面代码：

<body>
<div id="wrap">
  <div id="header"> </div>    /*页面头部*/
  <div id="mainbody"> </div>  /*页面主体*/
  <div id="footer"> </div>    /*页面底部*/
</div>
</body>

1）.将页面包含在一个总的div中，将div的样式设置为：

#wrap{
       width:720px;/*某具体值*/
       margin：0 auto; /*上下值任意设置，左右值必须设置为auto*/
}

2）.将页面分成三个div，设置每个div的样式为：

#header{
         100%;  /*将会100%继承父元素的值*/
         height:200px;  /*某具体值*/
}
#mainbody{
         100%;  /*将会100%继承父元素的值*/
         height:600px;  /*某具体值*/
}
#footer{
         100%;  /*将会100%继承父元素的值*/
         height:100px;  /*某具体值*/
}

自动居中的原因：auto会根据浏览器的宽度自动的设置两边的外边距
原理：（浏览器的宽度-外包含层的宽度）/2=外边距

无法自动居中的2个原因：
1.给wrap设置浮动

#wrap{
       width:720px;/*某具体值*/
       margin：0 auto; /*上下值任意设置，左右值必须设置为auto*/
       float:left;
}

2.给wrap设置绝对定位

#wrap{
       width:720px;/*某具体值*/
       margin：0 auto; /*上下值任意设置，左右值必须设置为auto*/
       position:absolute;
}

注意：
想让页面自动居中，当设置margin属性为auto的时候，不能再设置浮动或绝对定位属性。