标准盒模型和怪异盒模型——之转生在异世界学前端

于 2024-04-04 21:43:57 发布
阅读量406 收藏
点赞数 15
文章标签： 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/duyan0828/article/details/137383074
版权
本文详细解释了怪异盒模型的由来，它源于IE浏览器对W3C标准的不完全遵循。主要介绍了标准盒模型与怪异盒模型的区别，以及它们在宽度计算上的差异，包括盒模型的宽度属性和`box-sizing`设置。
摘要由CSDN通过智能技术生成

首先说一下怪异盒模型的形成原因：因为大部分浏览器都是采用W3C标准模型，而IE浏览器有着自己的Microsoft标准，怪异模型是在浏览器采用了W3C的标准下，又保留了原来的浏览器解析样式，就会触发怪异盒模型因为只有IE浏览器种会发生这种情况所以又叫IE盒模型

标准盒模型盒怪异盒模型的区别是他们的属性width包含的属性内容不同

标准盒模型的总宽度=width+padding+border+margin

怪异盒模型的总宽度=width+margin  (它的width包含了content，padding，border)

当怪异盒模型设置内边距和边框大小时，它的盒子大小不会变化，内容会随着padding和border的大小而进行压缩

标准盒模型在设置padding和border时，盒子大小会改变

设置标准盒模型的代码是box-sizing：content-box(默认模式)

设置怪异盒模型的代码是box-sizing：border-box

