【前端面试--CSS】=> 标准盒子和怪异盒子

1,851 阅读2分钟

面试官:谈谈 标准盒子和怪异盒子

公司:腾讯


首先我们的知道盒子模型的分类

盒模型分为 : W3C标准盒子 、IE盒子

说到盒子的分类,在这之前,我们要知道什么是box-sizing,引用W3C网站上的定义

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

简单来说就是可以通过box-sizing的取值来切换盒模型,它的取值可以为content-box(标准)、border-box(怪异);

box-sizing的默认属性是content-box。

W3C标准盒子(content-box)

又称内容盒子,是指块元素box-sizing属性为content-box的盒模型。一般在现代浏览器中使用的都是正常盒模型content-box。它所说的width一般只包含内容,不包含padding与margin,并且盒子的大小会以内容优先,自动扩展,子元素可以撑开父元素.

可以理解为现实生活中的气球,大小可以随内容的变化而变化。

image-20210522201252312

在这种盒模型下,我们所说的元素的 width ,实际上只包含 content

盒子总宽度 = margin + border + padding + width

IE盒子(border-box)

又称怪异盒模型(边框盒子),是指块元素box-sizing属性为border-box的盒模型。一般在IE浏览器中默认为这种怪异盒模型,但是由于其自身的特殊性,手机页面中也有使用怪异盒模型。怪异盒模型中,父元素的盒模型确定,子元素无法撑开父元素的盒模型。

可以理解为现实生活中的铁箱子,大小不能被内容改变。

image-20210522201342367

在这种盒模型下,我们所说的元素的 width ,实际上包含了 content + padding + border

盒子总宽 = margin + width

小案例

两种模式下,以下样式盒子总宽度是多少?

    div{
        width:100px;
        height:100px;
        padding:20px;
        border:2px solid #000;
    }

在怪异盒子模型下:总宽度为100px;

在标准盒子模型下:总宽度为144px;