CSS-怪异盒子模型

python_198 python_198 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 100+累计阅读 164平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄3年
关注
原创 最新推荐文章于 2026-06-28 11:18:29 发布 164 阅读 AI 写同款· GEO 优化 ›
关于CSS中盒子模型与怪异盒子模型的特点及其区别 今天来探究一下box 盒子模型的问题： 盒子模型是html设计页面时常出现的一个知识，对于不同的盒子模型可以实现不同的功能，来方便我们来做页面的设计。首先我们放置两个div，通过设置两个不同属性的div来观察其属性的变化和探究两个盒子模型的区别。 ****标准盒子模型与怪异盒子模型：**** 关于标准盒子模型的实例 .Standard{ /*标准盒子*/ backgroun... 阅读详情

 一、定义

二、标准盒模型与怪异盒模型的区别

1、Box-sizing

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

代码演示：

 

 效果展示：

 

3、怪异盒模型（border-box）

代码演示：

效果展示：

收录于
HTML5+CSS3模块

当前文章被收录于：

HTML5+CSS3模块
17 篇文章 0 人学习

欢迎来到“HTML5+CSS3模块“分类专栏！这个专栏将为您提供有关HTML5和CSS3最新动态、技术资讯、案例展示、教程解析以及相关领域的前沿知识。在这里，您可以了解到如何利用HTML5和CSS3的强大功能来提升网页性能、实现响应式设计、增强用户体验，以及如何利用这些技术进行创新性的网页开发。

订阅专栏 查看详情
标签
#css #前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
【CSS笔记】CSS盒子模型（标准盒子模型、怪异盒子模型） 标准盒子模型，它的特点是：当我们固定内容区域的宽度高度之后，再给这个盒子添加边框、填充、边距属性的时候，此时不会改变内容区域的宽度和高度，而是向外扩展宽度和高度。采用标准盒子模型，给元素添加边框、填充等属性的时候，整个元素区域将向外扩张宽度和高度，如果不向当前元素向外扩张宽度和高度，就可以将元素设置为怪异盒子模型。怪异盒子模型，这种模式下，当我们设置内容区域的宽度和高度时候，再添加边框、填充属性的时候，整个盒子的宽度和高度都不会变化，而是会将内容区域压缩。下面通过案例来看下标准盒子模型。... 阅读详情

相关推荐

从零搭建PIC MCU开发环境：MPLAB IDE与HI-TECH编译器安装破解全攻略

本文详细介绍了从零搭建PIC MCU开发环境的完整流程，包括MPLAB IDE 8.85的安装配置、HI-TECH C编译器的安装与破解，以及PICkit3编程器的使用技巧。通过清晰的步骤说明和常见问题解决方案，帮助开发者快速搭建稳定的PIC单片机开发环境，适用于PIC16/18系列MCU开发。

weixin_29188997的博客 294

Day03_CSS盒子模型_怪异盒子模型

盒子 : 即为容器 , 任何一个标签都可以称之为容器 , 只不过容器分为大小 , 最大的容器为div等区块划分的元素;其余的均为比较小的容器;模型 : 即为盒子的大小,盒子模型 : 主要是为了然我们计算出盒子的大小占位 , 方便调整界面之间的间距1) 如果想要元素横向显示则使用浮动1) 如果一个在做一个在右侧显示则使左侧使用左浮动, 右侧使用右浮动。

weixin_51326968的博客 2484

5G移动网络运维（优化）

5G 网络优化现状 移动通信行业属于技术密集型行业，是国民经济的重要支柱以及整个社会经济运转体系中不可或缺的基础。2019 年年底 5G 开始商用，截止到 2020 年3月，我国三大运营商建设了 16.1 万个 5G 基站，我国成为目前全球 5G 基站最多的国家。预计到 2020 年年底，我国运营商会建设大概 70 万个 5G 基站。基于 5G高频段的特性，信号覆盖距离会低于ins 基站，再加上 5G 万物互联的巨大经济潜力价值需求，后续三大运营商在 5G 基站建设数量上势必会超过当前 LTE 基站数量的

2301_78171382的博客 1327

CSS--怪异盒子模型

