w3c标准盒子模型和IE盒子模型

最新推荐文章于 2024-10-19 23:23:33 发布
原创 最新推荐文章于 2024-10-19 23:23:33 发布 · 741 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文深入解析了两种盒模型：IE盒模型和W3C标准盒模型。详细对比了两者的宽度计算方式，指出IE盒模型的内容宽度包含padding和border，而W3C盒模型的宽度仅指内容宽度。

答案：

盒模型分为：IE盒模型 和 标准w3c盒模型

w3c标准盒子模型：宽度 = 内容宽度（content）+ padding + border + margin
低版本IE盒子模型：宽度 = 内容宽度（content + padding + border）+ margin

注意：IE盒模型的内容宽度包含了padding和border，w3c盒模型宽度就是内容宽度。

 

详细解析：

标准盒子模型

IE盒子模型

IE盒子模型和标准W3C盒子模型
09-27
在Web开发中，有两种主要的盒子模型：IE盒子模型和标准W3C盒子模型，这两种模型对于元素尺寸的计算方式有所不同，因此对页面布局有着深远的影响。 **标准W3C盒子模型**遵循W3C规范，它将每个HTML元素视为一个矩形...
网页里的两种盒子模型(W3C盒子模型、IE盒子模型)
09-22
网页设计中的两种主要盒子模型，即W3C盒子模型和IE盒子模型，是理解CSS布局的关键因素。这两种模型在计算元素的实际尺寸时有着显著的区别，从而影响到元素在页面上的表现。 1. W3C盒子模型（标准模型） W3C盒子模型...
计算 W3C盒子、IE盒子模型和宽高
Conely的博客
08-19 988
W3C盒子 内容区的宽高： 宽 width 高 height 盒子的宽高： 宽：内容区的宽+左右padding+左右border width+paddingLeft+paddingRight+borderLeft+borderRigh 高：内容区的高+上下padding+上下border height+paddingTop+paddingBottom+borderTop+borderBottom 所占据屏幕的宽高 宽：width+paddingLe
css基础-盒模型知识
lewis的博客
02-22 516
简介：就是用来装页面上的元素的矩形区域。CSS 中的盒子模型包括IE 盒子模型(border-box)和标准的 W3C 盒子模型(content-box)。 区别：从图中我们可以看出，这两种盒子模型最主要的区别就是width 的包含范围。 在标准的盒子模型中，width 指 content 部分的宽度。 在 IE 盒子模型中，width 表示content+padding+border 这三个部分的宽度，故这使得在计算整个盒子的宽度时存在着差异： 标准盒子模型的盒子宽度：左右 borde..
CSS（二）——盒子模型
zg0601的博客
10-16 3314
CSS（二）——盒子模型
CSS盒子模型
zn1231的博客
10-19 1760
总结：如上图发现由于内边距设置得大了一些，设置的盒子尺寸又比较小，所以有一部分文字已经跑到盒子的边框外面了，所以在使用这种盒子模型的时候要尤其注意尺寸的设置。上图展示的是盒子的content，按照如上代码第一个盒子的宽度=50 (content)+20(padding)*2+2(border)*2=94。以margin为例，padding同理，为了看得更清楚一点我将盒子的宽高都设置成了一百。因为我将盒子的宽高都设置成相同的，所以不再计算盒子的高度。在设置标准盒子模型的宽高时，设置的是。
IE盒子模型和标准W3C盒子模型_资料收集
01-04
在CSS中存在两种主要的盒子模型：IE盒子模型（又称为怪异盒子模型）和标准W3C盒子模型。这两种模型对于元素的尺寸计算方式有所不同，了解这些差异对于确保网页在不同浏览器中的一致性显示至关重要。 #### 二、标准...
标准盒子模型和ie盒子
最新发布
03-08
标准盒子模型和IE盒子模型是CSS布局中用于计算元素尺寸的两种不同方式。 ### 标准盒子模型 (W3C 盒子模型) 根据 W3C 规范的标准盒子模型，元素的总宽度由以下几个部分组成： - **内容区域** (`content`): 这是实际...
标准盒子模型和IE盒子模型
Teheran的博客
02-22 564
标准盒子模型 IE盒子模型 网页中的盒子模型；我们常常要控制盒子模型的宽度width: w3c中的盒子模型的宽:包括margin+border+padding+width; width:margin*2+border*2+padding*2+width; height:margin*2+border*2+padding*2+height; iE中的盒子模型的width:也包括margin+...
《50道CSS基础面试题（附答案）》中的答案真的就只是答案吗？
weixin_34198583的博客
03-20 414
背景 想想自己为什么要写这个，难道不是因为这篇《50道CSS基础面试题（附答案）》文章最近被转载的多，比较多而凑热闹蹭热点？显然，肯定是因为这样我才打算写的。而且还有就是，我的公众号也很久没有更新了，微信说长期不更新会关掉公众号的，怕…… 对于 CSS 方面的工作以及跟 CSS 有关的东西，我已经有一些时间没有接触了，自从离开上家公司到了...
盒子模型(标准盒子和怪异盒子)
lpl_L的博客
08-26 1435
盒子模型 盒子模型(Box Model)： 盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 不同部分的说明： Margin(外边距) ：清除边框外的区域，外边距是透明的。 Border(边框) ：围绕在内边距和内容外的边框。 Padding(内边距) ： 清除内容周围的区域，内边距是透明的。 Content(内容) ： 盒子的内容，显示文本和图像。 标准盒子模型和怪异盒子模型 在怪异盒子模型下，一个块的总宽度
W3C标准盒模型和IE盒模型
binlety
08-02 1809
 标准W3C盒子模型：（内容content是一个独立的部分） 所以盒子总宽度为：width+border+padding  IE盒子模型： （width已经包含content border padding） 所以盒子总宽度为：width ...
