css3盒模型：IE6混杂模式下的盒模型

IE6混杂模式下的盒模型本来是IE的特有的，后来大家发现，诶还行好用，所以在CSS3中加入了属性box-sizing，当属性值为border-box时，则按照混杂模式的原则创建盒子

适用于场景

1.宽度不确定（百分数），但内边距固定；

2.input，因为默认带两像素的边框，父级宽度不确定，且input又想与父级同宽，则可使用该属性来实现

3.输入框想加padding更方便

还有别的等等，总之还挺方便的，下面进入正题，讲一讲它和W3C标准模型的盒子有什么区别吧~

W3C标准的盒模型与IE6混杂模式（怪异模式）的盒模型对比

W3C：realWidth = contentWidth + padding*2 + border*2

IE6怪异模式：realWidth = width；

contentWidth = width - padding*2 - border*2

两种模式下，width：180px；padding：10px；border：10px的盒子分别如下

盒模型如下

代码如下

<!DOCTYPE html>
<html lang="en">
<head><style>div {width: 180px;height: 80px;line-height: 80px;text-align: center;border: 10px solid #424242;padding: 10px;background-color: #f77;color: #fff;float: left;margin-left: 10px;}.demo {line-height: 40px;box-sizing: border-box;}</style>
</head>
<body><div>W3C标准盒模型</div><div class="demo">IE6的怪异盒模型</div>
</body>
</html>

css3盒模型：IE6混杂模式下的盒模型相关推荐

CSS-标准盒模型和IE6混杂模式
1. w3c标准盒模型以宽度举例(高度是同理的) boxWidth = 设置的宽( width ) + 边框的两边 ( border * 2 ) + 内边距两边(padding * 2) boxCo ...
网桥接口非混杂模式下数据包转发
网桥接口处在非混杂模式下,只能接收目的MAC地址为自身的数据包,也就是说如果数据包的目的MAC为其它地址,将会被丢弃掉.对于单网口的设备这样没有问题,但是对于存在多个网卡的交换设备,如果从一个网口接收 ...
linux下混杂模式
混杂模式介绍: 混杂模式就是接收所有经过网卡的数据包,包括不是发给本机的包,默认情况下网卡只把发给本机的包(包括广播包)传递给上层程序,其它的包一律丢弃:简单的讲,混杂模式就是指网卡能接受所有通过它的 ...
文档模式：标准模式、混杂模式
一. 背景: 由于历史的原因,不同浏览器对页面的渲染是不同的,甚至同一浏览器的不同版本也是不同的.然后这时候就出现了一个至关重要的标准规范:W3C标准. 在W3C标准出台之前,不同的浏览器在页面的渲 ...
浏览器的混杂模式和标准模式
##浏览器的混杂模式和标准模式有时候代码没问题,但是执行时不会报错却也显示不出来,就要考虑一下浏览器的兼容问题浏览器是存在混杂模式和标准模式的,所以有时候对象的获取设置,会不太一样,关于浏览器的混 ...
浅谈严格模式和混杂模式
一,严格模式和混杂模式的定义: 通俗来说: 严格模式是浏览器根据w3c的规范来解析代码: 混杂模式是浏览器根据自己的规范来解析代码(很明显:无规矩不成方圆,这种混杂模式会产生一些浏览器兼容问题). 二 ...
Qt Creator在编辑模式下工作
Qt Creator在编辑模式下工作在编辑模式下工作使用编辑器工具栏在打开的文件和符号之间导航选择解析上下文更改文字编码选择行尾样式分割编辑器视图使用书签转到符号定义或声明重新解析 ...
linux端口混杂模式,linux端口混杂模式简介~
设置端口混杂模式:ifconfig eth0 promisc 设置混杂ifconfig eth0 -promisc 取消混杂网卡工作模式有4种,分别是: 广播(Broadcast)模式多播(Mul ...
HUAWEI交换机的Hybrid接口(混杂模式)详解与实验配置演示
前言: 本篇文章,本人结合自己所学以及上网查阅相关资料,总结出关于Hybrid接口的产生,作用,优点以及工作流程,附带与Cisco的比较.篇幅较长,还需读者耐心阅读:由于牵扯到过多的交换知识,但并不是 ...

css3盒模型：IE6混杂模式下的盒模型

css3盒模型：IE6混杂模式下的盒模型相关推荐

最新文章

热门文章