标准盒模型和怪异盒子模型的区别

在 CSS 中,标准盒模型和怪异盒模型是两种不同的盒子模型计算方式,主要区别如下:

 

一、标准盒模型(content-box)

 

1. 定义与组成

 

- 标准盒模型是 CSS 中默认的盒模型。

- 它由内容区域(content)、内边距(padding)、边框(border)和外边距(margin)四部分组成。

2. 宽度和高度的计算

 

- 元素设置的宽度(width)仅指内容区域的宽度。

- 元素设置的高度(height)仅指内容区域的高度。

3. 空间计算示例

 

- 假设一个 <div> 元素,样式设置为: width: 200px; height: 100px; padding: 20px; border: 10px solid black; margin: 10px; 

- 内容区域的宽度为 200px。

- 内边距在内容区域的四周,左右内边距各 20px,所以加上内边距后,水平方向的宽度变为 200 + 20×2 = 240px。

- 边框宽度为左右各 10px,此时整个盒子在水平方向的宽度变为 240 + 10×2 = 260px。

- 外边距在边框之外,左右外边距各 10px,最终该盒子在水平方向占据的总宽度为 260 + 10×2 = 280px。

- 同理,内容区域的高度为 100px,加上上下内边距各 20px,高度变为 100 + 20×2 = 140px,加上上下边框各 10px,高度变为 140 + 10×2 = 160px,再加上上下外边距各 10px,最终在垂直方向占据的总高度为 160 + 10×2 = 180px。

4. 适用场景

 

- 当需要精确控制内容区域的大小,并且希望内边距、边框和外边距不会影响到整体布局时,标准盒模型较为适用。

 

二、怪异盒模型(border-box)

 

1. 定义与特点

 

- 怪异盒模型也被称为 IE 盒模型。

- 其特点是元素的宽度和高度包含了内边距和边框。

2. 宽度和高度的计算

 

- 设置的宽度(width)包括了内容区域、内边距和边框的宽度。

- 设置的高度(height)包括了内容区域、内边距和边框的高度。

3. 空间计算示例

 

- 同样假设一个 <div> 元素,样式设置为: width: 200px; height: 100px; padding: 20px; border: 10px solid black; margin: 10px;  但使用怪异盒模型。

- 因为宽度 200px 已经包含了内边距和边框,所以内容区域的实际宽度为 200 - (20×2 + 10×2) = 140px。

- 高度 100px 已经包含了内边距和边框,所以内容区域的实际高度为 100 - (20×2 + 10×2) = 60px。

- 加上外边距后,水平方向总宽度为 200 + 10×2 = 220px,垂直方向总高度为 100 + 10×2 = 120px。

4. 适用场景

 

- 当需要固定元素所占据的空间,并且希望通过调整内边距和边框来改变内容区域大小时,怪异盒模型更方便。

5. 切换盒模型

 

- 可以通过 CSS 的 box-sizing 属性来切换盒模型。 box-sizing: content-box; 为标准盒模型, box-sizing: border-box; 为怪异盒模型。

 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

顶顶通呼叫中心中间件-打电话没声音检查步骤(mod_cti基于FreeSWITCH)

顶顶通呼叫中心中间件-电话没声音检查步骤(mod_cti基于FreeSWITH) 检查步骤 1、检查配置文件 检查配置文件&#xff1a;打开ccadmin -> 配置文件 -> vars -> external_ip$${local_ip_v4}看一下这个有没有配置正确的外网IP&#xff0c;如果没有配置正确就需要配置正…

PyCharm 2023.3.2 关闭时一直显示正在关闭项目

文章目录 一、问题描述二、问题原因三、解决方法 一、问题描述 PyCharm 2023.3.2 关闭时一直显示正在关闭项目 二、问题原因 因为PyCharm还没有加载完索引导致的 三、解决方法 方法一&#xff1a; 先使用任务管理器强制关闭&#xff0c;下次关闭时注意要等待PyCharm加载完索…

C语言-顺序表

&#x1f3af;引言 欢迎来到HanLop博客的C语言数据结构初阶系列。在这个系列中&#xff0c;我们将深入探讨各种基本的数据结构和算法&#xff0c;帮助您打下坚实的编程基础。本次我将为你讲解。顺序表&#xff08;也称为数组&#xff09;是一种线性表&#xff0c;因其简单易用…

ArcGIS Pro入门制图教程

地理信息系统 (GIS) 是一种使用地图显示和分析数据的方式。在本教程中&#xff0c;您将学习桌面 GIS 应用程序 ArcGIS Pro 的基础知识。 新加坡的一家旅行社希望制作一款宣传册&#xff0c;用于向游客介绍距离市中心热门目的地最近的火车站。该宣传册将与带有文本信息的地图相…

使用 `useAppConfig` :轻松管理应用配置

title: 使用 useAppConfig &#xff1a;轻松管理应用配置 date: 2024/7/11 updated: 2024/7/11 author: cmdragon excerpt: 摘要&#xff1a;本文介绍了Nuxt开发中useAppConfig的使用&#xff0c;它便于访问和管理应用配置&#xff0c;支持动态加载资源、环境配置切换、权限…

软设之观察者模式

设计模式中&#xff0c;观察者模式的意图是:定义对象间的一种一对多的依赖关系&#xff0c;当一个对象的状态发生改变时&#xff0c;所有依赖于它的对象都得到通知并被自动更新。 比如说&#xff0c;有一个新闻网站&#xff0c;订阅的用户众多&#xff0c;假如说管理员发布了一…

使用Open3D处理点云数据:从读取到异常值剔除

