两种盒模型

在CSS中,有两种主要的盒模型(Box Model),它们决定了元素的尺寸计算方式:

  1. 标准盒模型(W3C Box Model)
    在标准盒模型中,元素的总宽度和总高度分别由以下几个部分组成:
    • Content(内容区):这是元素的实际内容,比如文字、图片等,由 widthheight 属性设置的尺寸仅影响内容区的大小。
    • Padding(内边距):围绕内容区的空白空间,可通过 padding 属性来设置。
    • Border(边框):紧邻内边距的边框,可通过 border 属性来设置边框的宽度、样式和颜色。
    • Margin(外边距):元素外部的空白区域,与其他元素分隔开来,由 margin 属性控制。

所以,在标准盒模型中,当您声明一个元素的宽度(width)时,这个宽度仅仅指的是内容区域的宽度,整个盒子的总宽度将是:

总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
  1. 怪异盒模型(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的尺寸会影响元素内部内容的大小。

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

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

相关文章

mysql之递归sql

mysql之递归sql 递归sql在一些公司是不允许使用的,会涉及数据库压力,所以会在代码里递归查询,但有些公司开发流程没有规定,且数据库数据量不大,之前写过好几遍了,老是记不住,记录一下 通过父级…

Thrift快速入门开发demo

Thrift快速入门开发demo 一、认识Thrift thrift是什么?一个RPC 代码生成框架,使用它的IDL(Interface Defination Language,接口定义语言)定义你想要实现的接口,然后它就会生成对应语言的远程调用框架代码,用户只需要实现接口逻辑,不用关心具体的细节。 tutorial:htt…

特征变换,分箱

特征变换 分箱 为什么分箱 连续数值离散化 降低异常值带来的影响 提升模型的稳定性 如何分箱 等频 等距 卡方 风控场景下常用 决策树 …

牛客网刷题 | BC94 反向输出一个四位数

目前主要分为三个专栏,后续还会添加: 专栏如下: C语言刷题解析 C语言系列文章 我的成长经历 感谢阅读! 初来乍到,如有错误请指出,感谢! 描述 将一个四位数&…

【Linux初探】:解锁开源世界的神秘钥匙

文章目录 🚀一、了解Linux🔥二、Linux 的发行版❤️三、Linux应用领域💥四、Linux vs Windows & mac 🚀一、了解Linux Linux是一种自由、开放源代码的操作系统,它的内核由芬兰计算机科学家Linus Torvalds在1991年创…

LeetCode题练习与总结:二叉树的层序遍历Ⅱ--107

一、题目描述 给你二叉树的根节点 root ,返回其节点值 自底向上的层序遍历 。 (即按从叶子节点所在层到根节点所在的层,逐层从左向右遍历) 示例 1: 输入:root [3,9,20,null,null,15,7] 输出:[…

【评价类模型】层次分析法(AHP)

1.评价类思想综述: 明确评价主体–>评价指标确定–>计算指标权重–>方案评价 1.1指标确定: 可以通过一个思维导图的方式来画出一个指标系统,先确定方向,再向下细化 注意:指标需要具有贴合性和独立性。 贴合…

如何搭建一个API

搭建一个API(应用程序编程接口)通常涉及以下几个步骤: 1. 确定API的目的和需求 明确你希望通过API实现的功能和目标。确定API将提供哪些数据和服务。 2. 设计API 定义端点(Endpoints):确定API的URL结构…

破解:既要及即时相应,又要并行运行后台任务? FastAPI + asyncio

开发响应迅速且高效的Web应用程序是开发者的首要目标之一。一个常见的需求是,当触发一个端点时能够并行执行多个任务,但在第一个任务完成后立即返回响应,同时其余任务继续在后台运行。 挑战 假设在触发一个端点时,你有三个耗时任…

打造游戏APP:面向对象编程的实战演练

新书上架~👇全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我👆,收藏下次不迷路┗|`O′|┛ 嗷~~ 目录 一、项目背景与架构概览 二、类的设计与实现 三、面向对象编程的实践 四、游戏循环与事件…

Vue CLI 的服务介绍与使用(2024-05-20)

1、介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供: 通过 vue/cli 实现的交互式的项目脚手架。 通过 vue/cli vue/cli-service-global 实现的零配置原型开发。 一个运行时依赖 (vue/cli-service),该依赖: 可升级…

详解混合A*算法Hybrid A*

混合A算法(Hybrid A)是一种改进的路径规划算法,特别针对车辆动力学进行了优化。以下是对混合A*算法的详细解释: 一、算法背景 混合A算法是在A算法的基础上发展而来的,旨在解决A算法在高维连续空间中的效率问题以及运动约束的问题。A算法虽然广泛应用于图或者网络中的路径…

linux中系统调用的原理

Linux中系统调用的原理涉及到用户态和内核态之间的切换以及参数传递。下面我将以用户态调用libc的time()函数为例,详细说明整个代码处理流程: 用户态代码调用time()函数: 用户程序包含<time.h>头文件,调用time()函数,并传入一个time_t类型的指针参数,用于存储获取到…

单片机原理及技术(二)—— AT89S51单片机(一)(C51编程)

目录 一、AT89S51单片机的片内硬件结构 二、AT89S51的引脚功能 2.1 电源及时钟引脚 2.2 控制引脚 2.3 并行 I/O口引脚 三、AT89S51的CPU 3.1 运算器 3.1.1 算术逻辑单元&#xff08;ALU&#xff09; 3.1.2 累加器A 3.1.3 程序状态字寄存器&#xff08;PSW&#xff09…

Spring6框架中依赖注入的多种方式(推荐构造器注入)

你好&#xff0c;这里是codetrend专栏“Spring6全攻略”。 一个典型的企业应用程序不是由单个对象&#xff08;或在Spring术语中称为bean&#xff09;组成的。 即使是最简单的应用程序也有一些对象一起工作&#xff0c;呈现给最终用户看到的内容形成一个连贯的应用程序。 要…

谈谈你对 vue 的理解 ?

1.谈谈你对 vue 的理解 ? 官方: Vue是一套用于构建用户界面的渐进式框架,Vue 的核心库只关注视图层 2. 声明式框架 Vue 的核心特点,用起来简单。那我们就有必要知道命令式和声明式的区别! 早在 JQ 的时代编写的代码都是命令式的,命令式框架重要特点就是关注过程 声明…

【目标检测】关于YOLO系列算法中Confidence置信度的计算和理解

写在前面: 首先感谢兄弟们的关注和订阅,让我有创作的动力,在创作过程我会尽最大能力,保证作品的质量,如果有问题,可以私信我,让我们携手共进,共创辉煌。(专栏订阅用户订阅专栏后免费提供数据集和源码一份,超级VIP用户不在服务范围之内) 路虽远,行则将至;事虽难,做…

esp32 idf开发中的常用命令

git config --global --unset http.proxy 取消代理 git config --global --unset https.proxy 取消代理 ipconfig/flushdns 清除dns缓存 idf.py fullclean ​​​​​​​ ​​​​​…

39、Flink 的窗口剔除器(Evictors)详解

Evictors Flink 的窗口模型允许在 WindowAssigner 和 Trigger 之外指定可选的 Evictor&#xff0c;通过 evictor(...) 方法传入 Evictor。 Evictor 可以在 trigger 触发后、调用窗口函数之前或之后从窗口中删除元素&#xff0c; Evictor 接口提供了两个方法实现此功能&#x…

LDAP: error code 32 - No Such Object

目前我的项目版本&#xff1a; Spring版本:5.3.15SpringBoot版本:2.6.3 完整错误 org.springframework.ldap.NameNotFoundException: [LDAP: error code 32 - No Such Object]; nested exception is javax.naming.NameNotFoundException: [LDAP: error code 32 - No Such Objec…