CSS笔记（布局基础）

一、CSS盒模型
1、盒模型结构
content（内容）、padding（内边距）、border（边框）、margin（外边距）
所有元素都可以视为一个盒子，盒模型是页面元素的基本模型结构
*content包括width、height、background，它可以延伸到补白或边框内。
可以通过min-width、max-width、min-height、max-height灵活控制大小（弹性布局）
border属性包含三个子属性（border-style、border-color、border-width）

二、CSS3完善盒模型
1、定义显示方式
box-sizing:content-box | border-box | inherit
content-box：width/height=content
border-box：width/height=border+padding+content
2、定义元素大小（未完全支持）
resize: none | both | horizontal | vertical | inherit
3、溢出处理
overflow
overflow-x；visible | hidden | scroll | auto | no-display | no-content
overflow-y:visible | hidden | scroll | auto | no-display | no-content
4、定义轮廓
outline:[outline-color] || [outline-style] || [outline-width] || [outlineoffset] || inherit

5、边界（margin）的应用
1）网页居中：auto值
2）弹性页面：百分比
3）左右栏目顺序：margin取负值
4）边界重叠现象：上面元素浮动，下面元素不浮动
6、设计网页居中
1）非浮动：通过text-align和margin配合即可（前提网页必须要有宽度）
2）浮动：在网页包含框内再添加一层包含框，设计外套居中，内套浮动显示
7、设计多栏高度自适应
1）伪列布局：设计一个长条背景图，沿y-轴平铺
2）补白与边界重叠法：
i、思路为三列栏目（div）底部补白为无穷大（9999px），底部边界为负无穷大，最后这三栏的包含框定义overflow：hidden
ii、因为上面的方法只能根据中间栏目的高度来进行裁剪（overflow：hidden），改进的方法是让三栏浮动起来。若想要交换栏目可以使用margin取负值