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

前言

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

盒模型是什么

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

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

二维视图：

三维视图：

举个??

盒模型
1
2
3
4
5
6
7
8

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

在Css中，盒子模型可以分成：

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

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

W3C标准盒模型

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

在标准盒模型下：

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

即width&height仅仅只包含内容高度，不包含外边距与边框，所以???的??中的width有240px

IE盒模型

从图中可以得到，IE盒模型中：

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

即width&height包含内边距&边框，所以如果在IE盒模型下，???的??中的width是200px

box-sizing

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

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

还是用上面的??，修改如下：

.box__wrap 的宽度变成了200px。

先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。添加下方名片，即可获取全套学习资料哦