盒模型

box：盒子，每个元素在页面中都会生成一个矩形区域

盒子类型

1.行盒，display等于incline的元素

行盒在页面中不换行

display默认值为incline

2.块盒，display等于block的元素

块盒独占一行
浏览器默认样式表设置的块盒：容器元素，h1~h6，p

常见的行盒：span，a，img，video，audio

盒子的组成部分

从内到外分别是

1.内容 content

width，height，设置的是盒子内容的宽高

内容部分通常叫做整个盒子的 内容盒 content-box

可以想象为一台手机

2.填充（内边距） padding

盒子边框到盒子内容的距离

padding-left padding-right padding-top padding-bottom

可以简写为padding属性，依次填入上右下左的距离

可以想象为包裹着手机的泡泡纸

填充区+内容区 = 填充盒

3.边框 border

边框=边框样式+边框宽度+边框颜色
        border-style
                      border-width
                                       border-color

速写（简写）属性：border-width最终展开上下左右border-top-width…等等

可以简写修改这三种属性：border：宽度 样式 颜色;

可以想象成泡泡纸的盒子

边框+填充区+内容区=边框盒 border-box

4.外边距 margin

边框到其他盒子的距离

margin-left…简写属性可以简单写完，跟上面那样