CSS-标准盒模型和怪异盒模型

最新推荐文章于 2024-03-22 16:17:03 发布
最新推荐文章于 2024-03-22 16:17:03 发布
阅读量204 收藏
点赞数
分类专栏： 前端 CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/silence_xiang/article/details/108428168
版权
前端 同时被 2 个专栏收录
16 篇文章 0 订阅
订阅专栏
CSS
1 篇文章 0 订阅
订阅专栏

这是一个目录~

标准盒模型和怪异盒模型

标准盒模型:由w3c定义的标准的盒子模型,盒子的宽度为= margin2+padding2+border2+width
怪异盒模型(也称为IE盒模型):在IE浏览器中的盒子模型,盒子的宽度为= margin2 + content宽度,其中content宽度为padding2+border2+ width,在以前IE5.5以及更早的IE浏览

标准盒模型和怪异盒模型之间的切换

使用CSS3属性,box-sizing使用content-box表示按照标准盒模式解析,border-box表示按照怪异盒模式解析

silence_xiang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS -- 盒子模型（含前端面试题）
qq_48802092的博客
07-22 655
说一说盒子模型？区别？ 1.盒子种类： 1.w3c盒子/内容盒子/标准盒子 box-sizing:content-box 2.边框盒子 IE盒子 怪异盒子 box-sizing:border-box
前端入门教程：CSS标准盒模型和怪异盒模型区别
艾编程带你学前端博客
12-13 409
一张图来理解盒模型的5个属性父子间间距，通过给父元素设置padding来实现兄弟间间距，通过给元素设置margin来实现。
标准盒模型与怪异盒模的区别.html
02-23
介绍了css中盒模型的一些属性的位置设置和标准盒模型与怪异盒模型的一些区别，他们的区别在于标准盒模型与怪异盒模型的大小计算的不同。
CSS盒子模型和怪异盒子模型
dx_zheng的博客
07-14 405
盒子模型与怪异模型展示效果差异： 标准盒子(W3c标准)：大小 = width(content) + border + padding + margin 怪异盒子(IE标准)：大小 = width(content + padding + border) + margin 布局采用哪种盒子模型，通过属性box-sizing可以设置： content-box： 默认值，border和padding不算到width范围内，可以理解为是W3c的标准模型(default) border-box：borde
css盒模型：标准盒模型、怪异盒模型
最新发布
m0_74114605的博客
03-22 1281
目前大部分主流的浏览器支持的是W3C标准盒模型。
【CSS】标准盒模型和怪异盒模型
流萤梦的博客
10-27 796
盒模型的组成： content（内容） padding（内边距） border（边框） margin（外边距） 那常见的盒子模型有哪些呢？ 主要是两种：标准盒模型和怪异盒模型。 它俩有什么区别呢？区别主要在于宽高的计算。 1、标准盒模型 如上图，我们可以很明显的看到这里的宽高就是content的宽高。 宽：width = content（内容）的宽 高：height = content（内容）的高 2、怪异盒模型（IE盒模型） 如图所示，怪异盒模型的宽高是包括了content、.
标准盒模型和怪异盒模型
m0_64204485的博客
07-21 743
怪异盒模型，标准盒模型的精讲
详解CSS 怪异盒模型和标准盒模型
12-30
由于目前大部分主流的浏览器支持的是W3C标准盒模型（标准盒模型），也有保留对怪异盒子样式的解析，当然IE沿用的是自己标准的盒模型（怪异盒子模型） 用两个简单的例子分别介绍下这两个盒子模型： 标准盒模型： &lt...
CSS+盒模型,css盒模型面试题,HTML
09-10
CSS盒模型有两种不同的实现方式，即标准盒模型（W3C盒模型）和IE盒模型（怪异盒模型）。两者的主要区别在于元素的总宽度和高度的计算方式。 - **标准盒模型**：元素的总宽度和高度只包括内容区域的宽度和高度，内...
标准盒子模型,与怪异盒子模型详解
wangxuanyang_zer的博客
10-22 1725
标准盒子模型和怪异盒子模型是前端开发中的重要概念，它们影响了元素的布局和渲染。大多数现代浏览器采用标准盒子模型，但在需要与旧版Internet Explorer等不符合标准的浏览器兼容时，可以考虑使用怪异盒子模型。前端开发者需要了解这两种模型的差异，以便在开发过程中更好地控制元素的外观和行为，同时确保跨浏览器兼容性。
CSS 盒模型和怪异盒模型
liuqiao0327的专栏
08-15 915
CSS 盒模型和怪异盒模型 一.概念 盒模型是CSS布局的基石,它规定了网页元素如何显示以及元素间相互关系,CSS定义所有元素都可以拥有像盒子一样的外形和平面空间,即都包含内容区,补白(填充,内边距),边框,边界(外边距) 下面图片说明了盒子模型: Margin(外边距):在元素外边的空白区域,被称为外边距 Border(边框): 元素的边框 Padding(内边距) 元素内容到元素的边框之间的距离,也称补白. Content 盒子的内容 二.标准盒模型和IE盒模型 盒模型又分为标准盒模型(W3
CSS标准盒子模型和怪异盒子模型
m0_61672533的博客
12-27 1109
CSS标准盒子模型和怪异盒子模型
CSS盒子模型与怪异盒模型
weixin_30902675的博客
08-09 3067
盒子模型（Box Modle）可以用来对元素进行布局，包括内边距，边框，外边距，和实际内容这几个部分。 盒子模型分为两种 第一种是W3c标准的盒子模型（标准盒模型）、第二种IE标准的盒子模型（怪异盒模型） 当前大部分的浏览器支持的是W3c的标准盒模型，也保留了对怪异盒模型的支持，当然IE浏览器沿用的是怪异盒模型。怪异模式是“部分...
普通盒模型和怪异盒模型
Zheng_xinle的博客
08-26 6993
盒模型 一、什么是盒模型？ 1.根据盒子模型的概念，每个在页面上的元素都是一个拥有宽，高，内边距，边框和外边距的长方形盒子。 2.盒模型分为两种:分别是W3C标准盒模型（普通盒模型）和IE盒模型（怪异盒模型） ![在这里插入图片描述](https://img-blog.csdnimg.cn/2020082620580221.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmN
CSS标准盒模型和怪异盒模型区别
qq_59181609的博客
08-14 1448
3.当怪异盒模型的宽高确认时，给怪异盒模型添加内边距和边框，怪异盒模型的宽高不会改变，而是通过向内压缩，挤压 content 内容的宽高实现。即外边距，边框，内边距，内容。2.怪异盒模型在计算宽高时包含 conntent 内容、padding内边距、border边框的宽高。2.标准盒模型在计算宽高的时候只计算 content 内容的宽高，不包含内外边距以及边框的宽高。3.当标准盒模型的宽高确认时，增加内外边距和边框会撑大原盒子。表示IE盒模型（怪异盒模型）表示标准盒模型（默认值）...
标准盒模型与怪异盒模型
qq_43541679的博客
01-12 299
盒模型 css 中盒模型有两种，分别是标准模式和怪异模式。 两种模式的区分 使用document.compatMode将会得到"CSS1Compat"或"BackCompat"，其中"CSS1Compat"是标准模式，"BackCompat"是怪异模式。 两种模式的区别 默认情况下为标准模式（box-sizing: content-box），标准模式宽高不包括内边距和边框。而怪异模式下（box-sizing: border-box），内边距和边框是计算在宽高里的。 标准模式 <!DOCTYPE
前端基础(八)_盒子模型（标准盒子模型和怪异盒子模型）
见贤思齐焉，见不贤内自省
12-15 3876
盒子模型（标准盒子模型和怪异盒子模型）
前端学习-盒模型和怪异盒模型
weixin_51346866的博客
03-01 230
标准盒模型与怪异盒模型的区别，看图更直观，所以应用网上。
css盒模型标准和怪异
07-27
CSS盒模型有两种标准：标准盒模型和怪异盒模型。 标准盒模型是CSS的默认盒模型，它将元素的宽度和高度定义为内容区域的宽度和高度。也就是说，元素的宽度和高度不包括边框和内边距。 而怪异盒模型是一种老旧的盒...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值