【内推字节】欢迎简历chengxinsong@bytedance.com
理解box-sizing属性border-box,content-box
发布于 作者 superadmin 1515 次浏览 来自 分享

理解box-sizing属性border-box,content-box,其实也是理解正常盒模型与异常盒模型。

1、正常盒模型,是指块元素box-sizing属性为content-box的盒模型。

一般在现代浏览器中使用的都是正常盒模型content-box,它也是标准 w3c 盒子模型。



正常盒模型是指:盒模型的大小柏阔content,padding,border,并且先做content.。

正常盒模型的大小会以内容优先自动扩展,内部子元素超过父元素给定的大小,会将父元素撑大。



2、怪异盒模型,是指块元素box-sizing属性为border-box的盒模型

一般在IE浏览器中默认为这种怪异盒模型,但是由于其自身的特殊性,手机页面中也有使用怪异盒模型。



怪异盒模型是先做盒。然后添加border,padding,最后做content。即保证盒模型优先,先做盒再放内容,不管内容是否放得下,一般手机上用的更多。

更通俗的说,怪异盒模型中,父元素的盒模型确定,子元素是无法撑开父元素的盒模型,只能在盒模型剩余空间展示。


1、那应该选择哪种盒子模型呢?

当然是“标准 w3c 盒子模型”了。


2、怎样才算是选择了标准盒模型?

很简单,就是在网页的顶部加上 doctype 声明。假如不加 doctype 声明,那么各个浏览器会根据自己的行为去理解网页,

即 ie 浏览器会采用 ie 盒子模型去解释你的盒子,而 ff 会采用标准 w3c 盒子模型解释你的盒子。所以网页在不同的浏览器中就显示的不一样了。

反之,假如加上了 doctype 声明,那么所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子,网页就能在各个浏览器中显示一致了


发布评论
微信群
saucxs聊天机器人
saucxs
hi ,欢迎来到sau交流学习社区,欢迎与我聊天,问我问题哦!