这是我参与11月更文挑战的第16天，活动详情查看：2021最后一次更文挑战
在这篇文章中，我们会介绍一下基本的CSS的概念，来巩固我们的基础知识，如盒模型、BFC、选择器等耳熟能知的。
CSS盒模型
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。CSS盒模型分为标准模型 和 IE模型。
通过box-sizing来设置盒模型，默认是content-box（标准盒模型），可以设置为 border-box（IE模型），两者有什么区别呢？
- 设置
width/height的作用效果不同 - 标准盒模型：
width = contentWidth，设置多宽内容宽度就是多少 - IE盒模型：
width = contentWidth + padding + border，设置多宽内容宽度就是减去padding和border后的宽度
定位
在介绍定位之前我们介绍一个文档流的概念，正常的布局流是将元素放置在浏览器视口内的系统。默认情况下，块级元素在视口中垂直布局——每个都将显示在上一个元素下面的新行上，并且它们的外边距将分隔开它们。内联元素表现不一样——它们不会出现在新行上，相反，只要父元素的宽度内有空间可以这样做。如果没有空间，那么溢流的文本或元素将向下移动到新行。
定位的整个想法是允许我们覆盖上面描述的基本文档流行为，脱离了文档流，以产生有趣的效果。接下来来看看他的几种属性值有哪些作用。
- static: **静态定位 **。静态定位是每个元素的默认值，不会脱离文档流，一般我们不需要去声明他，但是有时候遇到继承的情况，我们不愿意见到元素所继承的属性影响本身，从而可以用Position:static取消继承，即还原元素定位的默认值；他会忽略
left、right、top、bottom的属性 - relative: 相对定位。相对定位是相对于元素默认的位置的定位，它偏移的
top，right，bottom，left的值都以它原来的位置为基准偏移，而不管其他元素会怎么样。注意 relative 移动后的元素在原来的位置仍占据空间。 - absolute: 绝对定位。绝对定位是以他的第一个设置了
relative或者absolute属性的祖先元素定位的，并且他在标准流不占位置。（原来的位置会有其他元素占据了） - fixed: 固定定位。固定定位会以
body进行定位，可定位于相对于浏览器窗口的指定坐标。不论窗口滚动与否，元素都会留在那个位置，在标准流中不占位置。 - sticky: 粘性定位。他是相对位置和固定位置的混合体，它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点（例如，从视口顶部起10像素）为止，此后它就变得固定了。例如，它可用于使导航栏随页面滚动直到特定点，然后粘贴在页面顶部。
参考：developer.mozilla.org/zh-CN/docs/…
浮动
什么是浮动元素：浮动元素同时处于常规流内和流外的元素。其中块级元素认为浮动元素不存在，而浮动元素会影响行内元素的布局，浮动元素会通过影响行内元素间接影响了包含块的布局。
**常规流：**页面上从左往右，从上往下排列的元素流，就是常规流
**脱离常规流：**绝对定位，fixed定位的元素有自己固定的位置，脱离了常规流
**包含块：**一个元素离它最近的块级元素是它的包含块
属性值：
- left：元素向左浮动。
- right：元素向右浮动。
- none：默认值。元素不浮动，并会显示在其在文本中出现的位置
特性：
- 浮动元素会从普通文档流中脱离，但浮动元素影响的不仅是自己，它会影响周围的元素对齐进行环绕。
- 不管是行内元素还是块级元素，设置浮动后会生成一个块级框，可以设置它的width和height。
- 块级元素认为浮动元素不存在，不会受到影响，而浮动元素会影响行内元素
排列规则：
- 尽量靠上、靠左、挨着
- 不能超出包含块，除非元素比包含块更宽；不能超过所在行的最高点；不能超过它前面浮动元素的最高点
问题：
- 如果一个父元素没有设置height，那么它的高度由子元素高度撑开，当子元素设成浮动后，会脱离文档流，父元素不会被撑开，高度变成0，这就是父元素高度塌陷问题。
- 行内元素与浮动元素发生重叠，其边框，背景和内容都会显示在浮动元素之上；块级元素与浮动元素发生重叠时，边框和背景会显示在浮动元素之下，内容会显示在浮动元素之上
清除浮动：
- 给父级div定义 高度；父元素设置 overflow：hidden、auto
- 使用空元素，在父元素最后添加一个块级子元素，给加上样式
clear: both - 给父元素添加伪类
:after，给予样式
BFC
BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于定位方案的普通流。
具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。
触发BFC：
- float不为none
- position为absolute、fixed
- display 为 inline-block、table-cells、flex
- overflow不为visible
- 根元素
解决问题：
- 外边距合并问题
- BFC 可以包含浮动的元素（清除浮动）
- BFC 可以阻止元素被浮动元素覆盖
