网页布局基础浅谈

CSS中，存在3种的定位机制
-标准文档流（Normal flow）
-浮动（Floats）
-绝对定位（Absolute positioning）

W3C标准,倡导结构,样式,行为分离
-结构化标准语言（HTML和XML）
-表现标准语言（CSS）
-行为标准语言（DOM和ECMAScript）

标准文档流

-从上到下，从左到右，输出文档内容
-由块级元素和行级元素组成(两个元素都是盒子模型)

块级元素

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

行级元素

-能在同一行内显示
-不会改变HTML文档结构

盒子模型

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

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

网页布局基础

-标准文档流
-块级元素
-margin属性—设置自动居中

浮动布局

-能够实现横向多列布局（横向两列、横向三列…横向N列）
-通过设置float属性实现
-float三个属性:left,right,none
-直到碰到容器为止,仍处于标准文档流
-相邻元素上移,占据其后位置,紧挨着它,并排显示

浮动导致问题
父元素高度无法自动扩展
元素上移，填满浮动元素右侧（或中间）的间隙
浮动元素对相邻元素的影响，会导致页面布局混乱

---

清除浮动
clear属性—常用clear:both;
同时设置width:100%(或固定宽度)+overflow:hidden;

横向两列布局

-float属性—使纵向排列的块级元素，横向排列
-margin属性—设置两列之间的间距

绝对定位布局

-能够实现横向多列布局及较为复杂的定位
-通过设置position属性实现

position属性

-static（静态定位）
-relative（相对定位）
-absolute（绝对定位）
-fixed（固定定位）

三种定位形式
-静态定位
-相对定位
-绝对定位

相对定位

-相对于自身原有位置进行偏移
-仍处于标准文档流中
-随即拥有偏移属性和z-index属性

绝对定位

-建立了以包含块为基准的定位
-完全脱离了标准文档流
-随即拥有偏移属性和z-index属性
-absolute和fixed都属于绝对定位

相同点

-完全脱离了标准文档流—兄弟元素不再受其影响
-以父包含块为基准定位—初始位置在父包含块的左上角

区别

偏移参照标准

absolute
-无已定位祖先元素，以为 偏移参照基准
-有已定位祖先元素，以距其最近的已定位祖先元素为偏移参照基准

fixed
-有、无已定位祖先元素，均以浏览器可视窗口为偏移参照基准

表现形式(滚动条)

absolute
-位置会随滚动条变化
fixed
-位置固定，不会随滚动条变化
-被他遮盖的元素，可以从其下穿过

使用absolute实现横向两列布局—常用于一列固定宽度，另一列宽度自适应的情况
relative—父元素相对定位
absolute—自适应宽度元素绝对定位

固定宽度列的高度>自适应宽度的列