一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。

css盒子模型本质上是一个盒子，封装周围的html元素，它包括边框，外边距，内边距和实际内容

一.【width 和 height】宽度和高度

width 和 height设置内容框（content box）的宽度和高度。内容框是框内容显示的区域——包括框内的文本内容，以及表示嵌套子元素的其它框。

注意: 还有其他属性可以更巧妙地处理内容的大小——设置大小约束而不是绝对的大小。这些属性包括min-width、max-width、min-height 和 max-height

二.盒子模型边框border

1. border-width边框的粗细，一般情况下都用px作为单位
2. border-style 边框的样式，solid实线边框，dashed虚线边框 ,dotted点线边框
3. border-color边框的颜色 border: 5 dashed pink; 简写方式，属性没有固定顺序

分别设置边框上下左右的属性

1. border-top: 5 dotted blue;
2. border-bottom: 5 dashed green;
3. border-right同理
4. border-lift同理 border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框 语法： border-collapse:collapse;表示相邻边框合并在一起 collapse单词是合并的意思

三.盒子模型内边距

padding属性用于设置内边距，即边框与内容之间的距离

语法：

1. padding-top: 20px;

2.         padding-left: 20px;
   

3.         padding-right: 20px;
   

4.         padding-bottom：20px；
   

内边距复合写法

1.         padding: 5px;1个值，代表上下左右都是5像素的内边距
   

2.         padding: 5px 10px;2个值，代表上下内边距是5像素，左右内边距是10像素
   

3.         padding: 5px 10px 20px;代表上内边距是5像素，左右内边距10像素，下边距20像素
   

4.         padding: 5px 10px 20px 30px;代表上是5像素，右是10像素，下是20像素，左是30像素，按照顺时针的顺序
   

注意：当我们给盒子设置border和padding值之后，发生了两件事情：

1.     外边框增加了距离，内容和边框也增加了距离
   

2.     boeder和padding影响了盒子的实际大小
   

解决方案： 如果要保证盒子跟效果图一样，则让width/height减去边框大小和内边距大小1即可