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

最新推荐文章于 2024-07-11 17:05:07 发布
最新推荐文章于 2024-07-11 17:05:07 发布
阅读量1.7k 收藏 2
点赞数
分类专栏： css 文章标签： css css3 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43294560/article/details/104004769
版权

标准盒子:width即设置内容区域宽度,不包括内边距、边框、外边距;
怪异盒子:width包括内容区域、内边距和边框,不包括外边距
标准盒子设置方式:box-sizing:content-box;
怪异盒子设置方式:box-sizing:border-box;
设置原因:标准盒子的宽高设置后会因为padding而被撑开,导致内容移动,怪异盒子则会固定

设置width='200px’时:

标准盒子:
在这里插入图片描述
怪异盒子:
在这里插入图片描述

神奇大叔
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
自学前端第十天 : CSS怪异盒子模型
weixin_47592060的博客
05-04 2429
一.怪异盒子模型 怪异盒模型是IE盒子模型 我们可以通过 css 样式 box-sizing来进行切换 select { box-sizing: border-box; /* 怪异盒子模型 */ box-sizing: content-box; /* 标准盒子模型 */ } 怪异盒子模型的 宽度 高度计算 和标准盒子模型计算方式不同 怪异盒子模型的 content内容宽度会把padding和border算入其中 是由外而内的计算宽度 二.标准盒子和怪异盒子: 1.标准模型下 宽度计算方式
css盒子模型
08-22
CSS盒子模型有两种类型：W3C标准盒子模型和IE盒子模型（也称为怪异盒模型）。在标准模型中，元素的总宽度和高度等于内容区域加上内边距和边框；而在IE模型中，总尺寸仅包含内容区域，内边距和边框被加到了总宽度和...
CSS3 盒子模型
不要让努力成为一种奢望，它应该如同呼吸一样自热而然。
04-02 1430
HTML5和CSS3-7(8)-2
css盒模型——标准盒子、怪异盒子
帥潔的博客
07-11 1172
CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。1、网页中所有元素都具备以下四个属性 （用来对元素进行布局）：2、盒子模型分为两种：1、标准盒模型中、指的是内容区域的宽高 2、怪异盒模型中的 、 指的是的宽高 1、作用： 属性是用来切换盒模型2、的常用属性：...
css-标准盒子与怪异盒子
qq_45033897的博客
07-19 3811
css中标准盒子模型与怪异盒子模型的区别
前端基础(八)_盒子模型（标准盒子模型和怪异盒子模型）
见贤思齐焉，见不贤内自省
12-15 3807
盒子模型（标准盒子模型和怪异盒子模型）
css怪异盒子模型,CSS3弹性盒---怪异盒
weixin_35782943的博客
08-04 2709
怪异盒模型box-sizing:content-box 标准盒模型 总宽/高度=width+左右/上下padding+左右/上下borderbox-sizing:border-box 怪异盒模型(IE盒模型) 总宽/高度=width(包含padding和border)弹性盒特点：1、在弹性盒里，所有子元素按照“主轴”排列2、在弹性盒里，所有...
CSS中的标准盒子模型和怪异盒子模型
分享互联网的有趣知识~
05-09 2887
一、什么是盒子模型(Box Model) 盒子想必大家都是知道的吧！ 生活中我们的快递有盒子包装着，买的蛋糕也是有盒子包装着，我们的礼品也是被盒子包装着。 模型是什么呢？ 它是主观意识借助实体或者虚拟表现构成客观阐述形态结构的一种表达目的的物件 css中的盒子模型它是可以对元素进行布局，设置距离的大小，这里面包括含有外边距、边框、内边距和内容主体这四个部分。 二、CSS中的标准盒子模型(W3c标准的盒子模型) CSS中的盒子模型也是主观意识借助实体或者虚拟表现构成客观阐述形态结构的一种表达目的的物
标准盒子模型和怪异盒子模型（详解）
wwwjjjjj666的博客
11-24 8217
标准盒子模型和怪异盒子模型（详解）
标准盒模型和怪异盒子模型的区别
最新发布
zhugedali_的博客
07-11 589
同理，内容区域的高度为 100px，加上上下内边距各 20px，高度变为 100 + 20×2 = 140px，加上上下边框各 10px，高度变为 140 + 10×2 = 160px，再加上上下外边距各 10px，最终在垂直方向占据的总高度为 160 + 10×2 = 180px。- 内边距在内容区域的四周，左右内边距各 20px，所以加上内边距后，水平方向的宽度变为 200 + 20×2 = 240px。- 设置的宽度（width）包括了内容区域、内边距和边框的宽度。
详解CSS 怪异盒模型和标准盒模型
12-30
由于目前大部分主流的浏览器支持的是W3C标准盒模型（标准盒模型），也有保留对怪异盒子样式的解析，当然IE沿用的是自己标准的盒模型（怪异盒子模型） 用两个简单的例子分别介绍下这两个盒子模型： 标准盒模型： &lt...
CSS盒子模型的应用
08-22
CSS有两种盒子模型：IE盒子模型（也称怪异盒子模型）和标准盒子模型。默认情况下，现代浏览器使用标准盒子模型，其中元素的总宽度和高度由内容宽度+边框+内边距+外边距组成。而在IE6及以下版本中，元素宽度仅包含...
css盒子模型图解
12-13
然而，Internet Explorer（IE）采用了不同的盒子模型，称为IE盒模型或怪异盒模型。在这个模型下，内容区域包括了边框和内边距，使得元素的实际大小和占据的空间相等。因此，上述例子在IE盒模型下，元素的总宽度为...
网页里的两种盒子模型(W3C盒子模型、IE盒子模型)
09-22
IE盒子模型，又称怪异盒模型，是Internet Explorer早期版本（尤其是IE5和IE6）采用的模型。在这个模型中，元素的宽度(width)和高度(height)已经包含了内边距和边框，因此在计算总尺寸时，不需要额外加上这些值。这...
css ::after和::before详解
weixin_43294560的博客
10-09 7411
伪元素:before和:after添加的内容默认是inline元素 <style> p:before{content: "hello "} p:after{content: "you are handsome!"} </style> <p>xx!</p> 等价于下面的html结构: <p> <span>hello </span> xxx! <span>
css margin:auto的使用
weixin_43294560的博客
12-09 5163
块级元素使用margin:auto水平居中: div { width: 200px; height: 200px; margin: 0 auto; } 块级元素margin:auto不能垂直居中的原因: 在 display: block 中，如果 margin-left 和 margin-right 都是 auto，则它们的计算值相等，从而导致元素的水平居中。( 这里的计算值为元素剩余可用剩余空间的一半) 而如果 margin-top 和 margin-bottom 都是
display从none变成block使用动画过渡
weixin_43294560的博客
01-03 4200
transition过渡不生效 animation动画生效 代码示例: 去掉.jf-drawer-container-hide类后,帧动画生效 .jf-drawer-container { display: block; position: fixed; z-index: 2000; width: 100%; height: 100%; box-sizing: border-box; overflow: hidden; background-color: #ccc; } .
怪异盒子模型和标准盒子模型
03-29
而怪异盒子模型指的是IE6及其以下版本中使用的盒模型，即元素的宽度和高度只包括内容区域，不包括内边距和边框。这种模型在布局上容易产生问题，且在不同浏览器中表现不一致。 为了解决浏览器兼容性问题，CSS3规范...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值