1. 盒子模型内容
- 盒子模型概念
- 高和宽的设置
- 边框设置
- 内边距设置
- 外边距设置
- 盒子的计算
- 元素显示方式
2.盒子模型概念
- 盒子模型用来“放”网页中的各种元素。
- 网页设计中内容，如文字、图片等元素，都可以是盒子（DIV嵌套）。
3.盒子模型属性
3.1 宽度属性：
-
宽度：
width：长度值| 百分比 | auto -
最小宽度：
min-width：长度值| 百分比 | auto -
最大宽度：
max-width：长度值| 百分比 | auto
3.2 高度属性：
-
高度：
height：长度值| 百分比 | auto -
最小高度：
min-height：长度值| 百分比 | auto -
最大高度：
max-height：长度值| 百分比 | auto
3.3 哪些元素可以设置widht和height属性
- 块级元素：
<p> <div> <h1>~<h6> <ul> <ol> <dl> <dt> <dd>等 - 替换元素：浏览器根据其标签的元素与属性来判断显示的具体内容
<image> <input> <textarea> 等
总结：
width和height属性设置是内容的宽和高width和height属性设置对块级元素和替换元素有效min-height(width)/max-height(width)有兼容性问题，IE不支持
3.4 border边框属性
- 边框宽度（border-width）
- 边框颜色（border-color）
- 边框样式（border-style）
border-width: thin | medium | thick | 长度值
border-color: 颜色 | transparent
border-style: none | solid | doulbe（双线） | dotted | inset | outset | inherit 等
border边框属性不同方向的设置
表示：
border-[ left | right | top | bottom ]-width
border-[ left | right | top | bottom ]-color
border-[ left | right | top | bottom ]-style
3.5 padding填充属性
padding不能为负值
padding-top、padding-left、padding-right、padding-bottom
3.6 margin外边框属性
margin值可为负值
设置元素与元素之间的距离（外边距），4个方向（上、右、下、左）
margin-top、margin-left、margin-right、margin-bottom
- 默认情况下，相应HTML块级元素存在外边距
body、h1~h6、p... - 一般会声明margin属性，覆盖默认样式
body,h1,h2,h3,h4,h5,h6 {margin: 0} - 垂直方向，两个相邻元素都设置外边距，外边距会发生合并。合并高度为合并外边距的最大值
margin: auto;会针对父元素水平方向居中展示。
3.7 盒子模型计算
盒子在页面中所占的宽度：margin + border + padding + width
盒子在页面中所占的高度:margin + border + padding + height
标准盒子模型和IE盒子模型：
IE盒子模型：width 和 height 为 内容content的宽度和高度 + padding + border
如果HTML中没有<!DOCTYPE HTML>文档类型声明，各浏览器会按照自己的方式解析。如果有`文档类型声明，则按照标准盒子模型来解析，就会在各个浏览器中显示一样的效果。
4.盒子模型的应用
块级元素，独占一行。 行内元素（内联元素），一行显示。
inline: 元素将显示为内联元素。
block: 元素将显示为块级元素。
inline-block:行内块元素，元素呈现为inline，具有block相应特性。
none: 此元素不会被显示。
内联元素之间的空隙解决办法：
1.元素之间不换行 2.将父元素之间的字体设置为font-size: 0;
<div class="desp-titleBar">
<a href="javascript:;" class="course-desp">介绍</a>
<a href="javascript:;" class="course-outline">大纲</a>
</div>
把父级元素字体设置为font-size: 0;
.desp-titleBar{
font-size: 0;
a{
font-size: 16px;
}
}
5.标准盒模型和IE盒模型的转换
box-sizing: border-box; // 转化为IE盒模型
box-sizing: content-box; // 转化为标准盒模型
box-sizing: unset;
