当前位置: 首页 > news >正文

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

在 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; 为怪异盒模型。

 

相关文章:

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

在 CSS 中&#xff0c;标准盒模型和怪异盒模型是两种不同的盒子模型计算方式&#xff0c;主要区别如下&#xff1a; 一、标准盒模型&#xff08;content-box&#xff09; 1. 定义与组成 - 标准盒模型是 CSS 中默认的盒模型。 - 它由内容区域&#xff08;content&#xff09;、…...

推荐算法——MRR

定义&#xff1a; MRR计算的是第一个正确答案的排名的倒数&#xff0c;并对所有查询取平均值。它衡量了模型在排序结果中快速找到正确答案的能力。 其中&#xff1a; Q 是查询的总数。ranki​ 是第 i 个查询中第一个正确答案的排名&#xff08;位置&#xff09;。如果第一个正…...

idea中打开静态网页端口是63342而不是8080

问题&#xff1a; 安装了tomcat 并且也配置了环境&#xff0c;但是在tomcat下运行&#xff0c;总是在63342下面显示。这也就意味着&#xff0c;并没有运行到tomcat环境下。 找了好几个教程&#xff08;中间还去学习了maven&#xff0c;因为跟的教程里面&#xff0c;没有maven,但…...

Vue3框架搭建3:配置说明-prettier配置

1、配置说明&#xff1a; .prettierrc.json{"$schema": "https://json.schemastore.org/prettierrc","semi": false,"tabWidth": 2,"singleQuote": true,"printWidth": 100,"trailingComma": "no…...

SQL MySQL定时器/事件调度器(Event Scheduler)

事件调度器&#xff08;Event Scheduler&#xff09;在MySQL数据库系统中是一个强大的功能组件&#xff0c;它允许用户定义一系列称为“事件”的数据库对象&#xff0c;这些事件在指定的时间或时间间隔自动执行预定义的SQL语句或操作。事件调度器通过维护一个时间计划表来管理这…...

从0到1构建渠道运营体系:实战案例与策略指南

引言 在当今竞争激烈的市场环境中&#xff0c;有效的渠道运营是企业实现产品或服务快速触达目标用户、提升市场份额的关键。从零开始构建一个高效的渠道运营体系&#xff0c;不仅需要深思熟虑的策略规划&#xff0c;还需要灵活应变的实战操作。本文将结合实战案例&#xff0c;…...

Java版Flink使用指南——将消息写入到RabbitMQ的队列中

大纲 新建工程新增依赖 编码自动产生数据写入RabbitMQ 测试工程代码 在 《Java版Flink使用指南——从RabbitMQ中队列中接入消息流》一文中&#xff0c;我们介绍了如何使用Java在Flink中读取RabbitMQ中的数据&#xff0c;并将其写入日志中。本文将通过代码产生一些数据&#xf…...

python excel openpyxl

python excel LTS 在开始之前&#xff0c;确保已经安装了 Python 和所需的库。 主要使用以下库&#xff1a; openpyxl&#xff1a;用于读取和写入 Excel 文件。 pandas&#xff1a;用于数据处理和分析。 xlwings&#xff1a;用于将 Python 与 Excel 连接&#xff0c;实现双向…...

C++八股(一)

目录 一、new和malloc ⭐ 二、class和struct的区别 ⭐ 三、char和int之间的转换 四、什么是野指针和悬挂指针 ⭐ 五、NULL和nullptr区别⭐ 六、指针常量和常量指针有何区别⭐ 七、物理内存和虚拟内存的区别⭐ 八、重载、重写和隐藏的区别⭐ 九、简述面向对象(OOP)的…...

【Git的基本操作】版本回退 | 撤销修改的三种情况 | 删除文件

目录 5.版本回退 5.1选项hard&后悔药 5.2后悔药&commit id 5.3版本回退的原理 6.撤销修改 6.1情况一 6.2情况二 6.3情况三 ​7.删除文件 Git重要能力之一马&#xff0c;版本回退功能。Git是版本控制系统&#xff0c;能够管理文件历史版本。本篇以ReadMe文件为…...

STM32-I2C

本内容基于江协科技STM32视频学习之后整理而得。 文章目录 1. I2C通信1.1 I2C通信简介1.2 硬件电路1.3 I2C时序基本单元1.3.1 起始条件和终止条件1.3.2 发送一个字节1.3.3 接收一个字节1.3.4 发送应答和接收应答 1.4 I2C时序1.4.1 指定地址写1.4.2 当前地址读1.4.3 指定地址读…...

04.ffmpeg打印音视频媒体信息

目录 1、相关头文件 2、相关结构体 3、相关函数 4、函数详解 5、源码附上 1、相关头文件 #include <libavformat/avformat.h> 包含格式相关的函数和数据结构 #include <libavutil/avutil.h> 包含一些通用实用函数 2、相关结构体 AV…...

微信开发授权登录梳理总结

授权登录流程对比 微信公众号/网页 微信文档地址&#xff1a;https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html 流程图如下&#xff1a; 特殊说明&#xff1a; 步骤1拼接的微信地址是&#xff1a;https://open.weixin.qq…...

HTML5实现我的音乐网站源码

文章目录 作者&#xff1a;[xcLeigh](https://blog.csdn.net/weixin_43151418) 1.设计来源1.1 界面效果1.2 轮播图界面1.3 音乐播放界面1.4 视频播放界面 2.效果和源码2.1 动态效果2.2 源代码 源码下载万套模板&#xff0c;程序开发&#xff0c;在线开发&#xff0c;在线沟通 作…...

