基本网页布局一般分为三种：
1）流式布局
2）浮动布局
3）绝对定位布局
css中的定位机制：
1）标准文档流
特点：a.从上到下，从左到右，输出文档内容；
b.由块级元素和行级元素组成
（块级元素：从左到右撑满页面，独占一行；触碰到页面边缘时，会自动换行；eg: div、ul、li、dl、dt、p）
（行级元素：能在同一行内显示；不会改变HTML文档结构；eg: span、strong、img、input）
（块级元素和行级元素都是盒子模型）
2）浮动：通过float属性实现横向多列布局
3）绝对定位
盒子模型：
1）网页布局的基石；
2）有四部分组成：边框border、外边距margin、内边距padding、盒子中的内容content；
3）盒子3D模型：从上到下，依次为border、content+padding、backgroud-image、background-color、margin；
4）盒子模型尺寸=外边距+边框+内边距+盒子中内容的尺寸
横向两列布局：
1.float属性：使纵向排列的块级元素横向排列；
2.margin属性：设置两列之间的间距
position属性：
1）拥有3种定位形式：
a.静态定位; b.相对定位;c.绝对定位
2）可设置4个属性值：
a. static（静态定位）；
b. relative（相对定位）；
c. absolute（绝对定位）；
d. fixed（固定定位）
（绝对定位和固定定位都属于绝对定位）
相对定位：
1）相对于自身原有位置进行偏移；
2）仍处于标准文档流中；
3）随即拥有偏移属性和z-index属性
绝对定位布局：
1）通过设置position属性实现；
2）CSS中规定的第三种定位机制；
3）能够实现横向多列布局及较为复杂的定位
绝对定位：
1）建立了以包含块为基准的定位；
2）完全脱离了标准文档流；
3）随即拥有偏移属性和z-index属性
a) 未设置偏移量时：
无论是否存在已定位的祖先元素，都保持在元素初始位置，脱离了标准文档流；
b)设置偏移量时，偏移参照基准为：
无已定位祖先元素，以<html>为偏移参照基准；
有已定位祖先元素，以距其最近的已定位祖先元素为偏移参照标准
c)当一个元素设置了绝对定位，没有设置宽度时，元素的宽度根据内容进行调节
使用absolute实现横向两列布局：
常用于一列固定宽度，另一列宽度自适应的情况
主要应用技能：
1）relative父元素相对定位；
2）absolute自适应宽度元素绝对定位
（固定宽度列的高度>自适应宽度的列的高度）
网友评论