盒子模型的概念
• 盒子模型用来“放”网页中的各种元素。
• 网页设计中内容，如文字、图片等元素，都可是盒子（DIV嵌套）
宽度属性
宽度 width：长度值 | 百分比 | auto
最大宽度 max-width：长度值 | 百分比 | auto
最小宽度 min-width：长度值 | 百分比 | auto
高度属性
高度 height：长度值 | 百分比 | auto
最大高度 max- height ：长度值 | 百分比 | auto
最小高度 min- height ：长度值 | 百分比 | auto
边框属性
• 边框宽度（border-width）
• 边框颜色（border-color）
• 边框样式 ( border-style）
4个方向来表示（上、下、左、右）
设置元素边框宽度 border-width : thin | medium | thick | 长度值
设置元素边框颜色 border-color ： 颜色 | transparent
设置元素边框样式 border-style : 值 | none | hidden
不同方向表示：
border-[left | right | top | bottom]-width
border-[left | right | top | bottom]-color
border-[left | right | top | bottom]-style
边框缩写：
border : [宽度] | [样式] | [颜色]
不同方向：
border-top : [宽度] | [样式] | [颜色]
border-left : [宽度] | [样式] | [颜色]
border-right : [宽度] | [样式] | [颜色]
border-bottom ：[宽度] | [样式] | [颜色]
| 值 | 描述 |
|---|---|
| none | 定义无边框。默认值 |
| hidden | 与 “none” 相同。除非在表格元素中解决边框冲突时 |
| dotted | 定义点状边框。在大多数浏览器中呈现为实线 |
| dashed | 定义虚线。在大多数浏览器中呈现为实线 |
| solid | 定义实线 |
| double | 定义双线 |
| groove | 定义 3D 凹槽边框 |
| ridge | 定义 3D 垄状边框 |
| inset | 定义 3D inset 边框 |
| outset | 定义 3D outset 边框 |
| inherit | 规定应该从父元素继承边框样式。 |
内边距属性
设置元素的内容与边框之间的距离（内边距或填充）,分4个方向
（上、右、下、左）
– padding-top : 长度值 | 百分比
– padding-right :长度值 | 百分比
– padding-bottom :长度值 | 百分比
– padding-left :长度值 | 百分比
说明：值不能为负值
内边距属性缩写
padding : 值1； //4个方向都为值1
padding : 值1 值2 ; // 上下=值1，左右=值2
padding : 值1 值2 值3；// 上=值1，左右=值2，下=值3
padding : 值1 值2 值3 值4；// 上=值1，右=值2，下=值3,左=值2
外边距属性
设置元素与元素之间的距离（外边距）, 4个方向（上、右、下、左）
– margin-top : 长度值 | 百分比 | auto
– margin-right : 长度值 | 百分比 | auto
– margin-bottom : 长度值 | 百分比 | auto
– margin-left : 长度值 | 百分比 | auto
说明：值可为负值
外边距属性缩写
设置元素与元素之间的距离（外边距）, 4个方向（上、右、下、左）
margin : 值1； //4个方向都为值1
margin : 值1 值2 ; // 上下=值1，左右=值2
margin : 值1 值2 值3；// 上=值1，左右=值2，下=值3
margin : 值1 值2 值3 值4；// 上=值1，右=值2，下=值3,左=值2
• 默认情况下，相应HTML块级元素存在外边距
body、h1~h6、p……
• 声明margin属性，覆盖默认样式
• margin值为auto , 实现水平方向居中显示效果
• 由浏览器计算外边距
• margin值为auto , 实现水平方向居中显示效果
• 由浏览器计算外边距
标准盒子模型
• 在 CSS 中，width 和 height 指的是内容区域的宽度和高度
• 增加内边距、边框和外边距不会影响内容区域的尺寸
• 但会增加元素框的总尺寸
IE盒子模型
display属性
• inline
元素将显示为内联元素，元素前后没有换行符
• block
元素将显示为块级元素 , 元素前后会带有换行符
• inline-block
行内块元素，元素呈现为inline，具有block相应特性
• none
此元素不会被显示