【CSS】5分钟带你彻底搞懂 W3C IE 盒模型!

前言

大家好,我是HoMeTown,CSS是作为前端必有技术栈之一,但是有很多同学其实对CSS的盒模型都不是很了解,今天想聊一下Css盒子模型

盒模型是什么

首先当一个Document对进行布局(layout)的时候,浏览器的UGI渲染引擎会根据基础框盒模型,把所有的元素拟态成一个个盒子,这个盒子有4个部分组成

  • content 即实际的内容,包括文本&图像
  • padding 即内边距,清楚内容周围的区域,内边距是透明的,并且不能为负
  • border 即边框,指的是围绕元素内容的内边距的n条线,由widthcolorstyle3部分组成
  • margin 即外边距,在元素外创建额外的空白距离区域,该区域通常不能放置其他的元素

二维视图

image.png

三维视图

image.png

举个🌰

<style>
.box__wrap {
    width: 200px;
    height: 100px;
    padding: 20px;
}
</style>
<div class="box__wrap">盒模型</div>

当我们在浏览器里打开时,却发现元素的大小变成了240px,而不是200px

image.png

Css中,盒子模型可以分成:

  • W3C标准盒模型
  • IE盒模型

默认情况下,盒子模型为W3C标准盒模型

W3C标准盒模型

标准盒模型是浏览器默认的盒子模型:

image.png

在标准盒模型下:

  • 盒子总宽度=宽度+内边距+边框+外边距
  • 盒子总高度=高度+内边距+边框+外边距

width&height仅仅只包含内容高度,不包含外边距边框,所以👆🏻的🌰中的width240px

IE盒模型

image.png

从图中可以得到,IE盒模型中:

  • 盒子总宽度=宽度+外边距
  • 盒子总高度=高度+外边距

width&height包含内边距&边框,所以如果在IE盒模型下,👆🏻的🌰中的width200px

box-sizing

CSS中为我们提供了box-sizing属性,该属性决定了引擎渲染时,按哪种模式渲染盒子,它的值如下:

  • content-box默认值,与标准盒模型一致
  • border-box与IE盒模型一致
  • inherit从父元素继承

还是用上面的🌰,修改如下:

image.png

.box__wrap 的宽度变成了200px

*文章为作者独立观点,不代表BOSS直聘立场。
本文系 BOSS直聘「有了」社区签约作者原创内容,未经账号授权,禁止随意转载。