CSS盒子模型（盒子，清除浮动，解决外边距塌陷）

最新推荐文章于 2024-03-22 21:41:59 发布

⊱sun⊰

最新推荐文章于 2024-03-22 21:41:59 发布

阅读量197

点赞数 2

文章标签： css 前端

本文链接：https://blog.csdn.net/sun12345678_/article/details/132197689

版权

1、盒子模型

1.1盒模型概述

所有 HTML 元素都可以视为方框。在 CSS 中，在谈论设计和布局时，会使用术语“盒模型”或“框模型”。

CSS 盒模型实质上是一个包围每个 HTML 元素的盒子。它包括：外边距、边框、内边距以及实际的内容。下图展示了盒模型：

在这里插入图片描述

不同部分的说明：

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

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

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

* {
margin: 0;
padding: 0;
}

内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。外边距可以是负值，而且在很多情况下都要使用负值的外边距。

1.2、宽度和高度

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

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

height 和 width 属性可设置如下值：
auto - 浏览器计算高度和宽度（默认）
length - 以 px、cm 等定义高度/宽度
% - 以包含块的百分比定义高度/宽度

1.3内边距

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

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

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

padding-top （上边距）
padding-right （右边距）
padding-bottom （下边距）
padding-left（左边距）

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

length - 以 px、pt、cm 等单位指定内边距
% - 指定以包含元素宽度的百分比计的内边距

示例：

div.padding {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 10px;
padding-left: 80px;
color: white;
background-color: red;
}

效果：

在这里插入图片描述

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

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

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

若要将宽度保持为设定值，无论填充量如何，那么你可以使用 box-sizing: border-box; 属性。这将导致元素保持其宽度。如果增加内边距，则可用的内容空间会减少。

标准盒模型与IE盒模型的区别（重要）

标准盒模型图（w3c盒模型）：

在这里插入图片描述

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

IE盒模型图（怪异盒模型、CSS3盒模型）：

在这里插入图片描述

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

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

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .content{
            width: 640px;
            height: 274px;
            position: relative;
        }
        .content p{
            position: absolute;
            bottom: 0;
            left: 0;
            color: white;
            height: 30px;
            line-height: 30px;
            background-color: rgba(0, 0, 0, 0.3);
            width: 100%;
            margin: 0;
            padding-left:10px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="content">
        <img src="img/_20230721152414.jpg" alt="">
        <p>斗破苍穹第二季官宣</p>
    </div>
</body>
</html>

在这里插入图片描述

（想看样式效果的可以复制代码，注释掉 box-sizing: border-box；查看区别）

1.4边框

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

1.4.1边框类型

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

示例：

p{
border-style: dotted;
}
p{
border-style: dashed;
}
p{
border-style: solid;
}
p{
border-style: double;
}
p{
border-style: none;
}
p{
border-style: dotted dashed solid double;
}

效果：

在这里插入图片描述

1.4.2 边框宽度

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

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

border-width 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）

1.4.3 边框颜色

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

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

1.5 外边距

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

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

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

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

auto - 浏览器来计算外边距

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

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

允许负值

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

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，以使元素在其容器中水平居中。

1.6外边距合并

外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。

简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

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

在这里插入图片描述

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。请看下图：

在这里插入图片描述

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

1.7 BFC——块级格式化上下文

1.7.1 概念

直译为块级格式化上下文，把BFC理解成一块独立的渲染区域，BFC看成是元素的一种属性，当元素拥有了BFC属性后，这个元素就可以看做成隔离了的独立容器。容器内的元素不会影响容器外的元素。

简单理解为：将BFC看成是一种属性，当拥有该属性的元素就相当于一块独立的区域。

1.7.2 实现BFC属性的方法

浮动元素，float 除 none 以外的值
定位元素，position的值不是static或者relative。
display 为 inline-block 、table-cell、table-caption、table、table-row、table-row-group、table-header-group、tablefooter-group、inline-table、flow-root、flex或 inline-flex、grid或 inline-grid
overflow 除了 visible 以外的值（hidden，auto，scroll）
根元素就是一个 BFC

1.7.3 BFC的作用

1、避免外边距重叠（防止margin塌陷）

margin塌陷的意思：同时给两个div设置相同的属性，当设置margin为100px，那么两个div之间的间隙应该是marginbottom+margin-top=200px的外边距，但是没有设置BFC属性，块的上外边距和下外边距会合并为单个边距，取最大值，如果 margin相等，则仅为一个，这就是外边距重叠（margin塌陷）。

没有设置BFC时两个div之间的外边距

在这里插入图片描述

通过给其中一个div包裹一个父div，设置BFC属性，来解决margin塌陷的问题

<style>
/* 通过设置overflow:hidden属性，将父容器设置为BFC属性 */
.container {
overflow: hidden;
}
.cube {
width: 100px;
height: 100px;
background-color: blueviolet;
margin: 100px;
}
</style>
</head>
<body>
<!-- 外边距重叠 -->
<div class="container">
<div class="cube"></div>
</div>
<div class="cube"></div>
</body>

运行结果

在这里插入图片描述

2、用于清除浮动

当给一个父元素设置边框，内部元素会将父元素撑起来，但是如果内部元素设置了 float属性，则该父元素会失去支撑，从而没有高度。

设置了浮动属性的子元素，父元素失去支撑

在这里插入图片描述

通过给父元素设置BFC属性，来实现清除浮动

<style>
/* overflow: hidden;设置该属性，将父元素设置了BFC属性，即实现了清除浮动 */
.parent {
border: 10px solid darkorange;
overflow: hidden;
}
.child {
width: 100px;
height: 100px;
background-color: rgb(63, 190, 80);
float: left;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>

运行结果：

在这里插入图片描述

3、阻止元素被浮动元素覆盖

当前一个兄弟元素设置了浮动属性时，后一个兄弟元素会跑到前一个兄弟元素的位置去，从而后一个兄弟元素被覆盖。

第二个兄弟元素被覆盖的情况。

在这里插入图片描述

通过给被影响的兄弟元素设置BFC属性，来解决被覆盖的情况

<style>
.cube1 {
width: 100px;
height: 100px;
background-color: darkorange;
float: left;
}
/* 通过给被影响元素设置overflow: hidden;属性，将其设置BFC属性，实现阻止被浮动元素影响 */
.cube2 {
width: 200px;
height: 200px;
background-color: darkgrey;
overflow: hidden;
}
</style>
</head>
<body>
<div class="cube1"></div>
<div class="cube2"></div>
</body>