CSS–怪异盒子模型 怪异盒子模型 标准盒子宽度计算方法（扩张主义） border-left-width+width+padding-left+padding-right+border-right-width <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div { width: 100px;

m0_56123958的博客 9151

VASPKIT绘制平面平均电荷差分密度

平面平均密度差(planar-averaged electron density difference)是密度差的衍生。密度差是个三维空间函数，经常通过绘制平面图、等值面图方式图形化考察。虽然这两种图很直观，但平面图会受到截面选取的影响，而等值面图会受到等值面数值（isovalue）选取的影响，因此都有一定任意性，也不容易定量讨论。对于电子转移有比较明确方向的情况，可以绘制平面平均密度差曲线，由此可以清楚地考察垂直于选取的方向上每个截面上的密度差积分值，在定量讨论、对比上比较便利。

weixin_43948934的博客 1万+

STM32进入HardFault_Handler时，如何找到问题所在？

当STM32进入HardFault_Handler时，定位问题发生的点

m0_60831979的博客 2152

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

CSS中的盒子模型和怪异盒子模型 我们今天就来讲讲网页中的盒子模型，盒子模型它分为标准盒子模型和怪异盒子模型。但他们有什么区别呢？怪异盒子它怪异在哪呢？是和孙悟空一样会72变吗？还是… 来首先我们来看看什么是盒子模型 一、什么是盒子模型(Box Model) 盒子想必大家都是知道的吧！ 生活中我们的快递有盒子包装着，买的蛋糕也是有盒子包装着，我们的礼品也是被盒子包装着。 模型是什么呢？ 它...

qq_41145685的博客 5914

二维otsu算法python_OpenCV-Python系列之OTSU算法

上一个教程中，我们谈到了关于图像二值化的两种方法，一种是固定阈值法，另一种是自适应阈值法，总的来说，自适应阈值法在某些方面要由于固定阈值法，但还没完，这次我们将隆重介绍我们的重量级选手，也就是OTSU算法(又称为大津算法和最大类间方差法)。最大类间方差法是1979年由日本学者大津提出的，是一种自适应阈值确定的方法，又叫大津法，简称OTSU，是一种基于全局的二值化算法，它是根据图像的灰度特性,将图像...

weixin_28834169的博客 1426

自学前端第十天 : CSS怪异盒子模型

一.怪异盒子模型 怪异盒模型是IE盒子模型 我们可以通过 css 样式 box-sizing来进行切换 select { box-sizing: border-box; /* 怪异盒子模型 */ box-sizing: content-box; /* 标准盒子模型 */ } 怪异盒子模型的 宽度 高度计算 和标准盒子模型计算方式不同 怪异盒子模型的 content内容宽度会把padding和border算入其中 是由外而内的计算宽度 二.标准盒子和怪异盒子: 1.标准模型下 宽度计算方式

weixin_47592060的博客 2880

WorkVisual传输程序报错_发现一个内部错误

WorkVisual传输程序报错_发现一个内部错误

qq_16401025的博客 2459

若依（ruoyivue）实现文档在线查看

1、Kkfileview部署 第一步：从kkfileview官方发行版本下载安装包，安装包下载路径： https://gitee.com/kekingcn/file-online-preview/releases， 第二步：解压kkFileView-x.x.x文件（Windows用.zip包，Linux/MacOS用.tar.gz包） 第三步：打开解压后文件夹的bin目录，运行startup脚本（Windows下以管理员身份运行startup.bat，Linux以root用户运行startup.sh） 第四

weixin_46953697的博客 9681

CSS中的标准盒子模型和怪异盒子模型

一、什么是盒子模型(Box Model) 盒子想必大家都是知道的吧！ 生活中我们的快递有盒子包装着，买的蛋糕也是有盒子包装着，我们的礼品也是被盒子包装着。 模型是什么呢？ 它是主观意识借助实体或者虚拟表现构成客观阐述形态结构的一种表达目的的物件 css中的盒子模型它是可以对元素进行布局，设置距离的大小，这里面包括含有外边距、边框、内边距和内容主体这四个部分。 二、CSS中的标准盒子模型(W3c标准的盒子模型) CSS中的盒子模型也是主观意识借助实体或者虚拟表现构成客观阐述形态结构的一种表达目的的物

分享互联网的有趣知识~ 3078

ArcGIS天地图矢量化秘籍：用重分类+ArcScan高效提取建筑轮廓线

本文详细介绍了利用ArcGIS重分类和ArcScan技术高效提取天地图建筑轮廓线的半自动化流程。通过动态中断值计算、多级重分类策略和ArcScan高级矢量化技巧，显著提升城市规划中的矢量化效率与精度，适用于中级GIS用户。

weixin_30879169的博客 475

CSS标准盒子模型和怪异盒子模型

CSS标准盒子模型和怪异盒子模型

m0_61672533的博客 1357

VC中sqlite的使用

在VC中对sqlite的使用，实现数据库大批数据的快速插入，读取数据库中的数据在ListCtrl中显示

Probability and Statistics - 4th edition

Probability and Statistics - 4th edition

CSS 盒子模型_盒子模型和怪异盒子模型怎么设置

当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和。盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，css内定义的宽（width）和高（height），指的是填充以里的内容范围。对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

2501_90339150的博客 1118

霍尼韦尔SoftMaster使用说明

霍尼韦尔SoftMaster使用说明

CSS盒子模型和怪异盒模型

CSS盒子模型具备的属性：内容(content)、内边距(padding)、边框(border)、外边距(margin) 。 盒子模型的定位： ①网页默认的布局方式 文档流指文档中能够明确显示对象在排列时所占用的具体方位。文档流不但是盒子模式定位的基础所在，它也是HTML中默认的网页布局模式，在没有特殊要求的情况下，页面中的块状元素呈现自上而下的动态分布形式，内联元素则是按照从左到右的方式存在。...

me_never的博客 286

STM32F407中文手册

STM32f407中文手册 本参考手册面向应用开发人员，提供有关使用 STM32F405xx/07xx、STM32F415xx/17xx、 STM32F42xxx 和 STM32F43xxx 微控制器存储器与外设的完整信息。STM32F405xx/07xx、STM32F415xx/17xx、STM32F42xxx 和 STM32F43xxx 构成一个微 控制器系列，各产品具有不同的存储器大小、封装和外设。有关订购信息以及器件的机械与电气特性，请参见数据手册。有关 ARM Cortex™-M4F 内核的信息，请参见《Cortex™-M4F 技术参考手册》。

CSS 盒子模型（标准盒模型和怪异盒模型）

盒子模型介绍 所谓盒子模型（Box Model）就是把 HTML 页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容(content)、内边距（padding）、边框（border）和外边距（margin）组成。 所有的文档元素（标签）都会生成一个矩形框，我们称为元素框（element box），它描述了一个文档元素在网页布局汇总所占的位置大小。因此，每个盒子除了有自己大小和位置外，还影响着其他盒子的大小和位置。 标准的 W3C 盒子模型和 IE 盒子模型。 .

ySFRaabbcc的博客 611

CSS怪异，弹性盒子模型与浏览器内核

CSS margin(外边距)属性定义元素周围的空间。

2301_80241120的博客 1293

CSS中的盒子模型、怪异盒子模型

盒子模型 构成： Margin(外边距) 清除边框外的区域，外边距是透明的。 Border(边框) 围绕在内边距和内容外的边框。 Padding(内填充) 清除内容周围的区域，内边距是透明的。 Content(内容) 盒子的内容，显示文本和图像。 应用方式 box-sizing:content-box; 边框 边框样式 p{ border-color: ; border-width: ; border-style: ;(必填项) } 四条边框的顺序也是顺时针的

weixin_47844457的博客 446

css 怪异盒子模型(ie盒子)

标准盒子:width即设置内容区域宽度,不包括内边距、边框、外边距; 怪异盒子:width包括内容区域、内边距和边框,不包括外边距 怪异盒子设置方式:box-sizing:border-box; 设置width='200px’时: 标准盒子: 怪异盒子: ...

weixin_43294560的博客 1836

css两个盒子之间只显示一条边框_标准盒子模型-怪异盒子模型-css3中box-sizing指定盒子模型...

“这些盒子，你怎么看“盒子模型概述：所有HTML元素都可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model)：盒子模型组成以及对应区域盒子模型的组成：Margin(外边距) - ...

