CSS盒子模型(如果想知道CSS有关盒子模型的知识点,那么只看这一篇就足够了!)

简介: CSS盒子模型(如果想知道CSS有关盒子模型的知识点,那么只看这一篇就足够了!)

CSS 盒子模型(Box Model)

       盒子模型的简介:

所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子,封装周围的HTML元素,盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

大致了解了盒子模型的基本概念之后,让我们看一下盒子模型的基本组成:

盒子模型由一下四部分组成:

组成部分(图片):

对于盒子的总大小:盒子的大小 = content + 左右 padding + 左右 border

而对于外边距margin,其不会影响盒子的大小,但会影响盒子的位置。

当我们想要查看一个元素的盒子模型,我们可以使用一下的操作:

右击想要查看的元素:

在开发者工具中:

这样我们就可以看到html中指定元素的盒子模型,这对我们之后对于网页的排版由重大的作用。

在了解了盒子模型的基本概念和盒子模型的基本概念之后,让我们深入讲解盒子模型的各个组成部分。

       (1)content区

content区的主要作用为:用于显示文本和图像,即元素中的内容。

在盒子模型中的位置:

content区可设置的属性:

CSS属性名 功能 属性值
width 设置内容区域宽度 长度
max-width 设置内容区域的最大宽度 长度
min-width 设置内容区域的最小宽度 长度
height 设置内容区域的高度 长度
max-height 设置内容区域的最大高度 长度
min-height 设置内容区域的最小高度 长度

先对width和height属性进行讲解:

例:

html代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./2024.4.27.css">
</head>
<body>
    <div>这是一段文字</div>
</body>
</html>

CSS代码:

/* 对div元素设置其content区的宽高 */
div {
    width: 500px;
    height: 300px;
    background-color: orange;
}

这样我们就了解了如何对内容区(content)设置其宽与高。

对于max-width和min-width(max-height和min-height同理),为如果视口(用户在网页上的可见区域)小于min-width设置的值,视口就会出现滑动条(如图):

而max-width用于设定元素的最大宽度:

CSS代码:

/* 对div元素设置其content区的最大宽度 */
div {
    max-width: 900px;
    height: 300px;
    background-color: orange;
}

不够就以视口大小为准:

足够就以设定最大值为准:

这样我们就了解了content区的常见属性。

注意:

       max-width 、min-width 一般不与 width 一起使用。

       max-height 、min-height 一般不与 height 一起使用。

补充:

1. 总宽度 = 父的content — 自身的左右margin 。
2. 内容区的宽度 = 父的content — 自身的左右margin — 自身的左右border — 自身的左右padding 。

       (2)padding区

padding区的主要作用为:清除内容周围的区域,并且内边距是透明的。

在盒子模型中的位置:

当我们设置了html中的元素的padding值之后:

CSS代码:(以上面的案例为例)

/* 对div元素设置其content区的宽高和padding区的大小 */
div {
    width: 900px;
    height: 300px;
    padding: 10px;
    background-color: orange;
}

当然padding区也有其相关的属性:

CSS 属性名 功能 属性值
padding-top 设置上内边距 长度
padding-right 设置右内边距 长度
padding-bottom 设置下内边距 长度
padding-left 设置左内边距 长度
padding 复合属性 长度,可以设置 1 ~ 4 个值

在上面的案例中我们就是使用了padding的复合属性设置了一圈的padding值(都设置为10px)

而padding 复合属性的使用规则:

1. padding: 10px; 四个方向内边距都是 10px 。
2. padding: 10px 20px; 上10px ,左右20px 。(上下、左右)
3. padding: 10px 20px 30px; 上10px ,左右20px ,下30px 。(上、左右、下)
4. padding: 10px 20px 30px 40px; 上10px ,右20px ,下30px ,左40px 。(上、右、下、左)

注意点:

1. padding 的值不能为负数。
2. 行内元素 的 左右内边距是没问题的,上下内边距不能完美的设置。
3. 块级元素、行内块元素,四个方向内边距都可以完美设置。

这样我们就大致了解了盒子模型中padding的设置与作用。

       (3)border区

border区的主要作用为:设置围绕在内边距和内容外的边框。

在盒子模型中的位置:

其实该属性在------------------------------------------------------------------------------------------------------------->CSS常用属性之(列表、表格、鼠标)属性,(如果想知道CSS的列表、表格、鼠标相关的属性知识点,那么只看这一篇就足够了!)-CSDN博客

中的表格属性其他元素也可以使用的表格属性中已经详细讲解过,这里只是迅速过一下:

CSS属性名 功能 属性值
border-style 设置边框线风格 none : 默认值
solid : 实线
dashed : 虚线
dotted : 点线
double : 双实线
......
border-width 设置边框线宽度 长度
border-color 设置边框线颜色 颜色,默认黑色
border 复合属性 值没有顺序和数量要求。
border-left
border-left-style
border-left-width
border-left-color
border-right
border-right-style
border-right-width
border-right-color
border-top
border-top-style
border-top-width
border-top-color
border-bottom
border-bottom-style
border-bottom-width
border-bottom-color
分别设置各个方向的边框 值没有顺序和数量要求。

补充:border-style 、border-width 、border-color 其实也是复合属性。

       (4)margin区

border区的主要作用为:用于清除边框外的区域,外边距是透明的。

在盒子模型中的位置:

margin的相关属性和padding类似,只不过margin是设置在border之外,而padding设置的为border之内。

margin的相关属性:

CSS属性名 功能 属性值
margin-left 左外边距 CSS 中的长度值
margin-right 右外边距 CSS 中的长度值
margin-top 上外边距 CSS 中的长度值
margin-bottom 下外边距 CSS 中的长度值
margin 复合属性,可以写1~4 个值,规律同padding (顺时针) CSS 中的长度值

