正文 

当前位置： 首页 > java > java教程

ie盒模型和标准盒模型

学如逆水行舟，不进则退。 学如逆水行舟，不进则退。     2022-09-17     152

关键词：

标准盒模型和ie盒模型（怪异盒模型）

  1. w3c标准盒模型

    • width和height不包括padding和border

  2. ie盒模型

    • width和height包含padding和border
  • ie8以上都是w3c标准盒模型    ie5极其以下都是ie盒子模型，ie6、ie7、ie8在混杂模式下ie盒模型，在标准模式下是w3c标准盒模型
    (注意：ie6在混杂模式下一定是Ie盒模型，而ie7、ie8在混杂模式下不一定是ie盒模型)

  • css3中的box-sizing

    • content-box w3c标准盒模型

    • boder-box IE盒模型 / 怪异盒模型

混杂模式和标准模式

在多年以前（IE6诞生以前），各浏览器都处于各自比较封闭的发展中（基本没有兼容性可谈）。随着WEB的发展，兼容性问题的解决越来

越显得迫切，随即，各浏览器厂商发布了按照标准模式（遵循各厂商制定的统一标准）工作的浏览器，比如IE6就是其中之一。但是考虑到以

前建设的网站并不支持标准模式，所以各浏览器在加入标准模式的同时也保留了混杂模式（即以前那种未按照统一标准工作的模式，也叫怪

异模式）。经过多年的发展，后来又出现了近似标准模式（在一种模式中同时融入标准模式和部分混杂模式的特性，也称为接近标准模式、

准标准模式、最有限混杂模式）和超级标准模式（近似标准模式、标准模式、超级标准模式三者也共同被称作标准模式）。因此，浏览器的

模式可以分为两类：标准模式和混杂模式，其中，标准模式又可更严格的分为近似标准模式、标准模式、超级标准模式。

  1. 混杂模式会让IE的行为与（包含非标准特性的）IE5相同
    而标准模式会让IE的行为贴近W3C标准
 1.<!DOCTYPE html>
 2.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 3.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  1. 标准模式可以通过doctype 和 严格型（strict）声明来开启。
    而混杂模式可以通过过渡性（transitional）和框架集型（frameset）声明来开启

IE注释判断语句

IE特有功能，通过HTML注释中的条件语句然不同的IE版本识别注释中的内容，这对IE的hacks很有帮助。

1)<!--[if lt IE 7]> : 小于 IE7 的版本 ( Less than );

2)<!--[if lte IE 7]> : 小于或等于 IE7 的版本 ( Less than or equal );

3)<!--[if gt IE 7]> : 大于 IE7 的版本 ( Greater than );

4)<!--[if gte IE 7]> : 大于或等于 IE7 的版本 ( Greater than or equal );

5)<!--[if !IE 7]> : 不等于 IE7 的版本 ( Not );

6)<!--[if !IE]> :不等于 IE 的版本 ( equal );

   <!--[if IE 6]>
    Only recognized in IE7;
    只能被IE7识别
    此处可以填样式
    <![endif]>

 

--------------------------------------end

[css]面试题：box-sizing的作用(ie盒模型和w3c标准盒模型)

 介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？（1）有两种盒子模型：IE盒模型（border-box）、W3C标准盒模型（content-box）（2）盒模型：分为内容（content）、填充（padding）、边界（margin）、边框（border）... 查看详情

标准盒模型和怪异（ie）盒模型

参考技术A    提起盒模型，我觉得我们都知道是什么，也知道是其大致的概念！但是要系统的用专业性的词汇表达出来往往很难！这种情况在面试当中经常遇到：请回答，标准盒模型和怪异盒模型的区别？  ... 查看详情

ie盒模型和标准w3c盒模型

...明的。Content(内容)-盒子的内容，显示文本和图像W3C盒子模型的范围包括：margin、border、padding、content，并且content部分不包含其他部分IE盒子模型的范围也包括 ：margin、bor 查看详情

盒模型(代码片段)

盒模型:  　　margin外边距；padding内边距；border边框；content内容；盒模型分为两类：标准盒模型和IE盒模型　　标准盒模型：width(宽度)和height(高度)不包括padding和border;　　　　IE盒模型：width(宽度)和height(高度)包括padding... 查看详情

css盒模型

