css的标准盒模型和怪异盒模型

最新推荐文章于 2025-10-08 16:21:04 发布
原创 最新推荐文章于 2025-10-08 16:21:04 发布 · 436 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#盒模型

本文探讨了标准盒模型与怪异盒模型的区别，并介绍了如何使用box-sizing属性解决不同浏览器间的盒模型兼容性问题。

大多数浏览器采用W3C标准模型，而IE中则采用Microsoft自己的标准。

在标准盒模型：一个div的内容区 = width + border +padding + margin

怪异盒模型：div的内容区 = width + margin   width = padding + border

解决兼容性问题：box-sizing:{}

        content-box---时 采用标准也就是默认模式

        border-box --时 采用怪异模式

前端基础(八)_盒子模型（标准盒子模型和怪异盒子模型）
见贤思齐焉，见不贤内自省
12-15 4139
盒子模型（标准盒子模型和怪异盒子模型）
标准盒模型与怪异盒模的区别.html
02-23
介绍了css中盒模型的一些属性的位置设置和标准盒模型与怪异盒模型的一些区别，他们的区别在于标准盒模型与怪异盒模型的大小计算的不同。
CSS 框模型(Box Model)
wuxiaobingandbob的专栏
03-02 587
CSS 框模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 下面的图片说明了框模型(Box Model)： 不同部分的说明： Margin - 清
什么是css标准盒模型？
weixin_44208755的博客
02-23 1379
CSS标准盒模型概念 在CSS中，CSS假定所有的HTML文档元素都生成了一个描述该元素在HTML文档布局中所占空间的一个矩形元素框，可以形象地将其看作是一个盒子。CSS围绕这些矩盒子产生了一种“盒子模型”的概念，通过定义一系列与盒子相关的属性，可以极大地丰富和促进各个盒子乃至整个HTML文档的表现效果和布局结构。对于是盒子的元素，如果没有特殊的设置，其默认总是占独立的一行，宽度为浏览器窗...
css盒子模型
最新发布
mzh202209421的博客
10-08 714
属性指定了弹性子元素在父容器中的位置这像是告诉抽屉里的小盒子们是从左到右、从右到左、从上到下还是从下到上排队。rowcolumnrow：横向从左到右排列（左对齐），默认的排列方式2：反转横向排列（右对齐，从后往前排，最后一项排在最前面3column：纵向排列4：反转纵向排列，从后往前排，最后一项排在最上面。
详解CSS 怪异盒模型和标准盒模型
12-30
在html文档中，每个渲染在页面中的标签都是一个个盒子模型。 盒子模型又分为 ： W3C标准的盒子模型 和 IE标准的盒子模型。 由于目前大部分主流的浏览器支持的是W3C标准盒模型（标准盒模型），也有保留对怪异盒子样式的解析，当然IE沿用的是自己标准的盒模型（怪异盒子模型） 用两个简单的例子分别介绍下这两个盒子模型： 标准盒模型： <!--html--> <div class=box1> <div class=box2></div> </div> <!--css--> .box1{ width: 200px; height: 200px;
标准盒模型和怪异盒模型
m0_64204485的博客
07-21 952
怪异盒模型，标准盒模型的精讲
标准盒子模型和怪异盒子模型（详解）
wwwjjjjj666的博客
11-24 9856
标准盒子模型和怪异盒子模型（详解）
CSS+盒模型,css盒模型面试题,HTML
09-10
- **盒模型的两种类型**：考察你是否了解标准盒模型和IE盒模型的区别。 - **`box-sizing`属性**：询问你如何通过这个属性来改变盒模型的行为。 - **布局问题**：例如，如何通过调整盒模型属性解决元素重叠或间距问题...
标准盒子模型,与怪异盒子模型详解
wangxuanyang_zer的博客
10-22 2701
标准盒子模型和怪异盒子模型是前端开发中的重要概念，它们影响了元素的布局和渲染。大多数现代浏览器采用标准盒子模型，但在需要与旧版Internet Explorer等不符合标准的浏览器兼容时，可以考虑使用怪异盒子模型。前端开发者需要了解这两种模型的差异，以便在开发过程中更好地控制元素的外观和行为，同时确保跨浏览器兼容性。
CSS标准盒子（标准盒模型）和怪异盒子（怪异盒模型）
2203_75479159的博客
04-25 2853
标准盒子：内容尺寸独立，但总尺寸易失控（需手动计算padding和border怪异盒子：总尺寸固定，内容自适应，更适合现代响应式布局。优先选择border-box，仅在特殊需求时回退到。
css盒模型(标准盒模型 怪异盒模型)
way_wan的博客
08-26 422
css盒模型(标准盒模型 怪异盒模型) CSS 盒子模型(Box Model) 每个HTML元素都可以看作是一个盒子，父元素和子元素的关系就行大盒子里放了个小盒子，兄弟元素就像在大盒子平放了两个小盒子。盒模型包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。 由于目前大部分主流的浏览器支持的是W3C标准盒模型（标准盒模型），也有保留对怪异盒子样式的解析，当然IE沿用的是自己标准的盒模型（怪异盒子模型） 用两个简单的例子分别介绍下这两个盒子模型：
标准盒模型（content-box）与怪异盒模型（border-box）的区别？box-sizing 的作用是什么？
前端大白话
07-14 1309
各位前端战友们，是不是也曾有过这样的经历：明明给div设了width: 200px，加了个padding: 20px，结果元素直接“胖”到超出父容器，整个布局瞬间乱成一锅粥？调试时对着控制台里的盒模型图抓头发，心里默念“这到底是哪个环节出了岔子”？ 作为一名写了8年代码的前端老司机，我太懂这种被盒模型支配的恐惧了。就像连续改了3天的bug后突然收到产品经理的需求变更，那种窒息感简直一模一样。但别慌，今天这篇文章就像一剂“代码布洛芬”，带你轻松搞懂标准盒模型（content-box）和怪异盒模型（borde
标准盒模型和怪异盒子模型的区别
zhugedali_的博客
07-11 2589
同理，内容区域的高度为 100px，加上上下内边距各 20px，高度变为 100 + 20×2 = 140px，加上上下边框各 10px，高度变为 140 + 10×2 = 160px，再加上上下外边距各 10px，最终在垂直方向占据的总高度为 160 + 10×2 = 180px。- 内边距在内容区域的四周，左右内边距各 20px，所以加上内边距后，水平方向的宽度变为 200 + 20×2 = 240px。- 设置的宽度（width）包括了内容区域、内边距和边框的宽度。
CSS标准盒子模型详解
weixin_55020138的博客
01-16 542
CSS标准盒子模型
标准盒模型、怪异盒模型对比与应用
weixin_33798152的博客
07-25 223
百度标准盒模型，所有的介绍都是在标准模式下，一个块的总宽度=width+margin(左右)+padding(左右)+border(左右)在怪异模式下，一个块的总宽度=width+margin（左右）（既width已经包含了padding和border值）然后再介绍一下css3新属性box-sizing: border-box; 那么，到...
标准盒模型与怪异盒模型的区别 及 box-sizing的应用
weixin_44806034的博客
01-21 425
1、盒子模型（box model） 在HTML中，可以把元素看做盒子，盒子包括：实际内容（content）、内边距（padding）、边框（border）、外边距（margin） 2、标准盒模型与怪异盒模型 对比两种模型的区别 1.标准盒模型 标准盒模型（W3C盒子模型），设置的width或height是对 实际内容（content）的width或height进行设置，内容周围的border和padding另外设置，即盒子模型的width（height）=设置的content的宽高+padding+bo
CSS--怪异盒子模型
{丸の子}
09-15 561
因为父盒子无边框时子元素增加 margin 会造成外边距穿透，此时需要给父盒子添加 padding ，添加 padding 会增大父盒子，需要手动重新计算父盒子 width ，因此利用怪异盒子模型省略重新计算 width 这一步。正常盒子下，当增加内边距时，如果想保证盒子和之前一样大，需要手动重新计算 width ，怪异盒子模型则省略该步。当父盒子无边框时，子盒子增加 margin 会造成外边距穿透。解决方法：给父盒子设置padding: 10px 0;
css盒模型标准和怪异
07-27
CSS盒模型有两种标准：标准盒模型和怪异盒模型。 标准盒模型是CSS的默认盒模型，它将元素的宽度和高度定义为内容区域的宽度和高度。也就是说，元素的宽度和高度不包括边框和内边距。 而怪异盒模型是一种老旧的盒...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值