前端面试之盒模型

我会带着你远行 2022-03-16 12:21 262阅读 0赞

## 什么是盒子模型 ##

当你对一个文档进行布局(laying out)时候, 浏览器引擎会根据CSS-Box模型将所有元素描述为一个盒子, CSS会决定这些盒子的大小, 位置, 属性(颜色, 边框...)。

## 盒模型分类 ##

盒模型分为两类: IE盒模型和标准盒模型。 两者的区别在于:

IE盒模型的width/height = content + border + padding
    标准盒模型的width/height = content
    复制代码

### IE盒模型 ###

### 标准盒模型 ###

## 普通文档流块元素的CSS外边距合并问题 ##

可见demo1与demo2的外边距为20px。而不是30px。

需要注意的是：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

## 改变盒子模型 ##

CSS3支持改变盒子模型。

### box-sizing ###

box-sizing用来改变计算盒子高度/宽度的默认盒子模型。可以使用此属性来模拟不正确支持CSS盒子模型规范的浏览器的行为。

/* 关键字 值 */
    box-sizing: content-box;
    box-sizing: border-box;
    
    /* 全局 值 */
    box-sizing: inherit;
    box-sizing: initial;
    box-sizing: unset;
    复制代码

#### content-box(默认值): 标准盒模型 ####

宽度 = 内容的宽度
    高度 = 内容的高度
    不会包含border, padding。
    复制代码

demo演示:

.demo1 {
        box-sizing: content-box;
        width: 40px;
        height: 40px;
        background: pink;
        padding: 10px;
        margin: 10px 0;
        border: 2px solid pink;
    }
    
    <div class="demo1"></div>
    复制代码

盒子内容宽度就是40px;

#### border-box: 怪异模式 ####

width = border + padding + 内容的width，
    height = border + padding + 内容的height。
    复制代码

demo演示:

.demo {
        box-sizing: border-box;
        width: 40px;
        height: 40px;
        background: pink;
        padding: 10px;
        margin: 10px 0;
        border: 2px solid pink;
    }
    
    <div class="demo"></div>
    复制代码

盒子的内容宽度为16px;

#### padding-box: 已经弃用 ####

#### inherit: 规定应从父元素继承 box-sizing 属性的值 ####

### 为什么要使用border-box ###

#### content-box缺点 ####

当你想让两个子容器float:left，宽度各50%，然后给一点padding，最后让子容器并排充满父容器，一切想的挺美好，然而你发现结果并不是这么美好，因为子容器的盒子宽度已经超出了父容器的一半，导致了折行，于是，width就不能50%了，只能是50%再减去padding的像素值
    复制代码

border-box的优势:

border-box的诞生，主要就是解决content-box的最大缺点。border-box意味着子容器的padding和border的厚度都算在50%之内，这样，你可以随意的修改padding和border的厚度值，根本不用担心父容器被撑爆。
    复制代码

简单修改下上述代码。

.demo div {
        box-sizing: border-box;
        float: left;
        width: 50%;
        height: 100px;
        padding: 0 10px;
    }
    复制代码

因此border-box使用场景如下:

子元素有padding和border，或者至少有其一，并且需要给子元素设定100%宽度（或者50%宽度等等），这时候显然需要border-box。设为border-box之后，padding和border的厚度可以随意调，并不会溢出父元素。如果是content-box，那么，宽度必然会溢出，而且，为了不溢出，你设定子元素的宽度就只能是一个定值，或者是一个计算值（比如calc(100% - 20px)。