UNI_App平台调试指南 debug(十五)

App平台调试指南 debug 常规开发里,在 HBuilderX 的运行菜单里运行 App,手机端的错误或 console.log 日志信息会直接打印到控制台。 如果需要更多功能,比如审查元素、打断点 debug,则需要启动调试模式。自 HBuilderX 2.0.3+ 版本起开始支持 App 端的调试。 #打开调试窗口…...

LLM之RAG实战(四十一)| 使用LLamaIndex和Gemini构建高级搜索引擎

Retriever 是 RAG&#xff08;Retrieval Augmented Generation&#xff09;管道中最重要的部分。在本文中&#xff0c;我们将使用 LlamaIndex 实现一个结合关键字和向量搜索检索器的自定义检索器&#xff0c;并且使用 Gemini大模型来进行多个文档聊天。 通过本文&#xff0c;我…...

【错题集-编程题】AOE还是单体?(贪心)

牛客对应链接&#xff1a;AOE还是单体&#xff1f; (nowcoder.com) 一、分析题目 如果使用一次 AOE 造成的伤害比消耗的蓝量多&#xff0c;那就使用。否则就一直使用单体伤害。 二、代码 //值得学习的代码 #include <iostream> #include <algorithm>using namespa…...

怎么办?我的C盘又爆红了!别慌!博主手把手带你管理你的C盘空间~

怎么办&#xff1f;我的C盘又爆红了&#xff01;别慌&#xff01;博主手把手带你管理你的C盘空间~ 文章目录 怎么办&#xff1f;我的C盘又爆红了&#xff01;别慌&#xff01;博主手把手带你管理你的C盘空间~0. 在开始清理之前1. 推荐执行的操作1.1 清理系统缓存文件1.2 磁盘清…...

react启用mobx @decorators装饰器语法

react如果没有经过配置&#xff0c;直接使用decorators装饰器语法会报错&#xff1a; Support for the experimental syntax ‘decorators’ isn’t currently enabled 因为react默认是不支持装饰器语法&#xff0c;需要做一些配置来启用装饰器语法。 step1: 在 tsconfig.js…...

计算机如何学习

1. 不要只盯着计算机语言学习&#xff0c;你现在已经学习了C语言和Java&#xff0c;暑假又规划学习Python&#xff0c;最后你掌握的就是计算机语言包而已。 2. 建议你找一门想要深挖的语言&#xff0c;沿着这个方向继续往后学习知识就行。计算机语言是学不完的&#xff0c;而未…...

TDengine 快速体验(Docker 镜像方式)

简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能&#xff0c;本节首先介绍如何通过 Docker 快速体验 TDengine&#xff0c;然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker&#xff0c;请使用 安装包的方式快…...

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置&#xff0c;使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

鱼香ros docker配置镜像报错:https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

大数据学习(132)-HIve数据分析

​​​​&#x1f34b;&#x1f34b;大数据学习&#x1f34b;&#x1f34b; &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 用力所能及&#xff0c;改变世界。 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4…...

return this;返回的是谁

一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请&#xff0c;不同级别的经理有不同的审批权限&#xff1a; // 抽象处理者&#xff1a;审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...

CRMEB 中 PHP 短信扩展开发:涵盖一号通、阿里云、腾讯云、创蓝

目前已有一号通短信、阿里云短信、腾讯云短信扩展 扩展入口文件 文件目录 crmeb\services\sms\Sms.php 默认驱动类型为&#xff1a;一号通 namespace crmeb\services\sms;use crmeb\basic\BaseManager; use crmeb\services\AccessTokenServeService; use crmeb\services\sms\…...

go 里面的指针

指针 在 Go 中&#xff0c;指针&#xff08;pointer&#xff09;是一个变量的内存地址&#xff0c;就像 C 语言那样&#xff1a; a : 10 p : &a // p 是一个指向 a 的指针 fmt.Println(*p) // 输出 10&#xff0c;通过指针解引用• &a 表示获取变量 a 的地址 p 表示…...

沙箱虚拟化技术虚拟机容器之间的关系详解

问题 沙箱、虚拟化、容器三者分开一一介绍的话我知道他们各自都是什么东西&#xff0c;但是如果把三者放在一起&#xff0c;它们之间到底什么关系&#xff1f;又有什么联系呢&#xff1f;我不是很明白&#xff01;&#xff01;&#xff01; 就比如说&#xff1a; 沙箱&#…...

用js实现常见排序算法

以下是几种常见排序算法的 JS实现&#xff0c;包括选择排序、冒泡排序、插入排序、快速排序和归并排序&#xff0c;以及每种算法的特点和复杂度分析 1. 选择排序&#xff08;Selection Sort&#xff09; 核心思想&#xff1a;每次从未排序部分选择最小元素&#xff0c;与未排…...

二叉树-144.二叉树的前序遍历-力扣(LeetCode)

一、题目解析 对于递归方法的前序遍历十分简单&#xff0c;但对于一位合格的程序猿而言&#xff0c;需要掌握将递归转化为非递归的能力&#xff0c;毕竟递归调用的时候会调用大量的栈帧&#xff0c;存在栈溢出风险。 二、算法原理 递归调用本质是系统建立栈帧&#xff0c;而非…...