css盒子模型

盒子模型简而言之就是CSS用来管理和布局页面上每一个元素的一种机制。

CSS 盒模型本质上是一个盒子，就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器，所有HTML元素可以看作盒子，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

具体说明如图所示： 

基本属性 

宽高

每个盒子都需要一个宽高数值，如果不给的话你会发现这个盒子并不会显示出来。添加宽高的属性名称是width height。宽高值的单位有以下常用的：

1.像素（px）：像素是最常用的单位，表示屏幕上的一个像素点。它是固定的，具有确定的大小。

2.百分比（%）：百分比单位相对于父元素的尺寸进行计算。

背景颜色

颜色名称：可以使用预定义的颜色名称来表示颜色

有个特殊的

首先先看一下RGB表示法

RGB表示法：RGB表示红、绿、蓝三种颜色的组合值。

可以使用十进制或十六进制表示

        十进制表示法：background-color: rgb(255, 0, 0);

        十六进制表示法：background-color: #FF0000;

背景属性

background-size是CSS背景属性中的一项，用于设置背景图像的大小。它之后可以添加很多属性的值，比如：

auto
cover
contain
length
percentage

 边框

none: 无边框样式

solid: 实线边框样式

dashed: 虚线边框样式

dotted: 点线边框样式

double: 双线边框样式