CSS的页面布局和定位

• 盒子模型
• 定位机制
• 文档流
• 浮动定位
• 层定位

盒子模型

1.最外层称为container，标题header，菜单menu，目录content，以及相关主要内容。
2.页面当中的所有元素都可以看成是一个盒子，占据着一定的空间。
3.需要定义盒子的页面元素大小，边框，内边距和外边距，与其他元素的距离。

定位机制

1.三种不同定位机制：文档流，浮动定位，层定位。
2.overflow的设置：
超过之后，显示滚动条：scroll；
隐藏滚动条：hidden；
3.margin的设置：各个边框按顺时针方向设置，顺序为上右下左。同时盒子模型垂直方向合并，水平方向不合并。

文档流

1.顺序为从上到下，从左到右。
2.各个元素的设定：
block：独占一行，元素的宽高可以设置；
inline：不单独占据一行，宽度高度不可设置，高度为最高元素的宽度；
inline-block：不单独占据一行，可以设置这种元素的宽度和高度，通过display属性来设置。

浮动定位

1.使用div标签实现横向多列布局。
2.float属性：left，right;clear属性：可以清除这种浮动。浮动之后脱离了文档流原来的位置。
3.用处:可以设置文字和图片的相对位置，图片的相对位置。

4.清除浮动clear：
both：清除左右方向的浮动；
right：清除右侧的浮动；
none：默认的值。

<style>
#aside{
     	float: left;
     	width: 300px;
     	height: 500px;
     	background-color: #6cf;
     }
     #content{
     	float: right;
     	width: 700px;
     	height: 500px;
     	background-color: #cff;
     }
     </style>
     <div id="aside">
      
     </div>

层定位

1.定义：网页上，一个模块叠加到另一个模块上的效果。
2.position属性：
static：默认值；（没有定位，元素出现在正常的流中）
fixed：固定定位；（相对于浏览器窗口进行定位）

左右图片的相对位置一直不变，始终在屏幕上。

relative：相对定位；（相对于直接父元素进行定位），设置完成后会脱离文档流，原位置依然存在。

#box1{
width:170px;//宽度
height：190px;
position:relative;
top:20px;
left:20px;//边距的设置
}

absolute：绝对定位。（相对于static的第一个父元素进行定位），脱离正常文本流，原位置不再存在。

#box1{
width:170px;//宽度
height：190px;
position:absolute;
top:20px;
left:20px;//边距的设置
}

z-index属性：设置每层之间的叠加关系。