CSS的两种盒模型
来源:互联网 发布:埃斯梅·比安科 知乎 编辑:程序博客网 时间:2024/06/06 01:48
CSS的两种盒模型
关于css的盒子模型相信学习前端的同学都有所耳闻,因为它太基础太重要了。
提起盒子模型,大家可能会想到content,padding,border,margin这些词汇,还有也许还会想起盒子模型有两种,比如ie的盒子模型与w3c的盒子模型,那么我们怎么来区分呢?
先来看看w3c的盒子模型:
W3C 盒子模型的范围包括 margin、border、padding、content,并且 content 部分不包含其他部分。
再看看ie的:
IE 盒子模型的范围也包括 margin、border、padding、content,看起来好像没什么不一样,如果仔细观察就可以发现其实ie的盒子模型的width与height是在border外侧来计算的。
我们现在来实际试一个实际的例子看看它们两个的区别:
我们设置一个盒子成这样:
margin:10px,border:20px,padding:30px;width:400px;height:500px;
那么对于w3c而言其占据的实际高度为:10*2+20*2+30*2+500=620px;
实际占据的宽度为:10*2+20*2+30*2+400=520px;
盒子实际的高度为:20*2+30*2+500=600px;
盒子实际的宽度为:20*2+30*2+400=500px;
对ie而言呢:
其占据的实际高度为:10*2+500=520px;
实际占据的宽度为:10*2+400=420px;
盒子实际的高度为:500px;
盒子实际的宽度为:400px;
其实在css3出来之后我们又有了“新的盒子模型”了,而且也是分为两种(注:box-sizing的属性值好像还有padding-box但是我查 css参考手册却没有查到,先不管吧 ):
box-sizing:content-box | border-box,其中 content-box是默认的值。
理论上说,content-box和border-box的主要区别是二者的盒子的宽度是否包含元素的边框和内边距。这样说来上面的 ie盒子模型不就 刚好与border-box对上号了吗。很多人觉得border-box才是我们真正需要的盒子模型,比如boostrap就使用了border-box,看来微软设计的盒子模型还是有 其高明之处的。
- CSS的两种盒模型
- CSS 的框模型
- css的盒模型
- CSS的布局模型
- CSS的盒模型
- CSS的布局模型
- css的框模型
- CSS的盒子模型
- CSS的盒模型
- CSS的盒模型
- CSS 的盒子模型
- css的盒子模型
- CSS的盒子模型
- css的盒模型和布局模型
- css的布局模型(二)---浮动模型
- 认识CSS的盒子模型
- CSS盒模型的类型
- CSS的盒子模型案例
- 多态
- CURL常用操作方法大全
- HDU 1811 Rank of Tetris(拓扑排序+并查集)
- 汇编学习:二维数组遍历
- 学习SQLite之路(三)
- CSS的两种盒模型
- stm32独立看门狗和窗口看门狗的区别
- 各种类型接口数据的获取方法
- 如何测试XSS漏洞
- 学习SQLite之路(四)
- u8,u16,u32和uint8_t,uint16_t,uint32_t的含义
- OpenGL离线渲染和缓冲区对象
- Python爬虫基础-5(正则表达式)
- Android应用性能优化系列视图篇——ListView自适应导致的严重性能问题