层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种样式表语言，用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。
CSS 是一种编程语言吗？
CSS不是一种编程语言而是一种样式表（CSS = Cascading Style Sheet）。然而，在高级阶段，CSS 中有许多接近编程的复杂选项。
编程语言和样式表有什么区别？
编程语言
使用编程语言，制定了一系列指令，即计算机完成任务所需执行的步骤。有更接近机器码而远离人类语言的语言（如 Assembly），也有更接近人类语言而远离机器码的高级编程语言（如 C# 和 Java）。编程语言数不胜数，而且它们的数量只会增加，所以总是有新的东西可以谈论，新的库可以探索。可以通过多种方式对它们进行分类——例如，有面向对象的编程语言、函数式语言，或者我们可以根据它们的用途进行分类。
样式表
样式表是在信息学中用来格式化和显示结构化文档（如 HTML 或 XML）的语言。样式表决定什么样式规则适用于文档的每个元素，浏览器显示什么颜色、背景、布局、字体等。
高级 CSS 技术和编程
在CSS中，可以声明函数，使用面向对象，构建一个透明的、易于维护的模块化系统。
CSS 预处理器
CSS 预处理器是可以生成 CSS 代码的 CSS 扩展，这意味着可以使用编程方法自动执行步骤。预处理器有很多，但最著名的两个是 Sass 和 Less。
这些有助于创建和维护复杂应用程序和网站的 CSS 结构，并创建可由多人编辑的透明代码。有了它们，就可以在 CSS 中使用嵌入、循环和继承。
清除浮动的方法
为什么要清除浮动？清除浮动是为了解决子元素浮动导致父元素高度塌陷的问题。
添加新元素
<div class="parent"> <div class="child"></div> <div style="clear: both"></div> </div>
使用伪元素
.parent::after{ content: ""; display: block; height: 0; clear:both; }
触发父元素 BFC
.parent { overflow: hidden; }
弹性布局
容器属性（用于 flex 布局容器的属性）。
justify-content
定义子元素在主轴（水平轴）上的对齐方式。
.container { justify-content: center | flex-start | flex-end | space-between | space-around; }
align-items
定义的元素如何在横轴（垂直轴）上对齐。
.container { align-items: center | flex-start | flex-end | baseline | stretch; }
flex-direction
内部元素是如何在 flex 容器中布局的，定义了主轴的方向 (正方向或反方向)。
.container { flex-direction: row | row-reverse | column | column-reverse; }
row：flex 容器的主轴被定义为与文本方向相同。主轴起点和主轴终点与内容方向相同。row-reverse：表现和row相同，但是置换了主轴起点和主轴终点column：flex容器的主轴和块轴相同。主轴起点与主轴终点和书写模式的前后点相同column-reverse：表现和column相同，但是置换了主轴起点和主轴终点
flex-wrap
指定 flex 元素单行显示还是多行显示。如果允许换行，这个属性允许控制行的堆叠方向。
.container { flex-wrap: nowrap | wrap | wrap-reverse; }
nowrap：默认值，flex 的元素被摆放到到一行，这可能导致 flex 容器溢出。cross-start会根据flex-direction的值等价于start或before。wrap：flex元素被打断到多个行中。cross-start会根据flex-direction的值等价于start或before。wrap-reverse：和wrap的行为一样，但是cross-start和cross-end互换。
flex-flow
flex-flow 属性是 flex-direction 属性和 flex-wrap 的简写。
.container { flex-flow: <flex-direction> || <flex-wrap>; }
align-content
定义多条网格线的对齐方式。
.container { align-content: center | flex-start | flex-end | space-between | space-around | stretch; }
元素属性（用于容器内子元素的属性）
flex-grow
定义元素的放大比例，默认为 0，即使有剩余空间也不会放大。如果所有子元素 flex-grow 都为1，那么剩余空间会平分，如果一个子元素 flex-grow 为 2，那么这个子元素会占用剩余空间的2倍。
.item { flex-grow: <number>; /* default 0 */ } fle
x-shrink
定义元素的缩小比例，默认为 1，即如果空间不够，子元素会缩小。如果所有子元素flex-shrink都为1，而一个子元素flex-shrink为0，则该子元素不会收缩。
.item { flex-shrink: <number>; /* default 1 */ }
flex-basis
在分配额外空间之前定义项目占用的主轴空间。默认是 auto，也就是子元素的原始大小。如果设置为固定值，则子元素将占据固定空间。
.item { flex-basis: <length> | auto; /* default auto */ }
flex
flex 属性是 flex-grow、flex-shrink 和 flex-basis 的简写。默认值为0 1 auto，即有剩余空间不放大。如果剩余的空间不够，就缩小，子元素占用它的大小。
.item { flex: none | [ <’flex-grow’> <’flex-shrink’>? || <’flex-basis’> ] }
flex 有两个简洁值：auto和none，分别代表1 1 auto（元素会根据自身的宽度与高度来确定尺寸，但是会伸长并吸收 flex 容器中额外的自由空间，也会缩短自身来适应 flex 容器） 和 0 0 auto（元素会根据自身宽高来设置尺寸。它是完全非弹性的：既不会缩短，也不会伸长来适应 flex 容器）
order
定义元素的排序顺序。值越小，排名越高，默认为0。
.item { order: <integer>; }
align-self
定义单个子元素的排列。如，align-items 设置居中，使所有子元素居中对齐。然后，可以通过将 align-self 设置为子元素来单独设置子元素的顺序。
.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }
什么是 BFC
BFC的全称是 Block Formatting Context，即块级格式化上下文。简单的说，BFC就是页面上一个隔离独立的容器，不受外界干扰，不受外界干扰。
如何触发 BFC
float不是没有overflow不可见position是绝对的还是固定的display是inline-block或table-cell或table-caption或grid
BFC的渲染规则是什么
- BFC是页面上一个隔离的独立容器，不受外界干扰或外界干扰
- BFC计算高度时，浮动子元素也参与计算（即内部有浮动元素时不会发生高度塌陷）
- BFC的区域不会和
float的元素区域重叠 - BFC 中的元素垂直放置
- BFC 中两个相邻元素的外边距会重叠
BFC应用场景
- 清除
float：BFC内部的浮动元素会参与高度计算，所以可以用来清除浮动，防止高度塌陷 - 避免一个元素被浮动元素覆盖：BFC的区域不会与浮动元素的区域重叠
- 防止重叠边距：属于同一个BFC的两个相邻Boxes的边距会塌陷，但不同的BFC不会塌陷
