网页布局与盒子模型

网页布局

布局： 又称为版式布局，是网页UI设计师将有限的视觉元素进行有机的排列组合
网页可以根据显示器（浏览器）宽度自适应
网页的长度从理论上说可以无限

分栏又称为分列， 常见布局：
一列布局 二列布局 三列布局 混合布局（*）

W3C标准 由万维网联盟指定的一系列标准 倡导结构、表现、行为三者分离

标准文档流

特点 从上到下 从左到右 输出文档内容
组成成分：块级元素和行级元素（都是盒子模型）
块级元素
从左到右撑满页面，独占一行； 触碰到页面边缘时，自动换行
行级元素
在同一行内显示，不会改变HTML文档结构

盒子模型

border padding margin content 前三者都有4个方向
4个值 上 右 下 左
3个值 上 左右 下
2个值 上下 左右
1个值 上下左右

盒子3D模型

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