概述
不论是简单的页面还是负责的页面,都是一堆的盒子,无非是盒子里面包含盒子,或者是盒子和盒子肩并肩
【从CSDN来看布局】
【从京东来看布局】
【从网易云课堂看布局】
理论模型
模型的落地
标准盒子模型的宽度/高度 = content + padding + border + margin
兼容IE6~9的非标准盒子模型用hack标签,hack就是*号,原理是在标准盒子模型的浏览器解析不了,不了了之;在IE6~9,先赋值200px,又解析300重新赋值。
#div1{ width:200px; *width:300px;}
容器div标签
- 自动换行
- 可以容纳任何元素
margin(间隔)
- margin-top
- margin-bottom
- margin-left
- margin-right
可以使用这样一次性的写法
#div1{ margin:20px; }
border(边框)
- width:边框粗细
- color:边框颜色
- style:边框样式(solid-实线,dotted-点画线,dashed-虚线,none-无线)
可以使用这样一次性的写法
#div1{border: 1px blue soild}
padding(间隙)
- padding-top
- padding-bottom
- padding-left
- padding-right
可以使用这样的一次性写法
#div1{ padding:20px; }