css外边距合并（塌陷）问题解决方法、css盒模型概述

Czyqyf

于 2023-08-09 20:24:53 发布

阅读量431

点赞数 2

文章标签： css 前端面试

本文链接：https://blog.csdn.net/Czyqyf/article/details/132196526

版权

文章目录

一、盒子模型

一、盒子模型

1 盒模型概述

所有 HTML 元素都可以视为方框。在 CSS 中，在谈论设计和布局时，会使用术语“盒模型”或“框模型”。 CSS 盒模型实质上是一个包围每个 HTML 元素的盒子。它包括：外边距、边框、内边距以及实际的内容。下图展示了盒模型：

在这里插入图片描述

对不同部分的说明：

内容 - 盒的内容，其中显示文本和图像。
内边距 - 清除内容周围的区域。内边距是透明的，可以呈现元素的背景。
边框 - 围绕内边距和内容的边框。外边距 - 清除边界外的区域。
外边距是透明的，不会遮挡其后的任何元素。

盒模型允许我们在元素周围添加边框，并定义元素之间的空间。

背景应用于由内容和内边距、边框组成的区域。

内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置：

清除元素的默认内外边距：

* {
 	margin: 0;
 	padding: 0;
  }

在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

假设盒的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素，请看下图：

在这里插入图片描述

#box {
 width: 70px;
 margin: 10px;
 padding: 5px;
 }

内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。

外边距可以是负值，而且在很多情况下都要使用负值的外边距。

实例：

div {
 width: 300px;
 border: 15px solid green;
 padding: 50px;
 margin: 20px;
 }

效果：

在这里插入图片描述

2 宽度和高度

height 和 width 属性用于设置元素的高度和宽度。

height 和 width 属性不包括内边距、边框或外边距。它设置的是元素内边距、边框以及外边距内的区域的高度或宽度。

height 和 width 属性可设置如下值：

auto - 浏览器计算高度和宽度（默认）
length - 以 px、cm 等定义高度/宽度
% - 以包含块的百分比定义高度/宽度

实例：

div {
            height: 100px;
            width: 500px;
            background-color: powderblue;
        }

效果：

在这里插入图片描述

请记住， height 和 width 属性不包括内边距、边框或外边距！它们设置的是元素的内边距、边框和外边距内的区域的高度/宽度！

3 内边距

padding 属性用于在任何定义的边界内的元素内容周围生成空间。

通过 CSS，你可以完全控制内边距（填充）。有一些属性可以为元素的每一侧（上、右、下和左侧）设置内边距。

CSS 拥有用于为元素的每一侧指定内边距的属性

padding-top
padding-right
padding-bottom
padding-left

所有内边距属性都可以设置以下值：

length - 以 px、pt、cm 等单位指定内边距

% - 指定以包含元素宽度的百分比计的内边距

不允许负值。

实例：

  span {
            padding-top: 80px;
            padding-right: 10px;
            padding-bottom: 20px;
            padding-left: 40px;
            background-color: red;
            color: white;
        }

效果：

在这里插入图片描述

为了缩减代码，可以在一个属性中指定多个内边距属性。

padding: 25px 50px 75px 100px; ：上内边距是 25px；右内边距是 50px；下内边距是75px；左内边距是100px。
padding: 25px 50px 75px; ：上内边距是 25px；右和左内边距是 50px；下内边距是75px。
padding: 25px 50px; ：上和下内边距是 25px；右和左内边距是 50px。
padding: 25px; ：四个内边距都是 25px。

如果元素拥有指定的宽度，则添加到该元素的内边距会添加到元素的总宽度中。

若要将宽度保持为设定值，无论填充量如何，那么你可以使用果增加内边距，则可用的内容空间会减少

标准盒模型图：

在这里插入图片描述

从上图可以看出，w3c盒子模型的范围包括margin、border、padding、content，并且content部分不包含其他部分。

IE盒模型图：

在这里插入图片描述

从上图可以看出，IE盒子模型的范围包括margin、border、padding、content,和w3c盒子模型不同的是，IE盒子模型的 content部分包含了padding和border.

css3的box-sizing属性给了开发者选择盒模型解析方式的权利。W3C的盒模型方式被称为“content-box”，IE的被称为“border box”，使用box-sizing: border-box;就是为了在设置有padding值和border值的时候不把宽度撑开。

