程序博客网 > php files

两种盒模型

来源：互联网发布：php files 编辑：程序博客网时间：2024/06/05 03:35

原来存在两种盒模型，W3C标准盒模型和IE盒模型。两者盒模型下计算元素的宽高不一致，为了实现统一，采取的方法是避免触发IE盒模型，使用<!DOCTYPE html>声明就可以避免。

下面我们来看看两者的区别。

W3C标准盒模型 width=(margin-left)+(margin-right)+(padding-left)+(padding-right)+(border-left)+border-right+content;(content不包含其他部分)

height类似。

IE盒模型 width=(margin-left)+(margin-right)+content;(content包含border,padding);

height类似。

例：一个盒子的 margin 为 20px，border 为 1px，padding 为 10px，content 的宽为 200px、高为 50px，如果用标准 W3C 盒子模型解释，那么这个盒子需要占据的位置为：宽 20*2+1*2+10*2+200=262px、高 20*2+1*2*10*2+50=112px，

盒子的实际大小为：宽 1*2+10*2+200=222px、高 1*2+10*2+50=72px；

如果用IE 盒子模型，那么这个

盒子需要占据的位置为：宽 20*2+200=240px、高 20*2+50=70px，

盒子的实际大小为：宽 200px、高 50px。

0 0

php files

php files

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子流量花房转赠丢失怎么办华为刷不了机怎么办软件总是闪退怎么办 iphonex屏幕太贵怎么办手机摔蓝屏了怎么办数据线接头接触不良怎么办发现高耗电应用怎么办小米wifi开关打不开怎么办情景智能删除了怎么办麦芒6看不起机怎么办华为麦芒4 进水怎么办手机显示无服务怎么办手机显示无卡怎么办手机卡不显示了怎么办手机没有服务了怎么办手机进水无服务怎么办手机进水没信号怎么办华为nova信号差怎么办麦芒6手机进水怎么办卡显示无服务怎么办魅族卡2无服务怎么办新手机卡无服务怎么办卡贴机刷机后显示无服务怎么办苹果6忘记密码怎么办 oppo手机无服务怎么办华为手忘记密码怎么办手机指纹解锁解不开怎么办手机不支持5g怎么办手机内存清不了怎么办华为p20前置发白怎么办小米mix2锁住后怎么办手机jps信号弱怎么办手机网速好慢怎么办天机7信号差怎么办华为网络信号差怎么办手机充电速度慢怎么办感觉手机充电慢怎么办天线锅子没信号怎么办家里无线信号弱怎么办家中无线信号弱怎么办手机导航信号差怎么办