盒子模型概念
- 用来存放网页中的各种元素
- 网页设计中内容，如文字、图片等元素，都可以视为盒子（DIV嵌套）
盒子模型属性
width属性
宽度： width: 长度值 | 百分比 | auto
最大宽度： max-width:长度值 | 百分比 | auto
最小宽度： min-width:长度值 | 百分比 | auto
设置块级元素和替换元素的内容宽度
百分比是相对父元素的宽度进行操作
举个栗子1：
由于max-width限制了第二段的最大宽度，只能接受比他小的值，所以对整个<p>标签400px的宽度设置，对他不起作用。
由于min-width限制第三段的最小宽度，只能接受比他大的值，所以对整个<p>标签400px的宽度设置，对他产生效果。
举个栗子2：
由于min-width限制第三段的最小宽度，只能接受比他大的值，所以对整个<p>标签400px的宽度设置，对他不起作用。
举个栗子3：
最后一个标签的最小宽度（300px）小于/
标签宽度，所以最后一个标签最小宽度为400px
当 max-width 小于 min-width 时
最小宽度仍为300px
height属性
高度： height: 长度值 | 百分比 | auto
最大高度： max-height:长度值 | 百分比 | auto
最小高度： min-height:长度值 | 百分比 | auto
百分比是相对父元素的高度进行操作
最大值，最小值关系与宽度同理
width和height的使用范围
如果设置一个高度/宽度另一个默认为auto
如果设置宽度不设置高度，高度随内容而定
如果设置高度不设置宽度，<P>宽度宽度为一整行
max和min属性有兼容性问题，IE不支持
可设置高和宽属性的标签:
-
块级元素 <p><div><h1~6><ul><li><ol><dl><dt><dd>
-
替换元素 浏览器根据其标签的元素与属性来判断显示的具体内容<img><input><texterea>等
border边框属性
-
border-width: thin | medium | thick |长度值
-
border-color:颜色值 | transparent
-
border-style
- 边框不同方向设置：
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:[宽度]|[样式]|[颜色]
举个栗子
效果如下：
- border-radius
border-radius可以使元素的边角变圆。
border-radius接受多种长度单位，如百分比，像素，确定元素边角变圆的半径。单个值表示四个角的弧度一致，两个值按分别表示top-left/bottom-right和top-right/bottom-left，输入四个值按顺序分别表示：top-left，top-right，bottom-right和bottom-left。
思考border-radius多个值的顺序时(包括margin和padding)，记住它们是从左上角开始（margin和padding从上侧开始）按顺时针方向排序的。
div {
border-radius: 5px;
}
border-radius属性也允许我们使用普通方法书写单个属性值。这些普通的属性以border单词开始，跟着是边角的垂直位置(top 或 bottom),再是边角的横向位置(left 或 right)
最后是半径radius。
举个栗子，要设置<div>右上角的边角半径
div {
border-top-right-radius: 5px;
}
内边距属性
设置元素的内容与边框之间的距离（内边距或填充），分4个方向（上右下左）
- padding-top:长度值 |百分比
- padding-bottom:长度值 |百分比
- padding-right:长度值 |百分比
- padding-left:长度值 |百分比
加入填充距离后，容器大小会变化，比如padding-top:30px,整个块的高度会增加30px
举个栗子：
效果如下
当然，内边距也有简写：
外边距属性
设置元素与元素之间的距离（外边距），4个方向（上右下左）
- margin-top:长度值 |百分比|auto
- margin-bottom:长度值 |百分比|auto
- margin-right:长度值 |百分比|auto
- margin-left:长度值 |百分比|auto
缩写方式：
- margin值为auto，实现水平方向居中显示
- 由浏览器计算外边距
如果上下外边距的值一致，左右外边距的值一致，我们可以输入两个值。 设置上下外边距的值在前面。以下例子将上下外边距设置为10像素，将左右外边距设置为20像素：
div {
margin: 10px 20px;
}
外边距属性
- 垂直方向，两个相邻元素都设置外边框，外边框会发生合并
- 合并后外边框高度=两个发生合并外边框的高度总中最大值
position属性
规定元素的定位类型，任何元素都可以定位，绝对或固定元素会生成一个块级框。
类似坐标轴z轴，给一个元素设置position之后，就可以设置z-index值，这个值越大，重叠的时候就越在上面。
| 值 | 描述 |
|---|---|
| absolute | 生成绝对定位的元素，将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。 |
| fixed | 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| relative | 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置 |
| static | 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
| inherit | 规定应该从父元素继承 position 属性的值。 |
区别和联系
- position: relative：相对定位
- 不影响元素本身特性（保留元素原本特性）
- 不会使元素脱离文档流（即改变位置也不会占用新位置）
- 没有定位偏移量时对元素无影响（相对于自身原本位置进行偏移）
- 提升层级
相对默认位置产生变化（原来蓝色夹在红色和黄色中间）
- position: absolute：绝对定位
- 使元素完全脱离文档流（在文档流中不再占位）
- 使内联元素在设置宽高的时候支持宽高
- 使区块元素在未设置宽度时由内容撑开宽度
- 相对于最近一个有定位的父元素偏移，如果没有找到，那就是以浏览器框为父元素
- 相对定位一般配合绝对定位使用（将父元素设置相对定位，使其相对于父元素偏移）
- 提升层级
蓝色absolute定位以div框为父元素，脱离文档流不占位子，黄色上去
- position: fixed：固定定位
fixed生成固定定位的元素，上下滚动位置还是固定，相对于浏览器窗口进行定位。
- position：sticky：就是常见的导航栏，最开始在header下面，向下滚动后，会固定在浏览器最上面。
当容器完整展示的时候，是相对定位，当容器展示不完全时，是固定在顶部的定位。
举个栗子：
h2
{
position:absolute;
left:100px;
top:150px;
}
<h2>456</h2>
效果如下：
这是绝对距离，跳脱出来以浏览器为边沿，转化为块状元素，距离左边框100px，距离上边框150px
盒子模型计算
设置width和height是设置的内容大小，而不是整个盒子尺寸
标准盒子模型：
盒子在页面中宽度=左边距+左边框+左填充+内容宽度+右填充+右边框+右边距
盒子在页面中高度=上边距+上边框+上填充+内容宽度+下填充+下边框+下边距
IE盒子模型：
盒子在页面中宽度=左边框+左填充（内边距）+内容宽度+右填充（内边距）+右边框
盒子在页面中高度=上边框+上填充（内边距）+内容宽度+下填充（内边距）+下边框
如果没有Doctype文档类型声明，各浏览器按照自己的方式解析 如果有Doctype文档类型声明，按照标准盒子模型来解析
box-sizing
在CSS3中，盒子模型新的计算方法：
这个属性的三个值:
content-box,padding-box和border-box
（但是box-sizing是CSS3的属性，并不是所有浏览器都是支持，部分老版本浏览器仍然不支持，所以我们使用时需要注意那些浏览器会出现兼容问题）
content-box
默认属性，没什么特别的，计算盒子宽度仍然是需要加上外边距边框和内边距。
padding-box
将padding属性计算入width和height属性，例如width设置为200px，padding设置为20px,那这个元素盒子的实际宽度还是200px。
换言之，内部不管再拥挤也要，一致对外（国共合作抗日），随着内边距增加，给内容的区域会变小，但是整个盒子大小不变。
div{
box-sizing:padding-box;
}
border-box
将padding属性和border属性计算入width和height属性，例如width设置为200px，padding设置为20px，border设置为10px，那这个元素盒子的实际宽度还是200px。
但是如果增加了margin属性，盒子总大小需要计算他，因为box-sizing并不包含margin属性。
这是最佳选择，只需要管理外边距即可。
举个栗子：
设置了内边距，但是盒子实际大小还是200px
盒子模型的应用
HTML元素分类：
-
块级元素，占一整行 <p><div><h1~6><ul><li><ol><dl><dt><dd>
-
行内元素（内联元素）,尽量会一行显示 <span><a><em>
display属性
-
block 元素将显示为块级元素，元素前后有换行符
-
inline 元素将显示为行内元素，元素前后没有换行符
-
inline-block 是行内块元素，元素呈现为inline，具有block相应属性
-
none 此元素不会被显示
行内元素粘连效果：
将<span>标签之间的空格去掉就可以粘连在一起
而<div>块级元素标签自动粘连在一起
总结
- 相应内联元素（行内元素inline）以及使用display:inline设置成内联元素的元素，width和height属性无效，水平padding和margin有效，垂直padding和margin无效。
- 块级元素(div)以及使用display:block设置成块级元素的元素width/height/margin/padding都生效。
