CSS盒子模型
盒子模型的概念
- 盒子模型用来存放网页中的各种元素
- 网页设计中内容，如文字、图片等元素，都可是盒子（div嵌套）
形象描述：
盒子模型属性
width属性
宽度：
width：长度值|百分比|auto
最大宽度：
max-width：长度值|百分比|auto
最小宽度：
min-width：长度值|百分比|auto
代码应用：
实现结果：
当最小宽度大于初始设置的宽度值时，最终展示的宽度值为设置的最小宽度值
当最大宽度大于初始设置的宽度值时，最终展示的宽度值为设置的初始宽度值
百分比设置是针对父元素进行百分比的设置
height属性
高度：
height：长度值|百分比|auto
max-height：长度值|百分比|auto
min-height：长度值|百分比|auto
说明：设置块级元素和替换元素的内容高度
代码实现：
实现结果：
max-height 与 min-height 在部分版本浏览器下不兼容
高度与宽度
替代元素应用：
属性总结：
- width 和height 属性设置是内容的高和宽
- width 和height 属性设置对块级元素和替换元素有效
- max 和min 有兼容性问题，IE不支持
border属性
- border-width
- border-color
- border-style
设置边框宽度：
border-width：thin | medium | thick | 长度值
设置边框颜色：
border-color：颜色值|transparent
设置边框类型：
| 值 | 类型 |
|---|---|
| none | 无边框，默认值 |
| hidden | 与none相同，除非在表格元素中解决边框冲突时 |
| dotte | 定义点状边框，在大多数浏览器中呈现为实线 |
| dashed | 定义虚线，在大多数浏览器中呈现为实线 |
| solid | 实线 |
| double | 定义双线 |
| groove | 定义3D凹槽边框 |
| ridge | 定义3D垄状边框 |
| inset | 定义3D inset边框 |
| outset | 定义3D outset边框 |
| inherit | 规定应该从父元素继承边框样式 |
代码应用：
实现结果：
边框属性：
4个不同方向来表示上下左右
表示：
border-[left | right |top | bottom]-width
border-[left | right |top | bottom]-color
border-[left | right |top | bottom]-style
padding属性
设置元素的内容与边框之间的距离（内边距或填充），分四个方向
- padding-top：长度值百分比
- padding-right：长度值百分比
- padding-left：长度值百分比
- padding-bottom：长度值百分比
说明：值不能为负值
简单应用：
应用结果：
内边距属性缩写：
顺序为顺时针顺序
外边距属性
设置元素与元素之间的距离，4个方向
- margin-top：长度值|百分比|auto
- margin-right：长度值|百分比|auto
- margin-bottom：长度值|百分比|auto
- margin-left：长度值|百分比|auto
说明：值可以为负
代码应用：
外边距属性缩写：
盒子模型计算
IE盒子模型
没有doctype 声明，各浏览器按照自己的方式解析盒子 有doctype声明，按照标准盒子模型来解析
盒子模型的应用
- 块级元素，占一行：
<p>、<div>、<h1>~<h6>、<ul>、<li>、<ol>、<dl>、<dt>、<dd>
- 行内元素（内联元素），一行显示
<span>、<a>、<em>
块级元素与内联元素区别
代码应用
显示结果：
dispaly属性
- inline 元素将显示为内联元素，元素前后没有换行符
- block 元素将显示为块级元素，元素前后会带有换行符
- inline-block 行内块元素，元素呈现为inline，具有block相应特性
- none 此元素不会被显示
块级元素与内联元素的相互转化
代码展示：
显示结果：
注意事项
应用
样式继承关系
| 样式属性 | 继承 |
|---|---|
| width,height | 不继承块级元素，替换元素 |
| padding | 不继承 |
| margin | 不继承 |
| border | 不继承 |
说明：对于样式属性，通过设置值为inherit，指定从父元素继承相对属性值 eg：
div{padding：10px;}
div p{padding:inherit;}
小demo代码：
效果展示：
