CSS盒子模型（框模型）

曾经终败给现在 2021-11-01 10:44 451阅读 0赞

** 一、如何理解盒子模型**

** 盒子模型**（**框模型**）是css部分非常重要的一部分知识，CSS在处理网页的时候，认为每个元素都处在一个不可见的盒子中。盒子模型的构想，把所有的元素都想象成盒子，那么对网页进行布局的时候就可以理解为对盒子进行排列。至于要将相应的盒子摆放到网页相应的位置中即可完成页面布局。

CSS 盒子模型 (**Box Model**) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式

盒子模型包括**width宽度，height高度，border边框，padding内边距，margin外边距，content内容**这几个部分**。**

## 二、CSS 盒子模型概述 ##

![1748092-20190807105001638-30282304.png][]

**位置关系**

盒子模型最里面的部分是内容区域（content）；

直接包裹着内容的是内边距（padding）；

内边距的边缘是边框（border）；

边框之外是外边框（margin），外边框默认值默认值是透明的，因此不会遮挡其后内容。

![1748092-20190807121442429-1557493938.png][]

**三、盒子模型的组成**

**一个盒子的实际高度、宽度：content + padding + border + margin**

**盒子模型中可以设置的属性有：**

**1、width / ****height :**设置的是内容区的高度和宽度（只是内容区的大小，而不是整个盒子的大小。）

**2、[border边框:][border]**[详细内容点击链接转到有关border属性的博客][border]

**3、[padding内边距：][padding]**[详细内容点击链接转到有关padding属性的博客][padding]

**4、margin外边距：**详细内容点击链接转到有关margin属性的博客

**5、overflow属性：**

overflow属性规定的是当盒子里的内容溢出盒子框时，所显示的样式。共有三个属性值：

*  hidden     超出的部分不可见

![1748092-20190807124536932-1476500027.png][]![1748092-20190807124609396-1278305028.png][]

*  scroll    显示滚动条

![1748092-20190807124952038-1568340619.png][]![1748092-20190807125154182-1368897331.png][]

*  auto    自动，如果有超出的部分，显示滚动条。

![1748092-20190807125737261-1258976128.png][]![1748092-20190807125808804-1205097544.png][]

**上图是没超出盒子边框的显示效果，当里面内容超出盒子边框的时候**

**![1748092-20190807130216593-1334218648.png][]![1748092-20190807130231666-1349286474.png][]**

转载于:https://www.cnblogs.com/nyw1983/p/11311156.html

[1748092-20190807105001638-30282304.png]: /images/20211101/f07a52b8b3714d29be7fd7a3e8a45ff8.png
[1748092-20190807121442429-1557493938.png]: /images/20211101/c44d49a35b86463b97f04a2425b0a430.png
[border]: https://www.cnblogs.com/nyw1983/p/11317235.html
[padding]: https://www.cnblogs.com/nyw1983/p/11324237.html
[1748092-20190807124536932-1476500027.png]: https://img2018.cnblogs.com/blog/1748092/201908/1748092-20190807124536932-1476500027.png
[1748092-20190807124609396-1278305028.png]: /images/20211101/e5e904b19dab470d802cc66417d73f69.png
[1748092-20190807124952038-1568340619.png]: https://img2018.cnblogs.com/blog/1748092/201908/1748092-20190807124952038-1568340619.png
[1748092-20190807125154182-1368897331.png]: /images/20211101/05893d33a0824439be19349094a7ec5a.png
[1748092-20190807125737261-1258976128.png]: https://img2018.cnblogs.com/blog/1748092/201908/1748092-20190807125737261-1258976128.png
[1748092-20190807125808804-1205097544.png]: /images/20211101/21a1978719864687a6438a3fc7fa1b29.png
[1748092-20190807130216593-1334218648.png]: https://img2018.cnblogs.com/blog/1748092/201908/1748092-20190807130216593-1334218648.png
[1748092-20190807130231666-1349286474.png]: /images/20211101/ee807ebccce745e5a6582f9b99878bee.png