盒模型

盒子的分类

不同的元素产生的盒子类型可能不同。一个元素，产生什么样的盒子取决于它的display。
属性：display
是否能继承：否
默认值：inline

display: none 不生成盒子
display: block 块盒
display: inline 行盒

盒模型的组成部分

margin：外边距，与其他盒子之间的距离。
border：边框
padding：内边距，边框与内容之间的距离。
content：内容

content

可以设置尺寸width宽度、height高度
min-width/height 最小宽度/高度
max-width/height 最大宽度/高度
注：设置最小值/最大值就无固定值

border

方向：top（上）、bottom（下）、left（左）、right（右）
border-方向-color 设置某一个方向的边框颜色
border-方向-width 设置某个方向的边框粗细
border-方向-style 设置某一个方向的边框样式
style取值：solid实线、dotted点线 、dashed 虚线 、double双实线
简写：border: 边框粗细 样式 样色

padding/margin

设置内边距/外边距
只给1个值：设置的是4个方向的值
只给2个值：上下、左右
只给3个值：上、左右、下
只给4个值：上、右、下、左

内容盒子：包含content
填充盒子：包含content、padding
边框盒子：包含content、padding、border

background-clip：规定背景的绘制区域
取值：border-box 背景被剪裁剪到边框盒
padding-box 背景被剪裁剪到填充盒
content-box 背景被剪裁剪到内容盒

改变盒子的计算规则
width值的范围（width:100px）
content-box 取值表示内容区域是100px
border-box 取值表示边框盒区域是100px
box-sizing: content-box（默认值）
注：IE浏览器的默认值是border-box