在三维计算机视觉和机器人领域&#xff0c;点云数据是理解和分析环境的重要工具。Open3D是一个强大的开源库&#xff0c;它提供了丰富的功能来处理和分析点云数据。今天&#xff0c;我们将通过一段简单的代码示例&#xff0c;展示如何使用Open3D来读取点云文件、估计法线、并剔…

软考:软件设计师 — 2.操作系统

二. 操作系统 1. 操作系统概念 &#xff08;1&#xff09;操作系统的作用 操作系统是计算机硬件之上的第一层软件系统。 操作系统通常用来&#xff1a; 管理系统的硬件、软件、数据资源。控制程序运行。人机之间的接口。应用软件与硬件之间的接口。 可概括为&#xff1a; …

【Linux】内核文件系统系统调用流程摸索

内核层可以看到当前调用文件处理的进程ID 这个数据结构是非常大的&#xff1a; 我们打印的pid,tgid就是从这里来的&#xff0c;然后只需要找到pid_t的数据类型就好了。 下图这是运行的日志信息&#xff1a; 从上述日志&#xff0c;其实我也把write的系统调用加了入口的打印信…

开源项目的深潜:深掘机遇,直面挑战

在科技探索的深邃海洋中&#xff0c;开源项目不仅是一艘破浪前行的旗舰&#xff0c;更是深入未知领域、挖掘技术宝藏的潜水器。它们引领着技术创新的潮流&#xff0c;同时也直面着深海中的未知挑战。本文将深入剖析开源项目所蕴含的深层次机遇与必须克服的严峻挑战&#xff0c;…

CSS3实现彩色变形爱心动画【附源码】

随着前端技术的发展&#xff0c;CSS3 为我们提供了丰富的动画效果&#xff0c;使得网页设计更加生动和有趣。今天&#xff0c;我们将探讨如何使用 CSS3 实现一个彩色变形爱心加载动画特效。这种动画不仅美观&#xff0c;而且可以应用于各种网页元素&#xff0c;比如加载指示器或…

水库大坝安全监测险情主要内容

水库常见险情主要包括洪水漫顶、脱坡滑坡、坝体裂缝、 散浸、渗漏、漏洞、陷坑、管涌等&#xff0c;此外风浪冲击、水流冲刷等也会加剧险情的扩大。大坝险情万一抢护不及时&#xff0c;易导致发 生溃坝事故&#xff0c;造成极为严重的灾难性后果。要做到及时有效地 抢护大坝险情…

科技信息项目验收测试包括哪些内容?验收测试报告如何获取?

科技信息项目验收测试是指在科技信息项目完成后&#xff0c;组织专业测评团队对项目开发过程和成果进行全面、系统、客观的评测和鉴定的过程。通过验收测试&#xff0c;可以评估项目的质量、功能完整性以及满足业务需求的程度&#xff0c;并为项目的成功上线提供依据。 为了进…

uniapp实现table排序

根据后端接口传来的数字大小对列表进行升序/降序展示 效果图&#xff0c;价格由高到低降序 价格由低到高 升序 js 降序升序代码如下 export default {data() {return {MtList:[]}},onLoad() {this.MtypeName();//加载列表方法},methods: {MtypeName(){//列表方法this.$api.…

与沃尔玛进行EDI对接,需要了解什么?如何实现EDI对接呢?

与沃尔玛进行EDI对接前&#xff0c;需要了解什么呢&#xff1f; 首先&#xff0c;需要了解什么是EDI&#xff1f; EDI&#xff08;Electronic Data Interchange&#xff09;即电子数据交换&#xff0c;借助EDI使得企业&#xff08;计算机/应用系统&#xff09;与企业&#xff…

2024透明加密软件最新推荐丨11款好用的透明加密软件

在数字化时代&#xff0c;文件与数据安全愈发重要&#xff0c;保护信息安全刻不容缓。文件加密软件应运而生&#xff0c;成为了信息安全的重要帮手。透明加密技术凭借众多的优点备受青睐。那么&#xff0c;什么是透明加密技术呢&#xff1f; 透明加密技术是一种在不影响用户正…

STM32读取LX-224总线舵机信息

一、舵机指令包格式 帧头&#xff1a; 连续收到两个 0x55 ,表示有数据包到达。ID: 每个舵机都有一个 ID 号。ID 号范围 0&#xff5e;253,转换为十六进制 0x00&#xff5e;0xFD。广播 ID: ID 号 254(0xFE) 为广播 ID,若控制器发出的 ID 号为 254(0xFE)&#xff0c;所有的舵机均…

『Django』自带的后台

theme: smartblue 本文简介 点赞 关注 收藏 学会了 上一篇讲了 Django 操作 MySQL 的方法&#xff0c;讲了如何创建模型&#xff0c;如何对数据库做增删改查的操作。但每次修改数据都要写代码&#xff0c;多少有点麻烦。 有没有简单一点的方法呢&#xff1f; 有的有的&#…

第十九章 Nest multer 文件上传

上章我们了解了Express multer 文件上传的相关操作 本章将了解Nest中的文件上传。用 multer 包处理 multipart/form-data 类型的请求中的 file 新建个 nest 项目: nest new nest-multer-upload 安装 multer 的 ts 类型的包&#xff1a; npm install -D types/multer1、单文件…

进阶版智能家居系统Demo[C#]:整合AI和自动化

引言 在基础智能家居系统的基础上&#xff0c;我们将引入更多高级功能&#xff0c;包括AI驱动的自动化控制、数据分析和预测。这些进阶功能将使智能家居系统更加智能和高效。 目录 高级智能家居功能概述使用C#和AI实现智能家居自动化实现智能照明系统的高级功能 自动调节亮度…