css的两种盒子模型
2024-10-18 21:17:25
css的两种盒子模型:W3C标准盒子模型、IE盒子模型
两者的相同之处:都包含margin、border、padding、content
两者的不同之处:W3C标准盒子模型的content部分不包含其他部分;IE盒子模型的content部分包含border、padding部分。
举例说明:一个盒子模型margin为10px,border为2px,padding为5px,content为100px,高为50px。
1.W3C标准盒子模型
盒子需要占据的位置:宽10*2+2*2+5*2+100=134px、高10*2+2*2+5*2+50=84px;盒子的实际大小:宽2*2+5*2+100=114px、高2*2+5*2+50=64px。
2.IE盒子模型
盒子需要占据的位置:宽10*2+100=110px、高10*2+50=60px;盒子的实际大小:宽100px、高50px、
关于浏览器显示的是哪种盒子模型
一般情况下,在加了doctype声明的情况下浏览器显示的都是W3C标准盒子模型,如果没有加doctype声明,那么不同的浏览器会根据自己的解释去显示盒子模型,IE浏览器就可能会显示IE盒子模型。
最新文章
- python 端口扫描
- Python中的网络编程
- selenium之js
- VUE2.0不可忽视的很多变化
- CentOS下crontab执行java程序
- 制作OS X 10.10.3启动安装U盘
- PHP截取字符串 兼容utf-8 gb2312
- Python-aiohttp百万并发
- 《python源代码分析》笔记 pythonVM一般表达式
- pandas.DataFrame学习系列1——定义及属性
- Idea增加Idiff merger工具
- iOS开发微信支付
- Python 闭包(Closure)
- Git for Windows之团队合作
- 斯坦福大学CS224d课程目录
- Ubuntu 14.04 定时任务
- 安装Memcache的PHP扩展
- 20145326 《Java程序设计》第3周学习总结
- 前端基础--css基本语法,选择器
- Dev Express Report 学习总结(六)Dev Express Reports自定义Summary