任何一人一人
关注
期末前端web大作业：用DIV+CSS技术设计的动漫网站——火影忍者6页 带报告
而风不止
11-27 1005
采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为（1）html文件：其中index.html是首页、其他html为二级页面； （2）css文件：css全部页面样式,文字滚动, 图片放大等； （3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner
期末前端web大作业：用DIV+CSS技术设计的动漫网站——关于我转生成史莱姆这件事 6页
11-24 144
HTML网页设计制作大作业（div+css） 个人设计web前端大 采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为（1）html文件：其中index.html是首页、其他html为二级页面； （2）css文件：css全部页面样式,文字滚动, 图片放大等； （3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner
标准盒模型（w3c标准）和 怪异盒模型（IE标准）
z980498059的博客
12-01 3713
盒模型的理解
前端基础之HTML+CSS（六）
Flynn的博客
07-24 107
本篇主要介绍了CSS的多种布局方式：弹性盒布局、多列布局、响应式布局、网格布局。
标准盒子模型,与怪异盒子模型详解
最新发布
wangxuanyang_zer的博客
10-22 2087
标准盒子模型和怪异盒子模型是前端开发中的重要概念，它们影响了元素的布局和渲染。大多数现代浏览器采用标准盒子模型，但在需要与旧版Internet Explorer等不符合标准的浏览器兼容时，可以考虑使用怪异盒子模型。前端开发者需要了解这两种模型的差异，以便在开发过程中更好地控制元素的外观和行为，同时确保跨浏览器兼容性。
IE盒模型（怪异盒模型）
GANKB的博客
02-03 546
IE盒模型（怪异盒模型） 触发条件：box-sizing: border-box; 标准盒模型： 总盒高 = padding（上下）+ border（上下）+ height 总盒宽 = padding（左右）+ border（左右）+ width IE盒模型(怪异盒模型): 总盒高 = height 总盒宽 = width ...
标准盒模型与怪异盒模型的区别
blog
12-24 1万+
一. 清除浮动的方式。 使用overflow属性来清除浮动 (overflow: hidden) 二. visibility: hidden 与 display: none 的区别。 三. 谷歌浏览器的盒子与IE浏览器的盒子区别。 四. 让盒子垂直水平居中的方式。
web网页设计期末课程大作业：动漫主题网站设计——关于我转生史莱姆这件事(6页)HTML+CSS
08-10
- **多媒体元素**: 在页面中融入了视频、音频和Flash等多媒体元素，增加了网页的吸引力和娱乐性。 - **表单设计**: 提供了表单设计，方便用户提交信息或评论。 - **二级、三级页面**: 设计了多层页面结构，包括二级...
完整版转生模块.rar
04-03
2. **数据持久化**：在转生过程中，保存和恢复用户数据是至关重要的，这涉及到数据库设计和数据序列化技术。 3. **事件驱动编程**：转生可能由特定的触发事件（如用户选择、达到特定条件）启动，这可能涉及到事件...
盒子模型（含ie8--怪异盒子模型）
weixin_30896825的博客
12-20 165
盒子模型包括：centent（内容）、border（边框）、padding（内边距）、margin（外边距） HTML: <div>centent</div> CSS: div{ height: 200px; width: 200px; padding: 10px;...
标准盒模型和怪异（IE）盒模型
yangyiqi的博客
08-05 378
文章参考来源：https://www.cnblogs.com/yky-iris/p/7719895.html 盒子模型的本质就是一个盒子，是一个包围HTML元素的空间，包括：content,border,margin,padding 盒模型分为标准盒模型和怪异（IE）盒模型两种 标准盒模型的计算为：标准盒模型的宽度 = width + 左右margin + 左右padding + ...
css 怪异盒子模型(ie盒子)
weixin_43294560的博客
01-16 1751
标准盒子:width即设置内容区域宽度,不包括内边距、边框、外边距; 怪异盒子:width包括内容区域、内边距和边框,不包括外边距 怪异盒子设置方式:box-sizing:border-box; 设置width='200px’时: 标准盒子: 怪异盒子: ...
普通盒模型和怪异盒模型
Zheng_xinle的博客
08-26 7106
盒模型 一、什么是盒模型？ 1.根据盒子模型的概念，每个在页面上的元素都是一个拥有宽，高，内边距，边框和外边距的长方形盒子。 2.盒模型分为两种:分别是W3C标准盒模型（普通盒模型）和IE盒模型（怪异盒模型） ![在这里插入图片描述](https://img-blog.csdnimg.cn/2020082620580221.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmN
标准盒子模型和IE盒子模型
热门推荐
zyuzixiao的专栏
01-24 5万+
盒子模型是css中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型。他们对盒子模型的解释各不相同，先来看看我们熟知的标准盒子模型： 从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。 　从上图可以看到 IE 盒子模型的范围也
CSS-怪异盒模型和标准盒模型
Neokekeke的博客
12-18 2789
在html文档中，每个渲染在页面中的标签都是一个个盒子模型。 盒子模型又分为 ： W3C标准的盒子模型 和 IE标准的盒子模型。 由于目前大部分主流的浏览器支持的是W3C标准盒模型（标准盒模型），也有保留对怪异盒子样式的解析，当然IE沿用的是自己标准的盒模型（怪异盒子模型） 用两个简单的例子分别介绍下这两个盒子模型：标准盒模型：<!--html--> <div class="box1">
H5基础——(5)怪异盒模型、弹性盒模型、倒影及阴影
Erosvan的博客
09-24 4008
一、怪异盒模型 怪异盒模型 .reddiv { width: 200px; height: 200px; background-color: red; box-sizing: border-box; border: 20px blue solid; padding-left: 50px; /*怪异盒模型
CSS中的标准盒子模型和怪异盒子模型
分享互联网的有趣知识~
05-09 2932
一、什么是盒子模型(Box Model) 盒子想必大家都是知道的吧！ 生活中我们的快递有盒子包装着，买的蛋糕也是有盒子包装着，我们的礼品也是被盒子包装着。 模型是什么呢？ 它是主观意识借助实体或者虚拟表现构成客观阐述形态结构的一种表达目的的物件 css中的盒子模型它是可以对元素进行布局，设置距离的大小，这里面包括含有外边距、边框、内边距和内容主体这四个部分。 二、CSS中的标准盒子模型(W3c标准的盒子模型) CSS中的盒子模型也是主观意识借助实体或者虚拟表现构成客观阐述形态结构的一种表达目的的物
05 - 标准盒模型和怪异盒子模型
xyyojl的博客
07-27 1027
两种盒子模型 普通盒模型: 普通盒模型触发方式: box-sizing: content-box; 宽高到底怎样计算? 正常情况:(普通盒模型)内容盒子 盒子的整体宽度 = width + border + padding/左border+左padding+width+右padding+右border 盒子的整体高度 = height+ border + padding/上b...
标准盒模型和IE怪异盒模型
wenjiusui8083的博客
03-02 6624
以上几种DOCTYPE都是标准的文档类型，无论使用哪种模式完整定义DOCTYPE，都会触发标准模式，而如果DOCTYPE缺失则在ie6，ie7，ie8下将会触发怪异模式（quirks 模式）。首先定义一个div块用来演示标准模式和怪异模式的区别，以下是Css样式.box { width: 200px; height: 200px; border: 20px solid bl...
易语言源码转生模块的功能与实现
11. 功能模块化（Functional Modularity）：在转生过程中，可能会对原程序的架构进行调整，实现更清晰的模块划分，便于后续的维护和开发。 易语言源码转生模块的具体实现细节、功能特性和适用场景需要通过查阅该...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值