【怪异解析-盒模型】

最新推荐文章于 2020-04-15 22:50:56 发布
最新推荐文章于 2020-04-15 22:50:56 发布
阅读量1.3k 收藏
点赞数 1
分类专栏： 【HTML+CSS】 【HTML/CSS】 【全栈工程师】 文章标签： 前端 html css 盒模型 w3c
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/M_agician/article/details/72633452
版权

【怪异解析-盒模型】


怪异解析 - IE6盒模型

怪异模式是：“部分浏览器在支持W3C标准的同时还保留了原来的解析模式”。

怪异模式主要表现在IE内核的浏览器。在IE6下，盒模型存在着一种怪异解析模式。


不同模式下的盒模型大小

1、在正常解析模式下：

盒模型的宽度 = width + margin(左右) + padding(左右) + border(左右)

2、在怪异解析模式下：

盒模型的宽度 = width + margin(左右) 。（即width已经包含了padding和border值）


怪异解析

触发浏览器：IE6

触发条件：未进行文档声明。

BUG效果：盒模型的大小计算方法发生变化。


规避方法

怪异解析的规避方式非常简单：

正常设置文档声明即可：<!DOCTYPE html>


魔_术师
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css盒子模型图解
12-13
然而，Internet Explorer（IE）采用了不同的盒子模型，称为IE盒模型或怪异盒模型。在这个模型下，内容区域包括了边框和内边距，使得元素的实际大小和占据的空间相等。因此，上述例子在IE盒模型下，元素的总宽度为...
IE盒子模型和标准W3C盒子模型
09-27
**IE盒子模型**（又称怪异模式或Quirks模式），在早期的Internet Explorer浏览器中被采用，它将内容区域的大小包含了内边距和边框，导致元素的实际尺寸计算方式不同： ``` 总宽度 = Content宽度 + Border左右 + ...
怪异盒模型和弹性盒模型
yanbuxu的博客
04-14 232
box-sizing：属性值 box-sizing：content-box；常规模型盒 box-sizing：border-box；怪异魔核形 怪异盒模型特点：padding和border都会在元素的宽高内部，不会把盒子撑大 弹性盒子：布局方案 作用：控制他最近的一层子元素，布局方式 特点：a，弹性盒子里面的离他最近的一层子元素都可以添加大小 b，如果想让弹性盒子里面的一个子元素左右上下居中，只需...
CSS-怪异盒模型和标准盒模型
Neokekeke的博客
12-18 2704
在html文档中，每个渲染在页面中的标签都是一个个盒子模型。 盒子模型又分为 ： W3C标准的盒子模型 和 IE标准的盒子模型。 由于目前大部分主流的浏览器支持的是W3C标准盒模型（标准盒模型），也有保留对怪异盒子样式的解析，当然IE沿用的是自己标准的盒模型（怪异盒子模型） 用两个简单的例子分别介绍下这两个盒子模型：标准盒模型：<!--html--> <div class="box1">
前端面试之盒子模型（标准盒模型、怪异盒模型）和 css3指定盒子模型种类的box-sizing属性
N years的博客
08-15 2025
1.CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 2.看一个...
HTML5基础加强css样式篇（css属性：怪异盒模型解析）（四十六）
余正源的博客
04-07 1712
1.怪异盒模型和border有关： 设置border宽度可以影响其他元素的布局：但是在IE5及以下里面只是影响其子元素； 2.可以同时设置 box-sizing属性来使用这一特性，是其改变border宽度也不影响其他元素； 3,.box-sizing:简单理解就是盒子大小基于什么计算的;      2.使用如下：     .box-wr
怪异盒模型及其他
sinat_38992528的博客
03-08 141
转自：http://blog.csdn.net/Erosvan/article/details/52648210一、怪异盒模型[html] view plain copy&lt;!doctype html&gt;  &lt;html&gt;      &lt;head&gt;          &lt;meta charset="utf-8"/&gt;          &lt;title&gt;...
详解CSS 怪异盒模型和标准盒模型
12-30
由于目前大部分主流的浏览器支持的是W3C标准盒模型（标准盒模型），也有保留对怪异盒子样式的解析，当然IE沿用的是自己标准的盒模型（怪异盒子模型） 用两个简单的例子分别介绍下这两个盒子模型： 标准盒模型： &lt...
CSS+盒模型,css盒模型面试题,HTML
09-10
CSS盒模型有两种不同的实现方式，即标准盒模型（W3C盒模型）和IE盒模型（怪异盒模型）。两者的主要区别在于元素的总宽度和高度的计算方式。 - **标准盒模型**：元素的总宽度和高度只包括内容区域的宽度和高度，内...
06 盒子模型.zip
11-23
盒子模型有两种不同的解析方式：W3C标准盒模型和IE盒模型（也称为怪异盒模型）。在W3C标准中，元素的总宽度和高度仅包含内容区域加上边框和内边距，而外边距不影响总尺寸。但在IE盒模型中，元素的总尺寸包括内容、内...
css3移动端布局——怪异盒模型和弹性盒模型
weixin_46579411的博客
04-14 389
一、怪异盒模型： 1、box-sizing: 属性值： box-sizing:content-box; 常规盒模型 box-sizing:border-box: 怪异盒模型（IE盒模型） 2、触发怪异盒模型： box-sizing:border-box; 3、 怪异盒模型特点：padding和border都会在元素的宽高的内部，不会把盒子撑大。 *{ 移动端项目css可以这样写 box-si...
怪异盒模型及弹性盒子详细介绍
chenyuXYT的博客
04-15 323
文章目录怪异盒模型FLEX布局flex容器属性flex项目属性 怪异盒模型 box-sizing content-box 这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。 border-box 为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设...
05 - 标准盒模型和怪异盒子模型
xyyojl的博客
07-27 1009
两种盒子模型 普通盒模型: 普通盒模型触发方式: box-sizing: content-box; 宽高到底怎样计算? 正常情况:(普通盒模型)内容盒子 盒子的整体宽度 = width + border + padding/左border+左padding+width+右padding+右border 盒子的整体高度 = height+ border + padding/上b...
什么是怪异盒模型
qq_39378871的博客
02-22 6972
盒子模型 在说怪异盒模型之前我们先来了解一下盒模型，盒模型主要是在我们进行页面布局的时候来使用，我的理解是把它比喻成一个可变的框架，你可以往这里面加很多很多的东西去填充它的内容，盒模型又由几个大的部分组成从外到内依次为：margin（外边距）---->border（边框）---->padding（内边距）---->content（元素）为了便于我们理解可以看看下面这张图： 了...
CSS-标准盒模型 & 怪异盒模型
热门推荐
PT - Blog
04-29 3万+
CSS-标准盒模型 & 怪异盒模型
怪异盒模型和标准盒模型
where_slr的博客
07-10 1315
怪异模式主要表现在IE内核的浏览器。当不对doctype进行定义时，会触发怪异模式。
正常盒模型和怪异盒模型
gggg5643的专栏
04-16 3306
首先大概说说正常盒模型和怪异盒模型的区别： 1.用途：正常盒模型主要用于PC端，怪异盒模型主要用于手机端。 2.原理：正常盒模型的大小是由内到外的，由内部决定外部的大小；而怪异盒模型是由外而内的。   举例说明： 以下为正常盒模型，设定两个div，分别为鞋盒和鞋子         正常盒模型和怪异盒模型    
聊一聊标准盒模型和怪异盒模型的区别
u012197150的博客
02-23 393
非官方个风格
为什么会分为普通盒模型和怪异盒模型
最新发布
04-01
怪异盒模型则是由于IE浏览器在解析CSS的时候出现了一些问题，导致元素的盒模型计算方式与普通盒模型和标准盒模型不同，即元素的宽度和高度包括内容区域、内边距和边框，但不包括外边距。因此，为了避免这种问题，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值