css盒模型简述

一、理解盒模型
盒模型 简单来说就是一个装东西的容器，而我们的页面就是是由一个一个地盒子组合在一起的，通过定义一系列与盒子相关的属性，从而实现我们想要的页面效果。
二、盒模型的组成

每个盒子都可以看成由四个部分组成：内容区（图中的300×300区域）、padding（内填充）、border（边框）、margin（外边距）。
1.内容区：用来存放一些信息，如文字或者图片等，可以用width（宽度）和height（高度）属性控制存放内容区域的大小，如果内容比内容区更大，内容会超出内容区，这就是我们说的溢出，解决溢出可以添加溢出属性（overflow），有如下属性值;

2.内填充（padding）：指的就是内容区和边框之间的空间。如果设置padding值，会把原来的盒子撑大，如果想要保持盒子的大小，我们需要在宽高的基础上减去相应的padding，padding是默认上下左右都添加，也可以设置单一方向上的padding值——padding-left（左侧添加padding）、padding-right（右侧）、padding-top（上边）、padding-bottom（下边）；设置了单一方向的padding只需要减去该方位的宽或高。

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200222203513987.png
使文本距离边缘有一定的距离
3.边框（border）：是在元素宽高之外的，
写法：

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200224092241871.png

也可单独设置属性：border-width：（边框大小）
border-color：（边框颜色）
border-style：（边框类型）
在单一方向上设置边框：border-left/right/top/bottom(方位值)
4.外边距（padding）：是长在盒子外面的，控制同级盒子之间的距离，不会改变盒子大小，且同级元素上下之间的margin值不会叠加，会重合，会按照最大值设置。单一方向设置margin与padding相同。
三、盒子在页面中实际所占大小：
宽=内容的宽+padding×2+border×2+margin×2
高=内容的高+padding×2+border×2+margin×2
（乘2是因为上下左右都添加了值）