1.什么是盒子模型

盒子模型就是把HTML元素看作是一个矩形的盒子，也就是用来存储其它元素的容器。

每个矩形盒子由元素内容，内填充(padding)，外边距(margin)和边框 (border)组成。

2.边框

设置四个边框的样式，颜色，粗细
属性 描述 备注
border-style 边框样式 solid|dashed|dotted|duble
border-color 边框颜色
border-width 边框宽度

border-top(bottom|left|right)-style
border-top(bottom|left|right)-color
border-top(bottom|left|right)-width

border:red dashed 1px 复合属性
borer-top:
border-bottom:
border-left:
border-right

3.外边距margin

外边距会在元素创建“空白”，这段空白通常不能放置其它内容

属性 描述
margin-top 上边距
margin-bottom 下边距
margin-left 左边距
margin-right 右边距
margin 四种值

注：
（1）上下外边距不是取二者的和，而是取最大值
（2）设置好宽度，设置margin-left 和margin-right为auto，即可将盒子水平居中
（3）设置子元素的margin-top会产生外边距塌陷问题
解决方案一：设置父元素的overflow:hidden
解决方案二：设置父元素的内填充来代替子元素的外边距

4.内填充padding

设置内容到达盒子边框的填充距离
属性 描述
padding-top 上填充
padding-bottom 下填充
padding-left 左填充
padding-right 右填充
padding 四种值

注：
（1）设置了内填充和边框后，默认的盒子尺寸被撑大
此时的宽度和高度实际上只包含内容的尺寸，真实的盒子尺寸需要加上内填充和边框
可以通过设置box-sizing属性值 改变盒子尺寸计算规则

box-sizing content-box(默认）
border-box(此时设置的宽度和高度包含内填充和边框，重新计算实际的内容尺寸）

二、盒子类型

1.块级盒子
div ,table,p

2.行内盒子
设置宽和高无效
a,span

3.行内块盒子
同行内盒子可以设置宽度和高度

三、display属性

属性值 描述
inline 元素显示为行内盒子
block 元素显示为块级盒子
inline-block 元素显示为行内块盒子
none 元素不会显示

四、溢出

当盒子的尺寸使用绝对时，如果内容超出了设置的大小，此时内容就会溢出盒子。

使用overflow属性控制溢出时的样式
属性值 描述
visible(默认） 内容不会被修剪，会呈现在元素框之外
hidden 溢出的内容会被修剪，并且其余内容是不可见的
scroll 溢出的内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
auto 如果内容被修剪，则浏览器会显示滚动条