前端CSS基础—盒模型

盒子模型的重要性

盒子模型是CSS中最重要的知识点之一，它是一个非常重要的知识点，如果没有理解好盒子模型的概念，那么在以后的网页设计开发中没有办法布局出一个优美的网页，它是你接下来学习布局的基础。

什么是盒模型

盒模型是CSS中的一个概念,每个元素在页面中都会生成一个矩形的空间，这个矩形的空间就叫做盒子。盒子可以分为两种：一种是行盒，一种是块盒。

• 行盒：display属性为inline的元素。
• 块盒：display属性为block的元素。

行盒在页面显示中不换行，类似于行级元素（span、a、img、video、audio等）
块盒在页面显示中独占一行，类似于块级元素（div、h1~h6、p等）

盒子的组成部分

1.内容

• content部分为盒子的内容部分，它的属性有width、height，用于定义内容部分的宽高。
  width：10px;
height：10px;
• 只包含content部分的叫做盒子的内容盒：ontent-box

2.内边距

• padding为内边距，表示内容部分离边框的距离，它有四个属性：padding-left(左边距)、padding-right(右边距)、padding-top(上边距)、padding-bottom(下边距)，也可以简写成：padding
  padding-top:10px;
padding-right:10px;
padding-bottom:10px;
padding-left:10px;
  等于