标准盒模型和怪异盒模型

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

本文详细解释了标准盒模型与IE盒模型的区别，包括width、height、padding及border如何影响元素的实际大小，并介绍了box-sizing属性的作用。

简写：

盒模型


标准盒子模型中，width和height是content的长与宽 

而IE盒子模型中，width和height是content+padding+border区域的长与宽

在标准模式下，一个块的总宽度=width+margin(左右)+padding(左右)+border(左右)；

在怪异模式下，一个块的总宽度=width+margin(左右)（即width已经包含了padding和border的值）

当设置为box-sizing:content-box时，将采用怪异盒模型解析计算，也是默认模式。

当设置为box-sizing:border-boxA时,将采用怪异模式解析计算

PLA晓明
关注
前端基础(八)_盒子模型（标准盒子模型和怪异盒子模型）
见贤思齐焉，见不贤内自省
12-15 4145
盒子模型（标准盒子模型和怪异盒子模型）
详解CSS 怪异盒模型和标准盒模型
12-30
由于目前大部分主流的浏览器支持的是W3C标准盒模型（标准盒模型），也有保留对怪异盒子样式的解析，当然IE沿用的是自己标准的盒模型（怪异盒子模型） 用两个简单的例子分别介绍下这两个盒子模型： 标准盒模型： &lt...
css3 标准盒模型 怪异盒模型
qq_37639762的博客
02-15 431
盒模型组成：margin + border + padding + content 标准盒模型 默认(box-sizing:content-box) width = content 怪异盒模型(box-sizing:border-box) width = content + padding + border
标准盒子模型,与怪异盒子模型详解
wangxuanyang_zer的博客
10-22 2712
标准盒子模型和怪异盒子模型是前端开发中的重要概念，它们影响了元素的布局和渲染。大多数现代浏览器采用标准盒子模型，但在需要与旧版Internet Explorer等不符合标准的浏览器兼容时，可以考虑使用怪异盒子模型。前端开发者需要了解这两种模型的差异，以便在开发过程中更好地控制元素的外观和行为，同时确保跨浏览器兼容性。
标准盒模型和怪异盒模型的讲解
zy的博客
01-05 1115
目录 1. 什么是盒子模型？ 2. 盒模型分为几种？ 3. 标准模型和怪异模型的转换 4. JS盒模型 5.盒模型的使用 1. 什么是盒子模型？ 在HTML页面中，每一个元素都可以看作一个盒子。 这个盒子由：内容（content）、内边距（padding）、边框（border）、外边距（margin）四部分组成。 2. 盒模型分为几种？ 盒模型根据浏览器的不同，所使用的盒子模型也不一样。(IE使用的是怪异盒模型，但是在IE10以后，改用其他的了) 盒模型分为两种： 标准盒..
标准盒模型和怪异盒模型的区别
T_d_d的博客
03-01 464
盒模型一共有两种：标准盒模型和怪异盒模型 一、W3C标准盒子模型 我们可以看到，在标准盒模型下，内容区域的width和height是元素本身的width和height。 在标准模式下，块元素的总宽度= width + padding(左右) + border(左右) + margin(左右) 二、IE(怪异)盒模型 而怪异盒模型显而易见的区别就是，元素的width和height除了conten...
标准盒子模型和怪异盒子模型
05-02
标准盒子模型和怪异盒子模型是 CSS 中用于描述 HTML 元素的盒子模型。它们的差异在于如何计算盒子的宽度和高度。 标准盒子模型（content-box）指的是元素的宽度和高度只包括内容的宽度和高度，不包括边框（border）...
简单阐述标准盒模型和怪异盒模型的差别和区别
asd123abd的博客
03-16 1225
请阐述标准盒模型和怪异盒模型的差别？ 标准的盒子模型的大小是：content(区域内容大小)+padding(内边距)+border(边框)+margin(外边距)； 怪异盒子模型给元素添加Css3属性box-sizing:border-box; 正常盒模型和怪异盒模型的区别： 1.用途：正常盒模型主要用于PC端，怪异盒模型主要用于手机端。 2.原理：正常盒模型的大小是由内到外的，由内部决定外部的大小；而怪异盒模型是由外而内的。 ...
标准盒模型与怪异盒模型的区别 及 box-sizing的应用
weixin_44806034的博客
01-21 436
1、盒子模型（box model） 在HTML中，可以把元素看做盒子，盒子包括：实际内容（content）、内边距（padding）、边框（border）、外边距（margin） 2、标准盒模型与怪异盒模型 对比两种模型的区别 1.标准盒模型 标准盒模型（W3C盒子模型），设置的width或height是对 实际内容（content）的width或height进行设置，内容周围的border和padding另外设置，即盒子模型的width（height）=设置的content的宽高+padding+bo
【css那些事儿学习笔记】盒模型、盒模型标准模式和怪异模式下的尺寸计算方法...
weixin_30597269的博客
08-03 229
【css那些事儿学习笔记】 主题：【css那些事儿学习笔记】盒模型、盒模型标准模式和怪异模式下的尺寸计算方法 本单元学习情况：理解了 主要学习内容： 1、盒模型 2、盒模型计算方法 3、怪异模式及在怪异模式下的盒模型计算方法 转载于:https://www.cnblogs.com/lijinyong/archive/2011/08/03/2126569.html...
标准盒模型与怪异盒模型的区别
热门推荐
blog
12-24 1万+
一. 清除浮动的方式。 使用overflow属性来清除浮动 (overflow: hidden) 二. visibility: hidden 与 display: none 的区别。 三. 谷歌浏览器的盒子与IE浏览器的盒子区别。 四. 让盒子垂直水平居中的方式。
怪异盒子模型和标准盒子模型的宽度计算
bubbleSweet的博客
05-09 3736
一、标准盒子模型 由上图可以看到，width 只为盒子中内容 content 的大小，所以整个盒子的宽度可以计算为 width + padding（左右） + border（左右） + margin（左右） 二、怪异盒子模型 由上图可以看到怪异盒子模型中，width 为 content + padding（左右） + border（左右），因此整个盒子的宽度为 width + margin（左右） ...
标准盒子模型和怪异盒子模型（详解）
wwwjjjjj666的博客
11-24 9877
标准盒子模型和怪异盒子模型（详解）
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值