weixin_30974373的博客 228

CSS盒子模型——标准与怪异

盒子模型众所周知，这里先简单介绍一下。 可以看到，在标准盒模型下，width和height是内容区域即content的width和height。而盒子总宽度为 在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右) 而IE盒模型或怪异盒模型显而易见的区别就是，width和height除了content区域外，还包含p...

ld395353765的博客 598

标准盒子模型和怪异盒子模型

标准盒子模型和怪异盒子模型一、概念二、计算方法三、默认盒模型四、盒模型转换五、演示代码六、总结 今天来为简单介绍一个在HTML+CSS中的一个重要概念：标准盒子模型和怪异盒子模型。 一、概念 标准盒模型采用的W3C标准，盒子的content内容部分由width宽度和height高度决定，添加padding内边距或border外边框后，宽高都会进行相应增长； ②怪异盒模型也称为IE盒模型，是IE浏览器设计元素时遵循的规则。怪异盒模型的宽高在div盒子初次设置时就已经规定，添加padding或者border，

weixin_47340917的博客 1万+

CSS盒子模型与怪异盒模型

盒子模型（Box Modle）可以用来对元素进行布局，包括内边距，边框，外边距，和实际内容这几个部分。 盒子模型分为两种 第一种是W3c标准的盒子模型（标准盒模型）、第二种IE标准的盒子模型（怪异盒模型） 当前大部分的浏览器支持的是W3c的标准盒模型，也保留了对怪异盒模型的支持，当然IE浏览器沿用的是怪异盒模型。怪异模式是“部分...

weixin_30902675的博客 3139

CSS基础之盒子模型（标准盒模型、怪异盒模型、弹性盒）

2）order：控制子元素的排列顺序，值越大越靠后，支持负数，不带单位。4）父元素一旦变成弹性盒子，子元素多不会超出也不会换行，而是会挤压。3）设置子元素在主轴的对齐方式：justify-content：；2）父元素一旦变成弹性盒子，子元素无论是什么类型，都可以设置宽高。e.space-around：中间元素的间距是贴边元素的2倍。4）设置子元素在侧轴的对齐方式：align-items：；e.strech（默认值）：拉伸（不设置宽或者不设高）6）设置多行的对齐方式：align-content：；

m0_48749505的博客 393
上一篇： CSS-背景属性
下一篇： CSS-弹性盒子模型（flex box）
点赞 2
评论 0
书签 书签 0
python_198
python_198
博客等级 码龄3年 359粉丝 112原创
+ 关注 专栏目录 订阅专栏
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

python_198

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值