box-sizing中的IE盒子模型和标准盒子模型

最新推荐文章于 2024-07-20 22:27:34 发布
最新推荐文章于 2024-07-20 22:27:34 发布
阅读量408 收藏
点赞数
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46176479/article/details/107736054
版权

1.IE盒子模型box-sizing:border-box

在这里插入图片描述
width和height包含padding和border在内。
盒子的实际宽度=width（padding和border不会影响实际宽度）
盒子的实际高度=height（padding和border不会影响实际高度）

2.标准盒子模型box-sizing:content-box

在这里插入图片描述

width和height不包含padding和border在内。
盒子的实际宽度=width+padding+border
盒子的实际高度=height+padding+border

nhw649
关注
专栏目录
详解CSS3中的box-sizing（content-box与border-box）
12-14
content-box：标准盒模型，又叫做 W3C盒模型，一般在现代浏览器中使用的都是这个盒模型 border-box：怪异盒模型，低版本IE浏览器中的盒模型 现代浏览器和IE9+默认值是content-box。 语法格式： box-sizing：content-...
【CSS】标准盒模型和IE盒模型（box-sizing:border-box）
y_coder的博客
05-22 2344
换句话说，边框和内边距的尺寸会从元素的内容区域中减去，使得内容区域的尺寸保持不变。例如，如果一个元素的宽度设置为200px，内边距设置为10px，边框设置为5px，那么元素的内容区域的宽度将为200px - 2 * 10px - 2 * 5px = 170px。content-box 是 CSS 盒子模型的默认值，因此在不指定盒子模型属性时，浏览器会默认使用 content-box 来计算盒子的宽度和高度。在Web开发中，每个元素都被视为一个矩形的盒子，由内容区域、内边距、边框和外边距组成。
什么是盒子模型？IE盒模型与Chrome盒模型的区别？box-sizing的用法
qq_36507046的博客
10-15 1142
什么是盒子模型？IE盒模型与Chrome盒模型的区别？box-sizing的用法
web两种盒子模型详解
最新发布
Yoahcc的博客
07-20 1071
前端两种 盒子模型 深入学习
IE盒子模型box-sizing:border-box
weixin_43444977的博客
05-05 426
box-sizing:content-box; // 标准盒子模型 box-sizing:border-box: //IE盒子模型
box-sizing -- 盒模型
weixin_30454481的博客
12-19 129
　　项目开发中，在浏览同事的代码，发现他经常用一个属性--box-sizing，很好奇是什么，于是乎，上网查阅资料学了起来。　　首先我们先复习一下盒模型的组成：一个div通常由 content(内容)+margin+padding+border组成。 　　 　　浏览器有两种盒模型：w3c说的标准模型和ie下的传统模型。也就是css3中box-sizing中对应的属性值。 　　拿盒子的尺寸来...
IE11 下使用 flex 布局 box-sizing 失效的问题
beijixing333y的博客
02-04 2001
问题场景： 解决 IE11 下 使用 flex 布局 box-sizing 失效的问题 问题描述： 采用 flex 布局方式，每行呈现四个元素，超过个数就换行显示。布局大概如下图： <div class="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> &
css3 盒模型以及box-sizing属性全面了解
12-13
在CSS中，这些矩形盒子用标准盒模型来描述。这个模型描述了一个元素所占用的空间。每一个盒子有四条边界：外边距边界margin, 边框边界border, 内边距边界padding与内容边界content。 在W3C模型中: 总宽度 = margin-...
IE盒子模型和标准W3C盒子模型
12-09
主要有两种盒子模型：**IE盒子模型**和**标准W3C盒子模型**。 **标准W3C盒子模型**遵循Web标准，它将每个HTML元素视为一个矩形盒子，包括四个部分：**内容(content)**、**内边距(padding)**、**边框(border)**和**...
CSS3 box-sizing属性详解
09-24
在Web开发中，CSS3的box-sizing属性是一个非常重要的布局工具，它允许开发者改变元素的盒模型，从而更好地控制元素的尺寸和布局。这个属性主要解决了不同浏览器对于盒模型解析方式的差异问题，使得开发者能够更一致...
网页里的两种盒子模型(W3C盒子模型、IE盒子模型)
09-22
将`box-sizing`设置为`border-box`可以让元素遵循IE盒子模型，而`content-box`则保持W3C盒子模型的标准行为。 例如： ```css /* 让所有元素都遵循W3C盒子模型 */ * { box-sizing: content-box; } /* 或者只为特定...
前端开发中padding与边框是否包含进height和width的情况
热门推荐
hepcwl的专栏
03-05 2万+
在网页排版时经常会遇到padding或边框有时会包含在height或width里有时又不包含的情况。那么什么时候会包含，什么时候又不包含呢？ 首先，任何情况下margin都不包含在height和width内。而padding与边框是否包含则有两种情况。 第一种情况： 在标准盒子模型中 第二种情况： css3里有一个属性box-sizing
table的box-sizing在不同浏览器下的表现不一样
这个昵称没有被占用吧的博客
03-07 1747
下面通过一个实例来说明该属性： <style> html * { margin: 0; padding: 0; } table { width: 100%; border: 1px solid red; box-sizing: content-box!important; ...
Box-Sizing
精彩人生
02-16 2270
来自：http://www.w3cplus.com/content/css3-box-sizing box-sizing是CSS3的box属性之一。一说到CSS的盒模型（Box model）我想很多人都会比较烦，特别是对于新手，然而这个Box model又是我们CSS运用中比较重要的一个属性。那么CSS3的Box-sizing跟盒模型有什么关系呢？第一句话就说了，Box-sizing是CSS
CSS3 box-sizing属性和IE盒模型
Muge
03-17 8245
盒模型是CSS中很重要的概念，但很多人不知道的是IE5.5及更早的IE浏览器采用的不是标准盒模型，我们称之为IE盒模型。标准盒模型的组成部分有：margin + border + padding + content，content部分的width height不包含border和padding。而在IE盒模型中，块级元素的width, height包含了border和padding。这里截取网上的两
IE盒模型和CSS3中box-sizing属性
退回原地等待的博客
04-23 810
标准盒模型–margin+border+padding+content IE盒模型–margin+content（IE5.5及更早） IE盒模型中，content的宽高包含border和padding 改变padding和border时，对布局的影响 标准盒模型下，改变border和padding都会使整个box的宽高改变。 IE盒模型下，一旦设置了width和heig...
盒子模型，box-sizing属性以及标准盒子和IE盒子的区别。
diooo_的博客
07-08 343
盒子模型，box-sizing属性以及标准盒子和IE盒子的区别。
CSS3:box-sizing:不再为盒子模型而烦恼
CRPER
08-19 4744
题外话:W3C奉行的标准,就是content-box,就是需要计算边框,填充还有内容的;但是就我个人而言, 比较喜欢的是传统IE6时候的怪异模式,不用考虑容器是否会被撑开(打乱布局);盒子模型差异盒子大小计算原理W3C标准盒子 = (边框 + 填充 + 内容块大小) ,牵一发而动全身; 传统IE6盒子 = 整体宽高(边框,填充和边距随盒子大小而调整变化)若是计算占用位置,两中盒子都要算上ma
盒模型 box-sizing: border-box; / content-box;
漂亮小姐姐的博客
11-24 563
标准盒模型content-box 它的最大特点是，当已经设定了width和height值的时候，padding和border不被包含在你定义的width和height之内，也就是说，你定义的width只负责content区域的宽度，如果想得到整个盒子宽度，需要再加上padding和border的厚度。 这个content-box就是标准模型，诞生最早。content-box顾名思...
css的盒子模型box-sizing
09-21
box-sizing是用来改变CSS盒子模型的属性，它可以改变元素宽高的计算方式。...content-box对应的是标准盒子模型，而border-box对应的是怪异盒子模型，也是在IE中使用的盒子模型。 回答完问题后，我还可以提供一些
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值