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{
width:100%; /*将会100%继承父元素的值*/
height:200px; /*某具体值*/
}
#mainbody{
width:100%; /*将会100%继承父元素的值*/
height:600px; /*某具体值*/
}
#footer{
width: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的时候，不能再设置浮动或绝对定位属性。
扫一扫
169
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
