CSS盒子模型（如果想知道CSS有关盒子模型的知识点，那么只看这一篇就足够了！）

        前言：在网页制作的时候，我们需要将网页中的元素放在指定的位置，那么我们如何将元素放到指定的位置上呢？这时候我们就需要了解盒子模型。

✨✨✨这里是秋刀鱼不做梦的BLOG

✨✨✨想要了解更多内容可以访问我的主页秋刀鱼不做梦-CSDN博客

先让我们了解一下本片文章的大致内容：

    

目录

CSS 盒子模型(Box Model)

        （1）content区

补充：

        （2）padding区

        （3）border区

        （4）margin区

        【1】margin 塌陷

        【2】margin 合并

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即可。

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

想了解更多CSS知识---------------->CSS_秋刀鱼不做梦的博客-CSDN博客

以上就是本篇文章的大致内容~~~

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/578331.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

sCrypt全新上线RUNES功能

sCrypt全新上线RUNES功能

sCrypt智能合约平台全新上线一键etch/mint RUNES功能&#xff01; 请访问 https://runes.scrypt.io/ 或点击阅读原文体验&#xff01; 关于sCrypt sCrypt是BSV区块链上的一种智能合约高级语言。比特币使用基于堆栈的Script语言来支持智能合约&#xff0c;但是用原生Script编…
阅读更多...
网络靶场实战-物联网安全Unicorn框架初探

网络靶场实战-物联网安全Unicorn框架初探

背景 Unicorn 是一款基于 QEMU 的快速 CPU 模拟器框架&#xff0c;可以模拟多种体系结构的指令集&#xff0c;包括 ARM、MIPS、PowerPC、SPARC 和 x86 等。Unicorn使我们可以更好地关注 CPU 操作, 忽略机器设备的差异。它能够在虚拟内存中加载和运行二进制代码&#xff0c;并提…
阅读更多...
密码加密案例

密码加密案例

文章目录 描述思路错误关于增强for循环改变不了数组的值这一现象的疑问代码反思 描述 思路错误 应该是将其放入数组&#xff0c;而不是单纯的读到&#xff0c;因为你要对每一位数字进行操作 关于增强for循环改变不了数组的值这一现象的疑问 我们尝试使用增强for循环 键盘输…
阅读更多...
uniapp使用地图开发app

uniapp使用地图开发app

使用uniapp开发app中使用到地图的坑&#xff1a; 1、简单使用地图的功能比较简单&#xff0c;仅使用到地图选点和定位功能&#xff1a;&#xff08;其中问题集中在uni.chooseLocation中&#xff09;下面是api官网地址 uni.getLocation(OBJECT) | uni-app官网 官方建议app端使…
阅读更多...
迁移学习基础知识

迁移学习基础知识

简介 使用迁移学习的优势&#xff1a; 1、能够快速的训练出一个理想的结果 2、当数据集较小时也能训练出理想的效果。 注意&#xff1a;在使用别人预训练的参数模型时&#xff0c;要注意别人的预处理方式。 原理&#xff1a; 对于浅层的网络结构&#xff0c;他们学习到的…
阅读更多...
视频批量剪辑新纪元：轻松调整音频采样率，一键实现高效视频处理！

视频批量剪辑新纪元：轻松调整音频采样率，一键实现高效视频处理！

视频剪辑已成为我们日常生活和工作中不可或缺的一部分。然而&#xff0c;面对大量的视频文件&#xff0c;如何高效地进行批量剪辑&#xff0c;同时又能轻松调整音频采样率&#xff0c;成为了许多视频制作人员、自媒体从业者、教育者和学生的共同需求。 第一步&#xff0c;进入…
阅读更多...
[C++基础学习]----02-C++运算符详解

[C++基础学习]----02-C++运算符详解

前言 C中的运算符用于执行各种数学或逻辑运算。下面是一些常见的C运算符及其详细说明&#xff1a;下面详细解释一些常见的C运算符类型&#xff0c;包括其原理和使用方法。 正文 01-运算符简介 算术运算符&#xff1a; a、加法运算符&#xff08;&#xff09;&#xff1a;对两个…
阅读更多...
4.27日学习打卡----初学Redis（四）

4.27日学习打卡----初学Redis（四）

4.27日学习打卡 目录&#xff1a; 4.27日学习打卡一. Redis的配置文件二. Redis构建Web应用实践环境搭建redis的优点引入本地缓存Google 开源工具GuavaGuava实现本地缓存 一. Redis的配置文件 在Redis的解压目录下有个很重要的配置文件 redis.conf &#xff0c;关于Redis的很多…
阅读更多...
达梦(DM) SQL日期操作及分析函数

达梦(DM) SQL日期操作及分析函数

达梦DM SQL日期操作及分析函数 日期操作SYSDATEEXTRACT判断一年是否为闰年周的计算确定某月内第一个和最后一个周末某天的日期确定指定年份季度的开始日期和结束日期补充范围内丢失的值按照给定的时间单位查找使用日期的特殊部分比较记录 范围处理分析函数定位连续值的范围查找…
阅读更多...
如何通过安全数据传输平台，保护核心数据的安全传输？

如何通过安全数据传输平台，保护核心数据的安全传输？

