IE盒模型和标准盒模型
标准盒模型和ie盒模型（怪异盒模型）
w3c标准盒模型
- width和height不包括padding和border
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就是其中之一。但是考虑到以
前建设的网站并不支持标准模式，所以各浏览器在加入标准模式的同时也保留了混杂模式（即以前那种未按照统一标准工作的模式，也叫怪
异模式）。经过多年的发展，后来又出现了近似标准模式（在一种模式中同时融入标准模式和部分混杂模式的特性，也称为接近标准模式、
准标准模式、最有限混杂模式）和超级标准模式（近似标准模式、标准模式、超级标准模式三者也共同被称作标准模式）。因此，浏览器的
模式可以分为两类：标准模式和混杂模式，其中，标准模式又可更严格的分为近似标准模式、标准模式、超级标准模式。
- 混杂模式会让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">
- 标准模式可以通过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
IE盒模型和标准盒模型的更多相关文章
- 怪异盒模型和标准盒模型--CSS
一,原理 css 属性:Box Moel分为两种:W3C标准和IE标准盒子模型. 大多数浏览器采用W3C标准模型,而IE中采用Microsoft自己的标准. 怪异模式是“部分浏览器在支持W3C标准的同 ...
- boxsizing属性 IE盒模型和标准盒模型
CSS3有一个非常有用但应用不广泛的属性: box-sizing: content-box | border-box | inherit content-box,默认属性,遵从标准盒模型. borde ...
- padding标准盒模型和怪异盒子模型
我们都知道padding是为块级元素设置内边距 但是在使用过程中,我们却会遇到一些问题.padding的标准盒模型和怪异盒模型 padding盒子模型 我们通过demo来讲这个问题,用文字干讲第一没意 ...
- 标准盒模型与IE盒模型之间的转换
首先上图,这两张很明显可以看出IE盒模型和标准盒模型之间的差别. 当然今天不是去细细追究两种模型具体是怎么去计算布局的,那个很多文章已经已经有过了,不再重复.以前刚开始学习盒模型的时候,就学到的是IE ...
- w3c标准盒模型与IE传统模型的区别
一.盒子模型(box model) 在HTML文档中的每个元素被描绘为矩形盒子.确定其大小,属性——比如颜色.背景.边框,及其位置是渲染引擎的目标. CSS下这些矩形盒子由标准盒模型描述.这个模型描述 ...
- CSS盒子模型与怪异盒模型
盒子模型(Box Modle)可以用来对元素进行布局,包括内边距,边框,外边距,和实际内容这几个部分. 盒子模型分为两种 第一种是W3c标准的盒子模型(标准盒模型) .第二种IE标准 ...
- 标准W3C盒子模型和IE盒子模型
标准W3C盒子模型和IE盒子模型 CSS盒子模型:网页设计中CSS技术所使用的一种思维模型. CSS盒子模型组成:外边距(margin).边框(border).内边距(padding).内容(co ...
- CSS3标准盒模型还是IE怪异模型box-sizing属性的应用设置
在一个文档中,每个元素都被表示为一个矩形的盒子.盒子模型具有4个属性['外边距(margin)','边框(border)','内边距(padding)','内容(content)']. 我们要设置某个 ...
- 理解标准盒模型和怪异模式&box-sizing属性
盒子模型 主要有两种,w3c标准盒模型,IE下的怪异盒模型,其实还有就是弹性盒模型(上篇文章我们用他很好的解决了对齐问题) DTD规范 盒模型分为:标准w3c盒模型.IE盒模型.以及css中的伸缩盒模 ...
随机推荐
- 解决zabbix“ZBX_NOTSUPPORTED: Timeout while executing a shell script”报错
如题所示,在zabbix_server使用zabbix_get获取自定义“UserParameter”对应的脚本的数据时,出现了如题所示的报错信息 [root@nmp01 scripts]# /usr ...
- 使用ALAssetsLibrary读取所有照片
一. ALAssetsLibrary 介绍 ALAssetsLibrary 提供了访问iOS设备下”照片”应用下所有照片和视频的接口: 从 ALAssetsLibrary 中可读取所有的相册数据,即 ...
- iOS端App的icon和Launch Image规格实时更新
启动影像 : iPhone :320 x 480 640 x 960 640*1136 750*1334 1242*2208 iPad :768 x 1004 1536 x 2008 APP图标: ...
- swift中代理的使用
1.首先定义一份协议. protocol HttpToolProrocol{ //1.代理方法,将server返回的字典传递给调用者 func didRecieveResults(result:NSD ...
- 浅析Apache中RewriteCond规则参数的详细介绍
RewriteCond就像我们程序中的if语句一样,表示如果符合某个或某几个条件则执行RewriteCond下面紧邻的RewriteRule语句,这就是RewriteCond最原始.基础的功能,为了方 ...
- apache占用内存高解决办法
我用512M的vps,访问量不大,但内存占用很大,甚至宕机. 我用top,然后shitf+m发现,httpd占用内存极大.经过网上找资料设置后,用过一段时间终于没再出现内存问题了. 首先查找配置文件的 ...
- centos6.9使用NTFS-3G挂载ntfs文件系统
centos6.9使用NTFS-3G挂载ntfs文件系统 工作中,难免需要到linux 系统上拷贝文件,但linux 自己不支持ntfs,下面就是解决问题的办法. NTFS-3G是一个开源软件,支持在 ...
- IDEA 去掉 ALT + / 自动补全
取消掉Alt + / 自动补全 setting -> keymap -> main menu -> code -> completion -> cyclic Expand ...
- 探究 Redis 4 的 stream 类型
redis 2 10 月初,Redis 搞了个大新闻.别紧张,是个好消息:Redis 引入了名为 stream 的新数据类型和对应的命令,大概会在年底正式发布到 4.x 版本中.像引入新数据类型这样的 ...
- X264使用指南
x264是一个开源的H.264视频编码器库.是目前最好的有损视频编码器. 基本用法是 x264 [options]-o outfile infile 主页: http://www.videolan.o ...