理解盒模型

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

盒子的组成
- margin：外边距（与其他的盒子的距离）
- border：边距
- padding：内边距（边框与内容之间的距离）
- cotent：内容（内容的宽度与高度）
margin
表示边框和相邻盒子的距离分为上（top）右（right）下（bottom）左（left）四个方向
>
> div{
>            margin-top :  10px ;
>      }
margin-top   上外边距 /  不可继承  /  默认值：0px


- margin有1个数值：上下左右
- margin有2个数值：上下 / 左右
- margin有3个数值：上 / 左右 / 下
- margin有4个数值：上 / 右 / 左 / 下

border 边框
分割内部和外部的界限，上（top）右（right）下（bottom）左（left）。
- 上边框的样式
> border-top-style
> 不可继承 ；默认none 
> solid  实线 / dashed   虚线  /  dotted  点阵 / double 双实线

- 上边框的厚度
> border-top-width
> 默认值 medium  /  一般用px ；em

- 上边框的颜色
> border-top-color
缩写 ：border-top  (厚度 样式 颜色)
padding

表示边框和内容盒子的距离分为上（top）右（right）下（bottom）左（left）四个方向
>
> div{
>           padding-top :  10px ;
>      }
padding-top   上外边距 /  不可继承  /  默认值：0px


- padding有1个数值：上下左右
- padding有2个数值：上下 / 左右
- padding有3个数值：上 / 左右 / 下
- padding有4个数值：上 / 右 / 左 / 下
content
width
height
子盒子
边框盒 border-box 由border，padding，content 组成
1. 浏览器调试时，页面中显示的页面尺寸
2. 元素的背景，默认覆盖边框盒（元素的背景色，从边框盒开始渲染）
3. background-clip 设置背景色的渲染区域

填充盒子 由padding ，content 组成
1. 溢出overflow 指填充盒的溢出

内容盒子 由content组成
outline 不占像素，但无样式。

理解盒模型

原文：https://www.cnblogs.com/1301774939-/p/9503023.html