CSS
前言
在前一章节，我们讲述了CSS字体样式和文本样式，本篇的内容要讲述盒子模型，盒子模型在CSS里是一个重点，请细新理解。后续还会有JS 的篇章。
CSS样式无法展示请自行测试。
1.盒子模型的感念。
说到盒子我们就会想到快递的包装盒和物品盒子。
如图片: 
我们已带戒指的小盒子为例：
小红框就是为主
1.浅蓝色内区域是 内容（content） 部分，可以理解成生活中的物品。
2.我们向外看，有黄线画的区域是 内边距（padding） 部分，可以理解成物品外的保护棉或者泡沫。
3.红色框则是边框（border），也就是显示生活中的盒子。
4.蓝色划线则是外边距（margin），可以理解成小盒子与大盒子之间的距离。
宽高的值是内容加内边距和边框。
宽高表
| 属性 | 解释 | 值 |
| width | 宽度属性 | 长度值|百分比|auto |
| max-width | 最大宽度属性 | 长度值|百分比|auto |
| min-width | 最小宽度属性 | 长度值|百分比|auto |
| height | 高度属性 | 长度值|百分比|auto |
| max-height | 最大高度属性 | 长度值|百分比|auto |
| min-height | 最小高度属性 | 长度值|百分比|auto |
盒子表
| 属性 | 解释 | 值 | 单边值写法 | 多值用法 |
| content | 内容 | 参考：http://www.w3school.com.cn/cssref/pr_gen_content.asp | ---- | ---- |
| border | 边框 | 请看2.2内容 | ---- | ---- |
| padding | 内边距 | 长度值|百分比 | padding-边的方向: | （看多值表）注：单边写法没有多值 |
| margin | 外边距 | 长度值|百分比 | padding-边的方向: | （看多值表）注：单边写法没有多值 |
边框样式表
| 属性 | 解释 | 值 | 单边值写法 | ||||||||||||||||||||||||
| border-width | 边框宽（厚度） | thin（薄） ，medium（正常），thick（厚）长度值 | border-边的方向-width: | ||||||||||||||||||||||||
| border-color | 边框颜色 | RGB值，RGBA值等 | border-边的方向-color: | ||||||||||||||||||||||||
| border-style | 边框样式 |
|
border-边的方向-style: | ||||||||||||||||||||||||
| border | 外边框样式的缩写 | border:宽度 样式 颜色; | border-边的方向: |
边的方向表（不是单独属性 配合有单边值属性使用）
| 属性 | 意 |
|---|---|
| left | 左边 |
| right | 右边 |
| top | 上边 |
| bottom | 下边 |
多值表(只对本章内容荣中的外边距和内边距)
| 一个值 | 两个值 | 三个值 | 四个值 |
|---|---|---|---|
| 属性:值1; ( 4个方向都是值1) |
属性:值1 值2; (上下=值1，左右=值2) |
属性:值1 值2 值3; (上=值1，左右=值2，下=值3) |
属性:值1 值2 值3 值4; ( 上=值1，右=值2，下=值3，左=值4) |
2. 盒子的属性
2.1 width属性（宽度属性）和 height属性（高度属性）
宽度：
width:长度值|百分比|auto
(ie6无效)最大宽度：
max-width:长度值|百分比|auto
(ie6无效)最小宽度：
min-width:长度值|百分比|auto
高度：
height:长度值|百分比|auto
(ie6无效)最大高度：
max-height:长度值|百分比|auto
(ie6无效)最小高度：
min-height:长度值|百分比|auto
auto是自适应，高宽设置的是内容的高宽、
那些标签能设置高宽属性
1.块级元素
2.替换元素（如img ）
2.2边框
| 边框宽度 | border-width |
|---|---|
| 边框颜色 | border-color |
| 边框的样式 | border-style |
2.2.1 border-width属性（边框宽度）
语法
border-width:thin|medium|thick|长度
| 属性值 | 效果 |
|---|---|
| thin | 窄边框 |
| medium | 中等边框 |
| thick | 厚边框 |
| 长度值 | px，em |
2.2.2 border-color属性（边框颜色）
语法
border-color:RGB值|RGBA值
2.2.3 border-style属性（边框样式）
语法
border-style:none; 默认样式
| none | 无边框（默认） |
|---|---|
| hidden | 与none相同。除非在表格元素中解决边框冲突时。 |
| dotted | 定义点状边框。在大多数浏览器中呈现为实现 |
| dashed | 定义虚线。在大多数浏览器中呈现为实现 |
| solid | 定义实线 |
| double | 定义双实线 |
| groove | 定义3D 凹槽边框 |
| ridge | 定义3D 垄状边框 |
| inset | 定义3D inset边框 |
| outset | 定义3D outset边抗 |
| inherit | 规定应该从父元素继承边框样式。 |
2.2.4 如何设置 单个边框样式
| 值 | 意 |
|---|---|
| left | 左 |
| right | 右 |
| top | 头 |
| bottom | 底 |
语法
边框宽度
border-left-width:5px;
border-right-width:10px;
border-top-width:15px;
border-bottom-width:20px;
边框颜色
border-left-color:#f00;
border-right-color:#0f0;
border-top-color:#00f;
border-bottom-color:#ff0;
边框样式
border-left-style:solid; 实线
border-right-color:dashed;虚线
border-top-color:double;双实线
border-bottom-color:dotted;点状线
2.2.5 边框样式的缩写
语法
border:宽度 样式 颜色;
不同方向的设置
border-left:宽度 样式 颜色;
border-right:宽度 样式 颜色;
border-top:宽度 样式 颜色;
border-bottom:宽度 样式 颜色;
如：
border:5px solid #f00;
2.2.6 padding属性 （内边距）
语法
padding:长度值|百分比;
不同方向的设置
padding-left:长度值|百分比;
padding-right:长度值|百分比;
padding-top:长度值|百分比;
padding-bottom:长度值|百分比;
多值含义：
padding:值1;// 4个方向都是值1
padding:值1 值2;// 上下=值1，左右=值2
padding:值1 值2 值3;// 上=值1，左右=值2，下=值3
padding:值1 值2 值3 值4;// 上=值1，右=值2，下=值3，左=值4
注：不能为负值
2.2.7 margin属性 （外边距）
语法
margin:长度值|百分比;
不同方向的设置
margin-left:长度值|百分比;
margin-right:长度值|百分比;
margin-top:长度值|百分比;
margin-bottom:长度值|百分比;
多值含义：
margin:值1;// 4个方向都是值1
margin:值1 值2;// 上下=值1，左右=值2
margin:值1 值2 值3;// 上=值1，左右=值2，下=值3
margin:值1 值2 值3 值4;// 上=值1，右=值2，下=值3，左=值4
margin:auto;居中
注：可以为负值
两个相邻的元素外边距合并，合并值为外边距最大的值。
1.默认情况下，相应HTML块级标签存在外边距。
2.声明margin属性，覆盖默认样式。
bady,h1,h2,h3,h4,h5,h6,p{
margin:0px;
}
2.2.7 盒子模型计算。
盒子的宽度
内容宽度+左内边框宽度+右内边框宽度+左边框宽度+右边框宽度+左外边框宽度+右外边框宽度=盒子总宽度
盒子的高度
内容高度+下内边框宽度+上内边框宽度+下边框宽度+上边框宽度+下外边框宽度+上外边框宽度=盒子总宽度
正常盒子模型
高宽设置的是内容高宽度。
IE盒子模型
高宽设置的是内容高宽加内边距的高宽度。
文件声明后 浏览器使用标准盒子模型
!DOCTYPE HTML
3.display属性
块级元素和内联元素的转换。
inline值：元素奖显示为内联元素，元素前后没有换行符。
block值：元素将显示为块级元素，元素前后会带有换行符。
inline-block值： 行内块元素，元素呈现为inline，具有block相应特性。
none：此元素不会被显示。
display属性更多
4.总结
本篇我们讲述了盒模型和display属性。
如本文章描述有误请尽快联系博主！感谢您的阅读与帮助！