W3C标准盒模型和IE盒模型

最新推荐文章于 2025-10-26 09:37:34 发布
原创 最新推荐文章于 2025-10-26 09:37:34 发布 · 1.8k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#盒模型 #W3C标准盒模型和IE盒模型

本文详细介绍了标准W3C盒子模型和IE盒子模型的区别。W3C盒子模型中，盒子的总宽度由内容、边框和填充共同决定；而在IE盒子模型中，指定的宽度已包含了内容、边框和填充。

 标准W3C盒子模型：（内容content是一个独立的部分）

所以盒子总宽度为：width+border+padding 

IE盒子模型： （width已经包含content border padding）

所以盒子总宽度为：width 

IE盒子模型和标准W3C盒子模型
09-27
在Web开发中，有两种主要的盒子模型：IE盒子模型和标准W3C盒子模型，这两种模型对于元素尺寸的计算方式有所不同，因此对页面布局有着深远的影响。 **标准W3C盒子模型**遵循W3C规范，它将每个HTML元素视为一个矩形...
网页里的两种盒子模型(W3C盒子模型、IE盒子模型)
09-22
网页设计中的两种主要盒子模型，即W3C盒子模型和IE盒子模型，是理解CSS布局的关键因素。这两种模型在计算元素的实际尺寸时有着显著的区别，从而影响到元素在页面上的表现。 1. W3C盒子模型（标准模型） W3C盒子模型...
用标准W3C盒子模型
chmsword的专栏
06-09 1336
盒子模型是CSS中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 IE 盒子模型和标准 W3C 盒子模型。他们对盒子模型的解释各不相同，先来看看我们熟悉的标准盒子模型：从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。IE 盒子模型从上图可以看到 IE
标准盒模型
demin3278的博客
01-10 198
一、盒模型 　　（一）盒模型概念： 　　　　盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系，css定义所有的元素都可以像盒子一样的外形和平面空间，即包含内容区、填充区（padding）、边框（border）、边界（margin）,这就是盒模型。 　　　　 　　　　1.填充（padding）：padding是指在内容与边框的空白区域，也称补白。 　　　...
什么是盒模型？标准盒模型和怪异盒模型（IE盒模型）有什么区别？
最新发布
破损的天堂鸟博客
10-26 1117
其核心功能是用来控制当前盒子与其他元素盒子之间的距离，从而在页面上创建元素间的空白间隔，防止它们相互重叠。值得注意的是，外边距的值可以设置为负数，这会使元素向指定方向移动，甚至与其他元素发生重叠。几乎所有的网页布局挑战，从简单的间距调整到复杂的响应式设计，都与对盒模型的深刻理解息息相关。CSS盒模型是理解和构建网页布局的根本。所提供的可预测的尺寸模型将变得更加重要，它为构建独立、自适应的UI组件提供了坚实的基础。CSS盒模型的基本思想是，网页上的每一个HTML元素都可以被想象成一个矩形的盒子。
盒模型
weixin_44346202的博客
10-12 114
1.IE6盒子模型与W3C盒子模型 2. 文档中的每个元素被描绘为矩形盒子。盒子有四个边界：外边距边界margin, 边框边界border, 内边距边界padding与内容边界content 3. CSS3中有个box-sizing属性可以控制盒子的计算方式 4. content-box：padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和。（W3C盒子模型） 5. border-box：padding和border
标准盒模型（w3c标准）和 怪异盒模型（IE标准）
z980498059的博客
12-01 3819
盒模型的理解
详解CSS 怪异盒模型和标准盒模型
12-30
由于目前大部分主流的浏览器支持的是W3C标准盒模型（标准盒模型），也有保留对怪异盒子样式的解析，当然IE沿用的是自己标准的盒模型（怪异盒子模型） 用两个简单的例子分别介绍下这两个盒子模型： 标准盒模型： &lt...
W3C标准盒模型
奋斗的 优快云
11-13 647
W3C标准盒模型 1、这个宽度和高度是元素内容的宽度和高度，而不是padding的 #div1 { height: 200px; width: 200px; background: #f00; } 2、加上padding后的图形 #div1 { padding: 200px; height: 200px; width: 200px; background: #f00; } 3、加边框 #div1 { /*padding: 200px
css盒模型（W3C标准盒模型、IE怪异盒模型、box-sizing）
Predator117的博客
01-19 370
所有的HTML元素都可以看作是盒子，每个盒子包括： 外边距（margin）、边框（border）、内边距（padding）、内容（content） W3C标准盒模型 设定的height与width就是content的高度与宽度， 盒子总宽度=margin + border + padding + content/width 盒子总高度=margin + border + padding + content/height IE怪异盒模型 设定的height与width是包括了border、padding、
css标准盒模型
码上行动
06-21 246
文章目录标准盒模型一、padding（内边距）二、margin（外边距）总结 标准盒模型 标准盒模型盒子的实际大小 盒子的总宽度 = width + 左右的padding + 左右的border 盒子的总高度 = height + 上下的padding + 上下的border 一、padding（内边距） 控制内容与盒子边框的关系（又叫内填充） 填充：padding,在设定页面中一个元素内容到元素的边缘(边框) 之间的距离。 也称补白； 用法： 1）用来调整内容在容器中的位置关系 2）paddin
ie的盒模型和标准模型
dhzp5170的博客
04-16 210
使用 box-sizing:content-box || border-box || inherit 原理图 计算 怪异模型|IE模型 div宽度（定死） = 内容宽度+border宽度+padding宽度 //改变border宽度，div宽度不会变化 标准模型 div宽度 = 内容宽度+border宽度+padding宽度 //改变border宽度，div宽度会变化 代码...
标准盒模型和ie盒模型
03-08
标准盒模型（Standard Box Model）和IE盒模型（Internet Explorer Box Model 或 Quirks Mode Box Model），它们在处理元素宽度、高度及内边距（padding）、外边框（border）的方式上有所不同。 ### 标准盒模型 这...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值