温故而知我不懂的CSS( 二 ) _CSS

移动端的崛起，催生了 CSS3 媒介查询以及许多响应式布局特性的出现，如图片元素的 srcset 属性、CSS 的 object-fit 属性
弹性盒子布局（flexible box layout）终于熬出了头
格栅布局（grid layout）姗姗来迟

视觉表现长足进步

圆角、阴影和渐变让元素更有质感
transform 变换让元素有更多可能。
filter 滤镜和混合模式让 Web 轻松变成在线的 Photoshop；
animation 让动画变得非常简单

盒模型??假设我们HTMl标签元素在没有CSS的影响下，是以什么形式存在的，有人可能会想到以盒子形式存在的,实际则不然，HTMl标签元素在浏览器中具体的存在形式是被CSS所定义的，也就是说的盒模型，就相当于出来一种MSS标记性语言（虚拟的语言）定义HTML标签元素为圆形模型

【温故而知我不懂的CSS】MDN是这样定义的：CSS 基础框盒模型是 CSS 规范的一个模块，它定义了一种长方形的盒子——包括它们各自的内边距（padding）与外边距（margin ），并根据视觉格式化模型(算法机制)来生成元素，对其进行布置、编排、布局（lay out）。常被直译为盒子模型、盒模型或框模型。

??HTML标签元素在CSS规则下是盒子形式存在，如果没有被CSS影响，HTML标签元素可能不是以盒子形式存在，并且，CSS世界存在流(CSS世界中的一种基本的定位和布局机制)，在流的多个规则下，盒子就具备不同的规则，不同的规则（比如BFC、IFC、FFC、GFC）影响着盒子的排列，所以我们把这种盒子也叫做正常流的盒子我们会在CSS规则中讲到
举个例子：
.demo {height: 100px;background: lightblue;}</style><body><div class="demo">div</div></body>

文章插图

如的图可以看出，这个就是盒模型
盒模型分为IE盒模型和W3C标准盒模型。我们在下面会讲述到，先来看看盒子是怎么形成的吧
视觉格式化模型(visual formatting model)??视觉格式化模不是一种盒模型类型，而是一种算法机制,具体可以去看看W3C

CSS 视觉格式化模型（visual formatting model）是用来处理和在视觉媒体上显示文档时使用的计算规则。该模型是 CSS 的基础概念之一

盒子的生成

MDN解释：盒子的生成是 CSS 视觉格式化模型的一部分，用于从文档元素生成盒子。盒子有不同的类型，不同类型的盒子的格式化方法（也叫格式化上下文）也有所不同。盒子的类型取决于 CSS display 属性。

??我们来理解上面这句话吧，盒子的生成是通过视觉格式化模型，而生成的盒子处于格式化上下文，因为有不同的格式化上下文,格式化上下文(formatting context) 是定义盒子环境的规则，不同格式化上下文(formatting context)下的盒子有不同的表现。也就是盒子通过视觉格式化模型出生，出生后被一种规则限制,可能有同学对格式化上下文有点难以理解，没关系，我也懵逼，所以接下来会在CSS规则章节讲到
W3C 标准盒模型：

属性width,height只包含内容content，不包含border和padding 。

举个例子：

<style>.demo {width: 200px;height: 100px;padding: 20px 20px;background: lightblue;border: 10px solid red;}</style><body><div class="demo">div</div></body>

效果图：

文章插图

可以看到标准盒模型中， width = 内容的宽度、height = 内容的高度，如上图中height等于内容的高度为100px，width等于内容的宽度为100px
IE盒模型：

属性width,height包含border和padding，指的是content+padding+border 。

举个例子：

.demo {box-sizing: border-box; /* 代表为IE盒模型 */width: 200px;height: 100px;padding: 20px 20px;background: lightblue;border: 10px solid red;}</style><body><div class="demo">div</div></body>

效果图：

文章插图

可以看到，IE盒模型中，width = border + padding + 内容的宽度,height = border + padding + 内容的高度,如上图height = border 10px*2+ padding20px*2 + 内容的高度40px=100px,width = border 10px*2 + padding 20px*2+ 内容的宽度 140px=200px
box-sizing属性更改盒模型??CSS 中的 box-sizing属性定义了user agent应该如何计算一个元素的总宽度和总高度。