margin 注意事项:

       1. 子元素的margin ,是参考父元素的content 计算的。(因为是父亲的content 中承装着子元素)
       2. 上margin 、左margin :影响自己的位置;下margin 、右margin :影响后面兄弟元素的位置。
       3. 块级元素、行内块元素,均可以完美地设置四个方向的margin ;但行内元素,左右margin 可以完美设置,上下margin 设置无效。
       4. margin 的值也可以是 auto ,如果给一个块级元素设置左右margin 都为 auto ,该块级元素会在父元素中水平居中。
       5. margin 的值可以是负值。

在了解完margin之后,我们需要了解有关margin的两个特性:margin 塌陷和 margin 合并

       【1】margin 塌陷

那么什么是margin塌陷呢?

即第一个子元素的上margin 会作用在父元素上,最后一个子元素的下margin 会作用在父元素上。

例如:(没有设置margin之前)

html代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./2024.4.27.css">
</head>
<body>
    <div class="outer">
        <div class="inner">这是内部的div元素</div>
    </div>
</body>
</html>

CSS代码:

.outer {
    width: 500px;
    height: 400px;
    background-color: orange;
}
.inner {
    width: 200px;
    height: 100px;
    background-color: green;
}

给内部元素设置margin-top属性:

CSS代码:

.outer {
    width: 500px;
    height: 400px;
    background-color: orange;
}
.inner {
    margin-top: 30px;
    width: 200px;
    height: 100px;
    background-color: green;
}

我们会发现,margin-top没有加到inner元素上,而是加到了outer元素(即其父元素)上,这就是margin塌陷,margin-bottom同理。

那么如何解决呢?

解决方案:

方案一: 给父元素设置不为 0 的padding 。
方案二: 给父元素设置宽度不为 0 的border 。
方案三:给父元素设置 css 样式 overflow:hidden

了解了margin塌陷之后我们在来讲解margin 合并。

       【2】margin 合并

什么是 margin 合并?

上面兄弟元素的下外边距和下面兄弟元素的上外边距会合并,取一个最大的值,而不是相加。

例如:(没有设置margin-top和margin-bottom之前)

html代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./2024.4.27.css">
</head>
<body>
    <div class="outer">
        <div class="inner1">这是内部的div元素</div>
        <div class="inner2">这是内部的div元素</div>
    </div>
</body>
</html>

CSS代码:

.outer {
    width: 500px;
    height: 400px;
    background-color: orange;
}
.inner1 {
    width: 200px;
    height: 100px;
    background-color: green;
}
.inner2 {
    width: 200px;
    height: 100px;
    background-color: red;
}

给内部元素设置margin-top和margin-botton属性之后:

CSS代码:

.outer {
    width: 500px;
    height: 400px;
    background-color: orange;
}
.inner1 {
    width: 200px;
    height: 100px;
    margin-bottom: 20px;
    background-color: green;
}
.inner2 {
    width: 200px;
    height: 100px;
    margin-top: 20px;
    background-color: red;
}

原本应该为40px,但是实际上就只有20px,这就是margin 合并。

那么如何解决 margin 塌陷问题呢?

无需解决,布局的时候上下的兄弟元素,只给一个设置上下外边距就可以了,一下就给40px即可。

这样盒子模型的大致内容我们就都了解完了!

相关文章
|
23天前
|
前端开发 编译器
CSS定位(如果想知道CSS有关定位的知识点,那么只看这一篇就足够了!)
CSS定位(如果想知道CSS有关定位的知识点,那么只看这一篇就足够了!)
|
23天前
|
前端开发 容器
CSS3 新增背景属性 + 新增边框属性(如果想知道CSS3新增背景属性和新增边框属性的知识点,那么只看这一篇就够了!)
CSS3 新增背景属性 + 新增边框属性(如果想知道CSS3新增背景属性和新增边框属性的知识点,那么只看这一篇就够了!)
|
23天前
|
Web App开发 前端开发 编译器
CSS3私有前缀+新增盒模型相关属性(如果想知道CSS3私有前缀、新增盒模型相关属性的知识点,那么只看这一篇就足够了!)
CSS3私有前缀+新增盒模型相关属性(如果想知道CSS3私有前缀、新增盒模型相关属性的知识点,那么只看这一篇就足够了!)
|
23天前
|
前端开发 容器
CSS3新增文本属性(如果想知道CSS3新增文本属性的知识点,那么只看这一篇就够了!)
CSS3新增文本属性(如果想知道CSS3新增文本属性的知识点,那么只看这一篇就够了!)
|
13天前
|
前端开发
CSS:盒子模型
CSS:盒子模型
|
17天前
|
前端开发 JavaScript 开发者
详细解读CSS——盒子模型(含详解)
详细解读CSS——盒子模型(含详解)
|
19天前
|
移动开发 前端开发 HTML5
CSS 盒子模型(溢出显示、伪元素)
CSS 盒子模型(溢出显示、伪元素)
|
19天前
|
Web App开发 移动开发 前端开发
CSS 盒子模型(显示模式、盒子模型)
CSS 盒子模型(显示模式、盒子模型)
|
19天前
|
移动开发 前端开发 HTML5
CSS3 盒子模型
CSS3 盒子模型
|
7天前
|
前端开发 UED
使用HTML和CSS创建响应式表格
在网页设计中,表格是一种组织和展示数据的有效方式。本文档将指导你如何使用HTML和CSS来创建一个既美观又响应式的表格,以便在不同设备和屏幕尺寸上都能良好显示。我们将涵盖基础的HTML表格结构,样式美化以及如何实现响应式布局,使得表格内容在小屏设备上也能清晰阅读
48 0