CSS（牛客）

最新推荐文章于 2024-11-06 20:56:04 发布

O hh

最新推荐文章于 2024-11-06 20:56:04 发布

阅读量58

点赞数

分类专栏：前端文章标签： css html 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/qq_50863341/article/details/128797161

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS盒模型的概念，包括内容、内边距、边框和外边距的定义及作用。探讨了box-sizing属性如何解决传统盒模型在增加内边距和边框后盒子尺寸变化的问题，并解释了外边距折叠的现象及其应用场景。

摘要由CSDN通过智能技术生成

盒模型是CSS的核心概念，描述了元素如何显示，以及在一定程度上如何相互作用、相互影响。页面中的所有元素都被看作一个矩形盒子，这个盒子包含元素的内容、内边距、边框和外边距。
 内边距是内容周围的空间，当给元素填充背景时会作用到元素的内容区域和内边距区域。边框会在内边距外且紧挨着内边距。边框的外侧是外边距，外边距是围绕在盒子可见部分之外的透明区域，用于控制元素之间的距离。
 默认情况下，width和height是指盒子的内容区域的大小，如果此时给盒子添加内边距或边框，那么会导致整个盒子变大。现在给类名为"content-box"的盒子设置宽度、高度都为"80px"、内边距为"5px"、边框为"5px solid black"，此时可以打开调试工具查看该盒子的大小，会发现该盒子实际是一个长度为"100px"的正方形，并不是"80px"。

在CSS3中，通过box-sizing属性可以更改盒子尺寸的计算方式。将box-sizing设为content-box（默认值）时，表示使用传统的计算方式；设为border-box时，表示使用CSS 3的一种新的计算方式，通过这种方式可以解决传统盒子在添加了边框和内边距之后，盒子被撑大的问题。
/* 传统计算方式 */
box-sizing: content-box;
盒子的宽度 = CSS中设置的width + border + padding
/* 新的计算方式 */
box-sizing: border-box;
盒子的宽度 = CSS中设置的width

盒模型

盒模型

外边距折叠

常规块盒子有一种机制叫外边距折叠，即垂直方向上的两个外边距相遇时，会折叠成一个外边距，且折叠之后的外边距高度为两者之中较大的那一个。现在给类名为"top"、"bottom"两个盒子都设置宽度、高度且都为"100px"、都设置外边距且都为"10px"，可以添加任意颜色便于区分两个盒子。此时通过调试工具可以发现两个盒子之间的距离为"10px"，并不是"20px"，说明已经发生了外边距折叠。
外边距折叠好像很奇怪，实际上却很有用。当一个页面包含了多个段落，如果没有外边距折叠，从第二个段落开始，所有段落的间距都是最上方段落的上外边距的两倍，有了外边距折叠，段落间距才会相等。
如果想要清除两个盒子之间的外边距折叠，可以给目标盒子设置以下属性：
1. display: inline-block
2. float属性值不是"none"的元素
3. 绝对定位