盒子模型
2016-03-07 23:03
1726 查看
盒子模型是css的核心,也是网页设计的核心内容,基本上所有的网页都有用到盒子模型。每个盒子都有border,margin,padding和content四个属性,但是盒子模型有两种不同的解释:标准W3C盒子模型和IE6盒子模型。
标准W3C盒子模型
在标准的W3C盒子模型中,盒子的宽和高指的是内容区的宽和高,即你在里面放了多少内容,这些内容所占据的宽和高就是盒子的宽和高。
IE6盒子模型
在IE6盒子模型中,盒子的宽和高指的是盒子最外层的DIV的宽和高,即你在最外层的DIV定义时的长度,即使盒子为空,其宽和高也是不变的。
两种解释方法虽然都有自己的考量,但是相对来说IE6模型更加符合实际开发情况。而W3C在CSS3中也新增添了一个box-sizing的属性,它可以定义计算盒子模型的算法,border-box或者content-box。当box-sizing的值为border-box时,采用的是IE6盒子模型,而当box-sizing的值为content-box时,采用的是标准W3C盒子模型。这也从侧面说明IE6盒子模型更加符合实际。
(adsbygoogle = window.adsbygoogle || []).push({});相关文章推荐
- 盒子模型
- 第六章 盒子模型
- IE盒子模型和标准W3C盒子模型
- DIV布局之道二:DIV块的嵌套,DIV盒子模型
- 牛腩 之盒子模型
- 理解盒子模型与简单应用
- 前端-CSS-6-盒子模型
- 谷歌推出Android 响应式布局控件 FlexboxLayout -弹性盒子模型
- 盒子模型
- 盒子模型
- 有趣的CSS题目(2): 从条纹边框的实现谈盒子模型
- 盒子模型
- jQuery 工具类函数-检测浏览器是否属于W3C盒子模型
- 样式表三种使用方式和盒子模型
- 盒子模型外边距问题&display&visible&浮动
- HTML盒子模型
- CSS box-flex属性,然后弹性盒子模型简介
- 【css3网页布局】flex盒子模型
- CSS的盒子模型
- 【CSS】盒子模型 之 IE 与W3C的盒子模型对比