-
让品牌有温度、有情感
专注品牌策划15年
ie盒子和标准盒子（ie盒子和标准盒子模型的区别）
发布时间：2023-04-07 14:14:56
稿源：
创意岭 阅读：
107
大家好！今天让创意岭的小编来大家介绍下关于ie盒子和标准盒子的问题，以下是小编对此问题的归纳整理，让我们一起来看看吧。
开始之前先推荐一个非常厉害的Ai人工智能工具，一键生成原创文章、方案、文案、工作计划、工作报告、论文、代码、作文、做题和对话答疑等等
只需要输入关键词，就能返回你想要的内容，越精准，写出的就越详细，有微信小程序端、在线网页版、PC客户端
创意岭作为行业内优秀的企业，服务客户遍布全球各地，如需了解相关业务请拨打电话175-8598-2043，或添加微信：1454722008
本文目录:
一、介绍一下标准的css的盒子模型？与低版本ie的盒子模型有什么不同的
标准的css盒子模型：他的宽度=内容的宽度+边框的宽度+加上内边具的宽度
比如：.box{width:100px;border:10px solid #ccc;padding:10px}
那么标准的css盒子模型中的box这个的总的宽度就是140px=100+10+10+10+10；
但是低版本ie的盒子模型box的宽度还是100px，
二、浏览器盒子模型——CSS基础篇
浏览器盒子模型
一般来说有两种：IE版和标准W3C版
IE版和W3C版主要差别在于IE把border和padding都算进width中，而W3C版的则是width只包括content
默认浏览器会使用标准模型。如果需要使用替代模型，您可以通过为其设置box-sizing: border-box来实现。 这样就可以告诉浏览器使用border-box来定义区域，从而设定您想要的大小。
.box{
box-sizing:border-box;
}
如果你希望所有元素都使用替代模式，而且确实很常用，设置box-sizing在<html>元素上，然后设置所有元素继承该属性，正如下面的例子。如果想要深入理解，请看 the CSS Tricks article on box-sizing 。
html{
box-sizing:border-box;
}
*, *::before, *::after{
box-sizing:inherit;
}
三、面试题：怎么理解盒模型？
回答问题的时候要整理思路，也就是你的思考方式是怎么样的？
1） 盒模型有两种，W3C 和IE 盒子模型
1、W3C定义的盒模型包括margin、border、padding、content，元素的宽度width=content的宽度
2、IE盒模型与W3C盒模型的唯一区别就是元素的宽度，元素的width=border + padding + content
2） 对盒模型的理解
IE定义的盒模型较为合理，所以在css3中新增了box-sizing，包含两个属性content-box和border-box。
（1） content-box 元素的width = content
（2） border-box 元素的width = border + padding + content
3）更多理解
对于行内元素 margin-top/margin-bottom对于上下元素无效，margin-left/margin-right有效
对于相邻的块级元素margin-top和margin-bottom两者叠加按照一定的规则
（1） 都是整数 margin值取两者的最大值
（2） 都是负数 margin值取最小值
（3）两者正负相反，margin值取两者之和
再往深的说就是bfc的理解了。
四、浏览器标准模式和怪异模式的区别
一.标准模式和怪异模式
二.区别
1. 盒模型
在怪异模式下，浏览器的盒模型为IE盒模型；而在标准模式下。浏览器的盒模型则为标准盒模型。二者的区别在于对元素宽高的计算不一样。
IE盒模型
标准盒模型
2. 图片的垂直对齐方式
对于 inline 和 table-cell 的元素来说，
标准模式下 vertical-align 属性的默认值为 baseline ；
怪异模式下 vertical-align 属性的默认值为 bottom 。
3. 元素的溢出处理
标准模式下 overflow 的默认值为 visible ；
怪异模式下元素溢出的内容不会被裁减，元素的大小由其内容决定，自动调整。
4. 内联元素的尺寸
标准模式下inline元素是无法自定义设置宽高的，而在怪异模式下width和height是可以影响其大小的。
5. table元素中的字体
CSS中，对于font的属性都是可以继承的，但是在怪异模式下，对于table元素，字体的某些属性将不会从body等其他元素中继承得到，特别是font-size属性。
6. 元素的百分比宽度
CSS中对于元素的百分比高度规定：百分比为元素包含块的高度，不可为负值；如果包含块的高度没有显示给出，该值等同于auto，所以百分比的高度必须是在元素有高度声明的情况下使用。
当一个元素使用百分比高度是，标准模式下，高度取决于内容变化，怪异模式下，百分比高度被准确应用
以上就是关于ie盒子和标准盒子相关问题的回答。希望能帮到你，如有更多相关问题，您也可以联系我们的客服进行咨询，客服也会为您讲解更多精彩的知识和内容。
推荐阅读：
澳大利亚ChatGPT情感（澳大利亚tripviewlite）
赣公网安备 50019002502384号
