一、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取负值