4 边框

border属性允许你指定元素边框的样式、宽度和颜色

在这里插入图片描述

4.1 边框类型

border-style 属性指定要显示的边框类型。

实例：

 <style>
        body {
            padding: 50px;
        }

        div {
            margin: 20px;
            width: 300px;
            padding: 10px;
        }

        .box {
            border: 3px dotted black;
        }

        .box1 {
            border: 3px dashed black;
        }

        .box2 {
            border: 3px solid black;
        }

        .box3 {
            border: 3px double black;
        }

        .box4 {
            border: 3px none black;
        }

        .box5 {
            border-style: dotted dashed solid double;
        }
    </style>
</head>

<body>
    <div class="box">点状边框</div>
    <div class="box1">虚线边框</div>
    <div class="box2">实线边框</div>
    <div class="box3">双线边框</div>
    <div class="box4">无边框</div>
    <div class="box5">混合边框</div>

</body>

效果：

在这里插入图片描述

4.2 边框宽度

border-width 属性指定四个边框的宽度。

可以将宽度设置为特定大小（以 px、pt、cm、em 计），也可以使用以下三个预定义值之一：thin、medium 或 thick 。

4.3 边框颜色

border-color 属性用于设置四个边框的颜色。

可以通过以下方式设置颜色：

name - 指定颜色名，比如 “red”
HEX - 指定十六进制值，比如 “#ff0000”
RGB - 指定 RGB 值，比如 “rgb(255,0,0)”
HSL - 指定 HSL 值，比如 “hsl(0, 100%, 50%)”
transparent（透明色）

5 外边距

margin 属性用于在任何定义的边框之外，为元素周围创建空间。

CSS 拥有用于为元素的每一侧指定外边距的属性：

margin-top
margin-right
margin-bottom
margin-left

所有外边距属性都可以设置以下值：

auto - 浏览器来计算外边距
length - 以 px、pt、cm 等单位指定外边距
% - 指定以包含元素宽度的百分比计的外边距

允许负值。

p {
 color: white;
 background-color: red;
 display: inline-block;
 margin-top: 100px;
 margin-bottom: 50px;
 margin-right: 150px;
 margin-left: 80px;
 }

效果：

在这里插入图片描述

为了缩减代码，可以在一个属性中指定多个外边距属性。

margin: 25px 50px 75px 100px; ：上外边距是 25px；右外边距是 50px；下外边距是 75px；左外边距是 100px。
margin: 25px 50px 75px; ：上外边距是 25px；右和左外边距是 50px；下外边距是 75px。
margin: 25px 50px; ：上和下外边距是25px；右和左外边距是 50px。
margin: 25px; ：四个外边距都是 25px。

你可以将 margin 属性设置为 auto，以使元素在其容器中水平居中。

然后，该元素将占据指定的宽度，并且剩余空间将在左右边界之间平均分配。

★6 外边距合并（塌陷）概念及解决方案（重点）

外边距合并（叠加）是一个相当简单的概念。

但是，在实践中对网页进行布局时，它会造成许多混淆。简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

第一种合并（兄弟元素上下排列合并）

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图：

在这里插入图片描述

外边距合并初看上去可能有点奇怪，但是实际上，它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。

在这里插入图片描述

注意：只有普通文档流中块元素的垂直外边距才会发生外边距合并。行内元素、浮动元素或绝对定位之间的外边距不会合并。

