前端面试之盒模型

栏目: CSS · 发布时间: 5年前

内容简介:当你对一个文档进行布局(laying out)时候, 浏览器引擎会根据CSS-Box模型将所有元素描述为一个盒子, CSS会决定这些盒子的大小, 位置, 属性(颜色, 边框...)。盒模型分为两类: IE盒模型和标准盒模型。 两者的区别在于:可见demo1与demo2的外边距为20px。而不是30px。

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

盒模型分类

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

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

IE盒模型

前端面试之盒模型

标准盒模型

前端面试之盒模型

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

<style>
    * {
        margin: 0;
        padding: 0;
    }
    .demo1 {
        width: 40px;
        height: 40px;
        background: pink;
        padding: 10px;
        margin: 10px 0;
        border: 2px solid pink;
    }
    .demo2 {
        width: 40px;
        height: 40px;
        padding: 10px;
        background: blue;
        margin: 20px 0;
        border: 2px solid blue;
    }
</style>
<div class="demo1"></div>
<div class="demo2"></div>
复制代码
前端面试之盒模型

可见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的像素值
复制代码
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .demo div {
        float: left;
        width: 50%;
        height: 100px;
        padding: 0 10px;
    }
    .demo1 {
        background: pink;
    }
    .demo2 {
        background: blue;
    }
</style>

<div class="demo">
    <div class="demo1"></div>
    <div class="demo2"></div>
</div>
复制代码
前端面试之盒模型

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)。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

我在阿里做运营

我在阿里做运营

芮曦(@小马鱼) / 电子工业出版社 / 2018-7 / 59.00元

《我在阿里做运营》是一本散发着浓浓阿里味儿的运营书。作者进入互联网行业7年,曾就职于携程、阿里巴巴等大平台,也服务过小微企业、传统企业及诸多职场新人。不仅经历过各类运营岗,也经历过市场、品牌等岗位,对精细化运营、数据化运营和低成本运营有着深刻见解。 本书展示了在阿里这样的大平台做运营工作的真实场景,也提炼了适用于小微企业的经验,以及让运营新人快速上手的技能和自我修养、职业规划。一起来看看 《我在阿里做运营》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

MD5 加密
MD5 加密

MD5 加密工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具