CSS盒模型CSSCSS盒模型基本概念：标准模型+IE模型标准模型和IE模型的区别标准模型IE模型二者区别，前者的宽度是内容宽度，后者的宽度是内容+内边距+borderCSS如何设置这两种模型-标准模型:box-sizing:content-box;-IE模型:box-sizing:border-b... 查看详情

标准盒模型与ie盒模型

ff（标准的盒模型）Box的宽高包括padding、border、margin、content区域ieBox的宽度包括 margin content区域（content区域包含padding与border） 查看详情

css盒模型(代码片段)

多个版本。题目：谈谈你对CSS盒模型的认识(1)基本概念：标准模型+IE模型  (2)标准模型和IE模型区别标准模型和IE模型的区别，就是宽度和高度的计算方式不同。标准模型的宽度指的就是content的宽度，不包含padding和border。... 查看详情

盒模型的简析

 首先我们先了解下标准盒模型和ie盒模型   从两个图中我们一目了然标准盒模型和ie盒模型的区别。但是在工作开发中，我要用标准盒模型，也就是添加doctype声明。CSS盒子模式都具备的属性：内容(content)、填充(pad... 查看详情

css盒模型

盒模型分：W3C标准的盒子模型（标准盒模型）、IE标准的盒子模型（怪异盒模型）1、标准盒模型标准盒模型中width指content的宽度，height指content的高度。标准盒模型下盒子的大小=content+border+padding+margin  2、怪异盒模型怪异... 查看详情

css盒模型的介绍

CSS盒模型的概念与分类   CSS盒模型就是一个盒子，封装周围的HTML元素，它包括内容content、边框border、内边距padding、外边距margin。    CSS盒模型分为标准模型和IE模型； 标准模型和IE模型的区别 &n... 查看详情

对标准怪异盒模型的认识

标准盒模型和怪异盒模型：什么是盒模型？网页设计中css技术所使用的一种思维模型盒模型的组成：外边距（margin）、边框（border）、内边距（padding）、内容（content）盒模型的分类：标准（W3C）盒模型、怪异（IE）盒模型对于... 查看详情

css－－盒模型

---恢复内容开始---盒模型：1、基本内容：2、基本概念：标准模型＋IE模型3、标准模型和IE模型的区别：4、css如何设置这两种模型：5、js如何设置获取盒模型对应的宽和高6、根据盒模型解释边距重叠7、BFC（边距重叠解决方案）... 查看详情

深入理解css盒模型

基本概念：标准模式和IE模型CSS如何设置这两种模型JS如何设置获取盒模型对应的宽和高实例（根据盒模型结束边距重叠）BFC（边距重叠解决方案） 基本概念　　盒模型的组成大家肯定都懂，由里向外content，padding，border，mar... 查看详情

css盒模型分成w3c标准盒模型和ie模型

参考技术AW3C标准盒模型(默认)：box-sizing:content-boxpadding和border都会撑开盒子，改变盒子的宽度高度总宽度：width+左右border宽度+左右padding宽度+左右margin宽度内盒宽度：width+左右border宽度+左右padding宽度IE盒模型：box-sizing:border-boxpad... 查看详情

09-盒模型

盒模型在CSS中，"boxmodel"这一术语是用来设计和布局时使用，然后在网页中基本上都会显示一些方方正正的盒子。我们称为这种盒子叫盒模型。盒模型有两种：标准模型和IE模型。我们在这里重点讲标准模型。 盒模型示意图&nb... 查看详情

09-盒模型

盒模型在CSS中，"boxmodel"这一术语是用来设计和布局时使用，然后在网页中基本上都会显示一些方方正正的盒子。我们称为这种盒子叫盒模型。盒模型有两种：标准模型和IE模型。我们在这里重点讲标准模型。 盒模型示意图&nb... 查看详情

09-盒模型

盒模型在CSS中，"boxmodel"这一术语是用来设计和布局时使用，然后在网页中基本上都会显示一些方方正正的盒子。我们称为这种盒子叫盒模型。盒模型有两种：标准模型和IE模型。我们在这里重点讲标准模型。 盒模型示意图&nb... 查看详情

对css盒模型的理解

介绍一下标准css的盒子模型？低版本IE的盒子模型有什么不同的？1、有两种：IE盒子模型（怪异模式）、W3c盒子模型（标准模式）。2、盒模型组成：内容(content)、填充(padding)、边界(margin)、边框(border)。3、区别：IE的content部分把b... 查看详情