盒子模型：css盒子和IE盒子
weixin_44713688的博客
07-14 735
html（8）盒子模型 css盒子 Margin(外边距) - 清除边框外的区域，外边距是透明的。 Border(边框) - 围绕在内边距和内容外的边框。 Padding(内边距) - 清除内容周围的区域，内边距是透明的。 Content(内容) - 盒子的内容，显示文本和图像。 最终元素的总宽度计算公式是这样的： 总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距 元素的总高度最终计算公式是这样的： 总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距
ie盒模型与标准盒模型下的设置颜色区域的宽度
xiaoxiaofly的博客
09-19 327
<style> .boxSty{ width: 100px; height: 100px; padding: 10px; background: red; } </style> <div class="boxSty"> 6666666666 <...
标准盒模型和 IE 盒模型
upup
03-02 400
对于标准盒模型和 IE 盒模型你了解多少？ 盒模型讲解 我们今天只会提到 标准盒模型，和 IE 盒模型，两种盒模型模式讲解。首先来看标准盒模型。 只要是盒模型都会有这四个属性 margin, border, padding, content 这四个部分。也就是说一个基本的盒模型由着四部分组成。样子如下： 这里要说明的是，为了体现出盒模型的层次感。这里的 content 和 padding 用了 不...
关于盒子模型css定义宽度与实际宽度
tongxinmiao的专栏
09-11 4935
css中定义的宽和高是指填充以里的内容范围，并不是一个盒子的实际宽度，一个盒子的实际宽度=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。行级元素和块级元素都是盒子模型。
CSS盒模型知识整理与理解（1）--- 基本概念
Yuval的博客
01-06 1553
CSS-盒模型知识整理与理解： CSS盒模型知识整理与理解（1）--- 基本概念 CSS盒模型知识整理与理解（2）--- 边距重叠问题详解 CSS-盒模型知识整理与理解（3）--- BFC详解   CSS盒模型知识整理与理解 --- 盒模型的基本概念 本文涉及知识： 盒模型的概念 标准模型和IE盒模型的区别 JS获取盒模型宽高的方法 盒模型的边距重叠问题 BFC的理解（概念、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值