两种盒模型
在CSS中,有两种主要的盒模型(Box Model),它们决定了元素的尺寸计算方式:
- 标准盒模型(W3C Box Model)
在标准盒模型中,元素的总宽度和总高度分别由以下几个部分组成:
-
- Content(内容区):这是元素的实际内容,比如文字、图片等,由
width和height属性设置的尺寸仅影响内容区的大小。 - Padding(内边距):围绕内容区的空白空间,可通过
padding属性来设置。 - Border(边框):紧邻内边距的边框,可通过
border属性来设置边框的宽度、样式和颜色。 - Margin(外边距):元素外部的空白区域,与其他元素分隔开来,由
margin属性控制。
- Content(内容区):这是元素的实际内容,比如文字、图片等,由
所以,在标准盒模型中,当您声明一个元素的宽度(width)时,这个宽度仅仅指的是内容区域的宽度,整个盒子的总宽度将是:
总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
- 怪异盒模型(IE盒模型 / Quirks Mode Box Model)
在怪异盒模型(通常在老版IE浏览器中使用,但在某些quirks模式或特定情况下现代浏览器也可能采用此模型)中,元素的宽度(width)和高度(height)属性同时包含了内容区以及内边距,边框的尺寸。
因此,在怪异盒模型中,如果设置了元素的宽度(width),那么:
总宽度(在这里称为“总布局宽度”)= border-left + padding-left + width + padding-right + border-right
注意这里的“总宽度”其实是指内容加上内边距的宽度,而不是整个盒子占据的空间(外边距依然独立计算)。
为了统一不同浏览器之间的盒模型行为,并确保元素的尺寸计算一致,可以使用CSS3中的 box-sizing 属性来指定盒模型的计算方式:
box-sizing: content-box;表示使用标准盒模型(默认大多数现代浏览器的行为)。box-sizing: border-box;表示使用怪异盒模型,此时元素的总宽度(或高度)会包含内边距和边框,仅content的尺寸会影响元素内部内容的大小。
相关文章:
两种盒模型
在CSS中,有两种主要的盒模型(Box Model),它们决定了元素的尺寸计算方式: 标准盒模型(W3C Box Model) 在标准盒模型中,元素的总宽度和总高度分别由以下几个部分组成: Cont…...
【C++】类型转换
目录 前言一、C语言中的类型转换二、为什么C需要四种类型转换三、C强制类型转换3.1 static_cast3.2 reinterpret_cast3.3 const_cast3.4 dynamic_cast3.5 RTTI 前言 本篇文章讲解的是C中对于C语言类型转换做出的一些更好的规范问题,同时也保证了在一些特殊场景下进…...
Redis RDB 持久化问题
前言 Redis 是内存数据库,它将自己的数据储存在内存里面,如果不想办法将储存在内存中的数据保存到磁盘里面,那么一旦服务器进程退出,服务器中的数据也就没了。 因此,Redis 提供了 RDB 持久化功能,这个功能…...
windows 下nginx常用命令
1、启动,目录cmd,后 start nginx.exe 2.重新加载 nginx -s reload 3.查看状态 tasklist /fi “imagename eq nginx.exe” 4.关闭 nginx -s quit...
xjoi题库一级1-10段题解(c语言版)
xjoi题库一级一段 xjoi题库一级二段 xjoi题库一级三段 xjoi题库一级四段 xjoi题库一级五段...
1.int 与 Integer 的简单区别
蓝桥杯刷题从此开始: 第一题就是两个数的和,个人看来主要考察 int与integer 的区别; 这是我提交的答案,竟然会报错: import java.util.*; //输入A、B,输出AB。 class add {public static void main(String …...
单片机原理及技术(二)—— AT89S51单片机(一)(C51编程)
目录 一、AT89S51单片机的片内硬件结构 二、AT89S51的引脚功能 2.1 电源及时钟引脚 2.2 控制引脚 2.3 并行 I/O口引脚 三、AT89S51的CPU 3.1 运算器 3.1.1 算术逻辑单元(ALU) 3.1.2 累加器A 3.1.3 程序状态字寄存器(PSW)…...
某方protobuf闲谈
问题 当我们去看某方的时候,搜索了关键词svm,然后通过抓包查看,请求的Request Payload是一串看不懂的乱码,并且返回的数据也大部分是乱码 观察请求的Content-Type是application/grpc-web+proto,没错数据的传输是protobuf的形式了 protobuf的相关概念和原理,网上有很多教…...
专为汽车内容打造的智能剪辑解决方案
汽车内容创作已成为越来越多车主和汽车爱好者热衷的活动。然而,如何高效、便捷地将行车途中的精彩瞬间转化为高质量的视频作品,一直是困扰着广大用户的一大难题。美摄科技凭借其深厚的视频处理技术和智能分析能力,推出了专为汽车内容记录而生…...
【C语言】二叉树的实现
文章目录 前言⭐一、二叉树的定义🚲二、创建二叉树🎡三、二叉树的销毁🎉四、遍历二叉树1. 前序遍历2. 中序遍历3. 后序遍历4. 层序遍历 🌲五、二叉树的计算1. 计算二叉树结点个数2. 计算二叉树叶子结点的个数3. 计算二叉树的深度4…...
在ubuntu22.04里网站源码连不上mysql数据库
在ubuntu22.04里网站源码连不上mysql数据库。后来找到了原因。 连不上的时候有报错信息: ERROR 1698 (28000): Access denied for user rootlocalhost 用在网上搜索该报错信息,找到了两篇有用的文章,用这两篇文章里的处理方法解决了问题。 …...
博客说明 5/12~5/24【个人】
博客说明 5/12~5/24【个人】 前言版权博客说明 5/12~5/24【个人】对比最后 前言 2024-5-24 13:39:23 对我在2024年5月12日到5月24日发布的博客做一下简要的说明 以下内容源自《【个人】》 仅供学习交流使用 版权 禁止其他平台发布时删除以下此话 本文首次发布于CSDN平台 作…...
豆瓣电影后端设计
sql脚本 -- douban.tags_encode definitionCREATE TABLE tags_encode (id bigint NOT NULL AUTO_INCREMENT COMMENT 自增主键,tag varchar(100) NOT NULL COMMENT tag中文名,tag_encode varchar(100) NOT NULL COMMENT tag转encode,type varchar(100) NOT NULL DEFAULT movie …...
【深度学习】第1章
概论: 机器学习是对研究问题进行模型假设,利用计算机从训练数据中学习得到模型参数,并最终对数据进行预测和分析,其基础主要是归纳和统计。 深度学习是一种实现机器学习的技术,是机器学习重要的分支。其源于人工神经网络的研究。深度学习的模型结构是一种含多隐层的神经…...
Vue3实战笔记(37)—粒子特效登录页面
文章目录 前言一、粒子特效登录页总结 前言 上头了,再来一个粒子特效登录页面。 一、粒子特效登录页 登录页: <template><div><vue-particles id"tsparticles" particles-loaded"particlesLoaded" :options"…...
解锁无限可能:JavaScript与【机器学习】的浪漫邂逅
解锁无限可能:JavaScript与机器学习的浪漫邂逅 在人工智能和大数据日益盛行的今天,机器学习已成为我们理解、分析和处理数据的强大工具。而JavaScript,作为前端开发的主流语言,其灵活的特性和广泛的应用场景也让我们对其充满了期…...
【Linux】$()中的内容与不加$()时有什么区别
$()中的内容与不加$()有什么区别,例如$(/usr/local/hadoop/bin/hadoop classpath)与/usr/local/hadoop/bin/hadoop classpath两者有何区别??? 关于这个问题,笔者建议可以参考如下文章: Linux—shell中$((…...
2024最新前端面试八股文【基础篇293题】
⼀、HTML、HTTP、web综合问题 1 前端需要注意哪些SEO 2 <img> 的 title 和 alt 有什么区别 3 HTTP的⼏种请求⽅法⽤途 4 从浏览器地址栏输⼊url到显示⻚⾯的步骤 5 如何进⾏⽹站性能优化 6 HTTP状态码及其含义 7 语义化的理解 8 介绍⼀下你对浏览器内核的理解 9 …...
【NumPy】关于numpy.median()函数,看这一篇文章就够了
🧑 博主简介:阿里巴巴嵌入式技术专家,深耕嵌入式人工智能领域,具备多年的嵌入式硬件产品研发管理经验。 📒 博客介绍:分享嵌入式开发领域的相关知识、经验、思考和感悟,欢迎关注。提供嵌入式方向…...
起保停电路工作原理
一、电路组成 起保停电路由电源保护设备(空气开关)、交流接触器、启动按钮、停止按钮和用电设备组成。 起保停电路的组成部分通常可分为四个部分: 保护部分:(空气开关)在电流或电压超出一定范围时自动切断…...
变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析
一、变量声明设计:let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性,这种设计体现了语言的核心哲学。以下是深度解析: 1.1 设计理念剖析 安全优先原则:默认不可变强制开发者明确声明意图 let x 5; …...
解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八
现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet,点击确认后如下提示 最终上报fail 解决方法 内核升级导致,需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...
从深圳崛起的“机器之眼”:赴港乐动机器人的万亿赛道赶考路
进入2025年以来,尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断,但全球市场热度依然高涨,入局者持续增加。 以国内市场为例,天眼查专业版数据显示,截至5月底,我国现存在业、存续状态的机器人相关企…...
Linux简单的操作
ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...
华为OD机试-食堂供餐-二分法
import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...
如何理解 IP 数据报中的 TTL?
目录 前言理解 前言 面试灵魂一问:说说对 IP 数据报中 TTL 的理解?我们都知道,IP 数据报由首部和数据两部分组成,首部又分为两部分:固定部分和可变部分,共占 20 字节,而即将讨论的 TTL 就位于首…...
精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南
精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南 在数字化营销时代,邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天,我们将深入解析邮件打开率、网站可用性、页面参与时…...
学习STC51单片机32(芯片为STC89C52RCRC)OLED显示屏2
每日一言 今天的每一份坚持,都是在为未来积攒底气。 案例:OLED显示一个A 这边观察到一个点,怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 : 如果代码里信号切换太快(比如 SDA 刚变,SCL 立刻变&#…...
JavaScript 数据类型详解
JavaScript 数据类型详解 JavaScript 数据类型分为 原始类型(Primitive) 和 对象类型(Object) 两大类,共 8 种(ES11): 一、原始类型(7种) 1. undefined 定…...
TSN交换机正在重构工业网络,PROFINET和EtherCAT会被取代吗?
在工业自动化持续演进的今天,通信网络的角色正变得愈发关键。 2025年6月6日,为期三天的华南国际工业博览会在深圳国际会展中心(宝安)圆满落幕。作为国内工业通信领域的技术型企业,光路科技(Fiberroad&…...
