盒子模型--IE与标准
从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content,并且 content 部分不包含其他部分。
从上图可以看到 IE 盒子模型的范围也包括 margin、border、padding、content,和标准 W3C 盒子模型不同的是:IE 盒子模型的 content 部分包含了 border 和 pading。
网页中的盒子模型;我们常常要控制盒子模型的宽度width:
w3c中的盒子模型的宽:
包括margin+border+padding+width;
width:margin*2+border*2+padding*2+width;
height:margin*2+border*2+padding*2+height;
iE中的盒子模型的width:
也包括margin+border+padding+width;
上面的两个宽度相加的属性是一样的。不过在ie中content的宽度包括padding和border这两个属性;
例如一个盒子模型如下:
margin:20px,border:10px,padding:10px;width:200px;height:50px;
如果用w3c盒子模型解释,那么这个盒子模型占用的
宽度为:20*2+10*2+10*2+200=280px;
高度:20*2+10*2+20*2+50=130px;
盒子的实际宽度大小为:10*2+10*2+200=240px;
实际高度:10*2+10*2+50=90px;
用ie的盒子模型解释 :盒子在网页中占据的大小为20*2+200=240px; 高:20*2+50=90px;
盒子的实际大小为:宽度:200px, 高度:50px;
我们常常理解的盒子模型是w3c这样的盒子模型
【转】
最新文章
- Design and Analysis of Algorithms_Decrease-and-Conquer
- TreeSize工具介绍
- ajax提交含有html数据时的处理方法
- UrlOfFIle
- pod应用--备用
- Java迭代器深入理解及使用
- 基于Selenium2+Java的UI自动化(8)- 显式等待和隐式等待
- Visual Studio中的TabControl控件的用法
- 浅谈Android中Serializable和Parcelable使用区别
- Spring-cloud(四)服务发现与消费:ribbon的使用
- PHP实现邮件的自动发送
- 关于现在互联网是否还有机会类的价值文章,为什么有人掉进互联网创业的坑里,可能因为ta不懂这些
- 如何用vmware workstation来做虚拟化实验
- [calss*=";col-";]匹配类名中包含col-的类名,^以col-开头,$以col-结尾
- 03-01:springboot 整合jsp
- 在centOS中安装mongodb
- iOS: 解决某些第三方库因为ARC不能使用的问题
- Gson全解析(上)-Gson基础
- centos Linux下磁盘管理 parted,df ,du,fdisk,partprobe,mkfs.ext4,mount,/etc/fstab,fsck,e2fsck,mk2efs,tmpfs ,nr_inodes, LVM,传统方式扩容文件系统 第七节课
- 作用JavaScript访问和操作数据库