内容简介:IE5.5及更早的版本使用的是IE盒模型。IE6及其以上的版本在标准兼容模式下使用的是W3C的盒模型标准。
盒子模型
IE5.5及更早的版本使用的是IE盒模型。IE6及其以上的版本在标准兼容模式下使用的是W3C的盒模型标准。
- 盒子模型组成为:margin、border、padding、content。
- CSS盒子模型分为:标准W3C盒子模型,IE盒子模型。两者最大不同在于对于css的width和height的大小设置。下面所说的width和height是css中的宽高。
IE盒子模型
IE盒子模型的width = contentWidth + padding-left + padding-right + border-left + border-right
IE盒子模型的height = contentHeight + padding-top + padding-bottom + border-top + border-bottom
意味着IE盒子的width和height的大小是上述属性相加的最大总和。若content的大小、padding大小、border的大小总和大于css设置的宽高。例如增加padding宽度大小使得盒子宽度大于设置的宽度会将content的大小被压缩,最终content大小会变为0。box的总宽度会大于设置的width大小。
#ie_box { margin: 30px; width: 200px; height: 200px; background-color: bisque; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 10px; border: 5px solid brown; }
标准W3盒子模型
W3盒子模型的width = contentWidth
W3盒子模型的height = contentHeight
W3盒子模型大小计算就简单多,css设置的width和height就是content内容大小。padding、border的大小并不会影响content的大小。
#w3_box { margin: 30px; width: 200px; height: 200px; background-color: bisque; padding: 10px; border: 5px solid brown; }
小结
对于ie和w3两种盒子模型,相比较而言w3盒子模型会比ie盒子模型更好用些,也不容易混淆css中的width和height,同时也方便计算盒子的实际宽高大小,也不会出现ie盒子模型由于属性设置超出预设宽高而挤压content显示。
以上所述就是小编给大家介绍的《CSS盒子模型》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- CSS盒子模型
- 从头开始复习css之盒子模型
- 【Hello CSS】第二章-CSS的逻辑属性与盒子模型
- CSS——把“可以动的盒子”更优雅地展示:② “居中”盒子
- 斐讯 N1 盒子 部署 NKN 挖矿
- CSS——让“盒子”动起来:① 浮动
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
JavaScript面向对象编程指南
斯托扬 / 凌杰 / 人民邮电出版社 / 2013-3 / 59.00元
《JavaScript面向对象编程指南》内容包括:JavaScript作为一门浏览器语言的核心思想;面向对象编程的基础知识及其在JavaScript中的运用;数据类型、操作符以及流程控制语句;函数、闭包、对象和原型等概念,以代码重用为目的的继承模式;BOM、DOM、浏览器事件、AJAX和JSON;如何实现JavaScript中缺失的面向对象特性,如对象的私有成员与私有方法;如何应用适当的编程模式,......一起来看看 《JavaScript面向对象编程指南》 这本书的介绍吧!
RGB CMYK 转换工具
RGB CMYK 互转工具
HEX CMYK 转换工具
HEX CMYK 互转工具