代码效果：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            padding: 100px;
        }

        div {
            width: 150px;
            height: 150px;
        }

        .box {
            margin-bottom: 50px;
            background-color: red;
        }

        .box1 {
            margin-top: 60px;
            background-color: yellowgreen;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <div class="box1"></div>
</body>

在代码中给盒子定义相同的宽度和高度，之后给第一个盒子 box定义了一个50px（px：像素）下外边距，给第二个盒子 .box1 定义了一个60px的上外边距。正常情况下两个元素的距离应该为两个距离之和110px，但是因为外边距合并，合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者，所有两个元素的距离是60px。

在这里插入图片描述

兄弟元素塌陷解决方法：

第一种方法：通过display: inline-block;

 /* 第一种解决放法：将块级元素转换为行内块元素 
         将其中任意一个div进行转换就可以解决塌陷问题*/
        .box {
            display: inline-block;
        }

第二种方法：

通过overflow：hidden； overflow：hidden除了清除浮动还有溢出隐藏的作用。

 /* 第二种方法 给任意一个div添加父容器 给父容器添加overflow：hidden*/
        .father {
            overflow: hidden;
        }
        
        
        
        <div class="father">
        <div class="box"></div>
    	</div>
    	<div class="box1"></div>

第三种解决方法：

给其中一个子元素添加父元素并且给父元素添加内边距（padding）可以解决塌陷

		/* 第三种放法：给父元素添加内边距 */
		.father {
            padding: 1px;
        }

第四种解决方法：

给父元素添加边框

 /* 第四种解决方法：给父元素加边框 */
        .father {
            border: 1px solid black;
        }

第五种解决方法：浮动

建议：在真正页面布局中浮动元素尽可能都使用父元素包裹，并清除浮动，可以更好后期维护

 /* 第五种解决方法：浮动 */
        /* 浮动的第一种使用方法：给子元素浮动，父元素清除浮动 */
        .father {
            overflow: hidden;
        }

        .box {

            float: left;
        }
        /* 第二种使用方法，在元素布局很少的情况下可以给最下面的盒子box1浮动，脱离文档流即可 */
        .box1 {
            float: left;
        }

第六种方法：定位

第六种方法和第五种方法类同：主要原理都是使其脱离文档流。position里面只有absolute绝对定位和fixed固定定位可以使其脱离文档流。

 /* 第六种解决方法：定位 */
        .box1 {
            positionposi: absolute;
        }

最终效果如下：
在这里插入图片描述

第二种合并为父子包含关系合并

在这里插入图片描述

当父元素和子元素都有相同的上下外边距就会出现外边距塌陷，会取其中最大值

当父元素设置50px的上外边距子元素设置60px上外边距，正常情况下应该是父元素距离上面30px，子元素距离父元素50px，实际上会取到子元素60px的上边距

代码如下：

 css样式:
 		.father {
            width: 500px;
            height: 400px;
            background-color: aquamarine;
            margin-top: 50px;
        }

        .son {
            width: 300px;
            height: 200px;
            background-color: blue;
            margin-top: 60px;
        }
        
 html代码:
        <div class="father">
        <div class="son"></div>
       </div>

效果图如下：

在这里插入图片描述

解决方法有

满足以下条件就会产生外边距塌陷现象：

子元素在父元素里面
子元素中有margin-top或者margin-bottom值

解决方案：

第一种：给父元素增加内边距padding值

第二种方式：父元素增加边框border值

第三种方式：父元素增加overflow：hidden

第四种方式：给父元素或者子元素增加浮动，让其脱离标准流都可以

第五种：将父元素转变为行内块元素，display：inline-block

第六种：给父元素或者子元素定位都可以，原理同样是使其脱离标准流，不过只能用绝对定位和固定定位

第七种：给父盒子增加flex或者inline-flex

列举两种解决方法（其他方法和兄弟关系解决方法类同）：

给父元素添加边框

  .father {
            width: 500px;
            height: 400px;
            background-color: aquamarine;
            margin-top: 50px;
            border: 1px solid black;
        }

给父元素转化为行内块元素

 .father {
            width: 500px;
            height: 400px;
            background-color: aquamarine;
            margin-top: 50px;
            display: inline-block;
        }

效果如下：

在这里插入图片描述

Czyqyf

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css外边距合并（塌陷）问题解决方法、css盒模型概述

所有 HTML 元素都可以视为方框。在 CSS 中，在谈论设计和布局时，会使用术语“盒模型”或“框模型”。CSS 盒模型实质上是一个包围每个 HTML 元素的盒子。它包括：外边距、边框、内边距以及实际的内容。下图展示了盒模型：内容 - 盒的内容，其中显示文本和图像。内边距 - 清除内容周围的区域。内边距是透明的，可以呈现元素的背景。边框 - 围绕内边距和内容的边框。外边距 - 清除边界外的区域。外边距是透明的，不会遮挡其后的任何元素。盒模型允许我们在元素周围添加边框，并定义元素之间的空间。
复制链接

扫一扫