在数字化的浪潮中&#xff0c;企业的数据安全传输显得尤为关键。随着网络攻击手段的日益复杂&#xff0c;传统的数据传输方式已不再安全&#xff0c;这就需要我们重视并采取有效的措施&#xff0c;通过安全数据传输平台来保护核心数据。 传统的数据传输面临的主要问题包括&…
阅读更多...
Bun 入门到精通（一）

Bun 入门到精通（一）

Bun 是什么&#xff1f; Bun 是用于 JavaScript 和 TypeScript 应用程序的多合一工具包。它作为一个名为 bun 的可执行文件提供。 其核心是 Bun 运行时&#xff0c;这是一个快速的 JavaScript 运行时&#xff0c;旨在替代 Node.js。它是用 Zig 编写的&#xff0c;并由 JavaSc…
阅读更多...
数字文旅重塑旅游发展新格局：以数字化转型为突破口，提升旅游服务的智能化水平，为游客带来全新的旅游体验

数字文旅重塑旅游发展新格局：以数字化转型为突破口，提升旅游服务的智能化水平，为游客带来全新的旅游体验

随着信息技术的迅猛发展&#xff0c;数字化已成为推动各行各业创新发展的重要力量。在旅游业领域&#xff0c;数字文旅的兴起正以其强大的驱动力&#xff0c;重塑旅游发展的新格局。数字文旅以数字化转型为突破口&#xff0c;通过提升旅游服务的智能化水平&#xff0c;为游客带…
阅读更多...
C#基础|OOP、类与对象的认识

C#基础|OOP、类与对象的认识

哈喽&#xff0c;你好&#xff0c;我是雷工&#xff01; 所有的面向对象的编程语言&#xff0c;都是把我们要处理的“数据”和“行为”封装到类中。 以下为OOP的学习笔记。 01 什么是面向对象编程&#xff08;OOP&#xff09;&#xff1f; 设计类&#xff1a;就是根据需求设计…
阅读更多...
论文精读InstructPix2Pix: Learning to Follow Image Editing Instructions

论文精读InstructPix2Pix: Learning to Follow Image Editing Instructions

InstructPix2Pix: Learning to Follow Image Editing Instructions 我们提出了一种根据人类指令编辑图像的方法:给定输入图像和告诉模型该做什么的书面指令&#xff0c;我们的模型遵循这些指令来编辑图像。 为了获得这个问题的训练数据&#xff0c;我们结合了两个大型预训练模…
阅读更多...
输入输出重定向，追加重定向(Linux)

输入输出重定向，追加重定向(Linux)

文章目录 一、输出重定向二、追加重定向三.输入重定向总结 一、输出重定向 我们在使用echo内容时&#xff0c;会把内容显示在显示器上。 echo自动换行。 我们如果输入 echo “hello linux” >file.txt 我们运行一下就会发现系统中多了一个file.txt的文件&#xff0c;如果这…
阅读更多...
C语言 基本数据类型及大小

C语言 基本数据类型及大小

一、基本数据类型 1.整型int 整型的关键字是int&#xff0c;定义一个整型变量时&#xff0c;只需要用int来修饰即可。也分为短整型和长整型。 2.浮点型 浮点型又分单精度浮点型float和双精度浮点型double。 3.字符型char 前面的整型和浮点型都是用于存放数字。字符型&…
阅读更多...
代理IP纯净度，对用户居然这么重要！

代理IP纯净度，对用户居然这么重要！

在网络应用和数据采集等领域&#xff0c;代理IP被广泛使用&#xff0c;而代理IP的纯净度则直接影响其性能和可用性。代理IP的纯净度主要涉及到代理IP在网络传输过程中的稳定性、匿名性和安全性。今天就带大家一起了解代理IP纯净度对用户的重要性。 第一&#xff0c;保护用户的隐…
阅读更多...
什么是物理机什么是虚拟机 2024年6款适用于Windows的虚拟机软件推荐 crossover Parallels Desktop Mac运行exe

什么是物理机什么是虚拟机 2024年6款适用于Windows的虚拟机软件推荐 crossover Parallels Desktop Mac运行exe

虚拟化是创建虚拟版本的过程&#xff0c;例如桌面、服务器或网络。它在物理上并不存在&#xff0c;但似乎确实存在。这种环境的虚拟版本可用于多种用途&#xff0c;包括测试和开发、灾难恢复和工作负载整合。虚拟化软件&#xff0c;也称为虚拟机 (VM) 软件&#xff0c;是一种允…
阅读更多...
机器学习理论基础—贝叶斯分类器

机器学习理论基础—贝叶斯分类器

机器学习理论基础—贝叶斯分类器 贝叶斯决策论 概述&#xff1a;贝叶斯决策论是概率框架下实施决策的基本方法&#xff0c;对分类任务来说&#xff0c;在所有相关概率都已知的理想情形下&#xff0c;贝叶斯决策论考虑如何基于这些概率和误判损失来选择最优的类别标记。 定义 …
阅读更多...
HarmonyOS开发案例：【 自定义弹窗】

HarmonyOS开发案例：【 自定义弹窗】

介绍 基于ArkTS的声明式开发范式实现了三种不同的弹窗&#xff0c;第一种直接使用公共组件&#xff0c;后两种使用CustomDialogController实现自定义弹窗&#xff0c;效果如图所示&#xff1a; 相关概念 [AlertDialog]&#xff1a;警告弹窗&#xff0c;可设置文本内容和响应回…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站