盒子模型
所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。
盒子模型概念
- 用来存放网页中的各种元素
- 网页设计中内容，如文字、图片等元素，都可以视为盒子（DIV嵌套）
盒子模型属性
宽度属性
宽度： width: 长度值 | 百分比 | auto
最大宽度： max-width:长度值 | 百分比 | auto
最小宽度： min-width:长度值 | 百分比 | auto
设置块级元素和替换元素的内容宽度
max-width限制了最大宽度，只能接受比他小的值 min-width限制了最小宽度，只能接受比他大的值
高度属性
高度：height: 长度值 | 百分比 | auto
最大高度：max-height:长度值 | 百分比 | auto
最小高度：min-height:长度值 | 百分比 | auto
百分比是相对父元素的高度进行操作
width和height的使用
如果设置宽度不设置高度，高度随内容而定
如果设置高度不设置宽度，<P>宽度宽度为一整行
-
是内容的高和宽
-
可设置高和宽属性的html标签:
-
块级元素
<p><div><h1~6><ul><li><ol><dl><dt><dd>等 -
替换元素 浏览器根据其标签的元素与属性来判断显示的具体内容
<img><input><texterea>等
- max和min属性有兼容性问题，IE不支持
border边框属性
边框宽度
border-width:thin | medium | thick |长度值
注意：
- 在设置边框宽度时，必须同时设置边框样式，如果未设置样式或设为none，则不论宽度设为多少都无效。
- 常用取值单位为像素。
边框颜色
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:[宽度]|[样式]|[颜色]
内边距属性
设置内容与边框之间的距离，可分四个方向设置：
padding-top|right|bottom|left: 长度值|百分比
内边距属性缩写：
paddind : 值1； /*四个方向都为值1*/
paddind : 值1 值2； /*上下=值1，左右=值2*/
paddind : 值1 值2 值3； /*上=值1，左右=值2，下=值3*/
paddind : 值1 值2 值3 值4； /*上=值1，右=值2，下=值3，左=值4*/
注意：
- 值不能为负值。
- 加入填充距离后，容器大小会变化
外边距属性
margin-top|right|bottom|left: 长度值|百分比|auto(水平居中)
外边距属性缩写：
margin : 值1； /*四个方向都为值1*/
margin : 值1 值2； /*上下=值1，左右=值2*/
margin : 值1 值2 值3； /*上=值1，左右=值2，下=值3*/
margin : 值1 值2 值3 值4； /*上=值1，右=值2，下=值3，左=值4*/
注意：
- 默认情况下，相应html块级元素存在外边距，可使用margin属性覆盖默认样 式。
- 垂直方向，两个相邻元素都设置外边框，外边框会发生合并，合并后外边框 高度等于两个发生合并外边框的高度总中最大值。
- 当margin值为auto，实现水平居中，由浏览器计算外边距。
盒子模型计算
盒子在页面中所占的高度是由上边距+上边框+上填充（内边距）+内容高度+下填充（内边距）+下边框+下边距组成
IE盒子模型：
如果没有Doctype文档类型声明，各浏览器按照自己的方式解析
如果有Doctype文档类型声明，按照标准盒子模型来解析
