HTML+CSS＜盒模型＞

平台：VSCODE

版本：HTML5

盒模型：每一个元素在页面中都会生成一个矩形区域，称之为盒子（box）

【】盒模型的分类：

1. 行盒：display等于inline的元素。
2. 块盒：display等于block的元素。

**行盒不换行，块盒独占一行**

Display的默认值为inline

浏览器样式表中常见的行盒：span，a，img，video，audio

浏览器样式表中常见的块盒：容器元素，h1~h6，p

【】盒子的组成部分

无论是行盒还是块盒，都是由以下几部分，从内部到外部组成的：

1. 内容 content：

由width，height设置盒子的内容的宽和高，内容部分通常被称之为整个盒子的“内容盒<content-box>”

1. 填充padding：

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

由padding-left,padding-right,padding-top,padding-bottom来设置左、右、上、下的边距。

简写形式：padding:上下 左右  padding:上 下 左 右 padding:上下左右

**填充区+内容区 = 填充盒“padding-box”**

1. 边框 border：

边框 = 边框样式 + 边框宽度 + 边框颜色

1】边框样式：border-style

2】边框宽度：border-width

3】边框颜色：border-color

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

1. 外边框 margin：

边框到其他盒子的距离

由margin-top、margin-right、margin-left、margin-bottom来设置外边框的上、右、左和下。

简写形式：margin:上下 左右 margin:上下左右  margin:上 下 左 右（同padding的书写格式一致）