基本概念
历史
1996年12月17日 CSS1 诞生
1998年5月12日 CSS2 诞生， 专注内容和表现分离
2007年 CSS2.1 诞生，专注图片和文字展示
基本概念
长度单位
相对字体： em 和 CSS3 的 rem，ch
em 相对当前文本字体宽度， 比如文本字体 16px，则 1em 等于 16px
rem 相对根元素字体宽度
ch 字符0的宽度，也可以理解成英文字母的宽度
相对可视区域： vh vw
vh 相对于可视高度
vw 相对于可视宽度
选择器
类选择器，ID选择器，属性选择器，伪类选择器，伪元素选择器
属性选择器 [title="hello"] {}
伪类选择器 表示某种状态的元素，比如 :focus {} 选择具有键盘输入焦点的元素
伪元素选择器 表示某种逻辑的元素，比如 ::selection {} 选择鼠标选中的元素
关系选择器： 后代选择器（空格连接）， 相邻后代选择器（ > 连接），兄弟选择器（~ 连接）， 相邻兄弟选择器（+ 连接， 只会选择一个标签）
未定义行为
CSS 规范中没有规定的，浏览器之间实现效果不同的行为
宽度和高度
宽度是如何确定的？
默认宽度的情况下常见的有块级和内联盒子，分别具有流动性和包裹性。
块级盒子的流动性
块级盒子，表现为独占一行，自动填充一行的宽度，具有流动性。
但它不是 width: 100%，而是 width（content)，padding, border,margin，自动计算加起来等于一行的宽度。
内联盒子的包裹性
内联盒子，表现为和其他内联盒子并列一行，具有包裹性，尺寸由内容决定，内容越多尺寸越宽，但不超过外层标签。
比如下面的代码， span 标签的宽度由里面的内容决定，但最大宽度不超过外层 div 标签的宽度。
<div>
<span> 内容 </span>
<div>
内联块盒子
这里的内联块盒子是我的一种叫法，它的特点是 display: inline-block 默认表现为包裹性。
仔细思考内联盒子包裹性的特点后，有没有发现要实现文字在特定宽度范围内至少需要两个标签，如果使用内联块盒子一个标签就可以搞定的。 可以设置宽度后，轻松实现文字在特定宽度内。
最后强调一下块级盒子一旦设置了宽度就破坏了流动性，内联块盒子一旦设置了宽度就破坏了包裹性
内联块前面的空白节点
块级盒子占据一行，子元素内联块前面的空白节点的高度撑高了块级盒子的高度，高度和内联盒子高度一致，然后就可以看到背景色
<div class="div-span">
<span></span>
</div>
高度是如何确定的？
标签的百分比高度，是相对父元素高度确定的，但前提是父元素高度固定。但绝对定位 position: absolute; 是个例外，它的高度就是父元素的高度；
最大/最小宽度/和 最大/最小高度 是如何影响宽度和高度的？
最大或最小宽度表示宽度在范围内，按照宽度实际值取值，否则按最大或最小取值。
高度也适用上面的条件
总结： 这部分我们主要学习了两个知识点， 第一个是 css 基本的概念，主要是选择器，像六大基本选择器，和 四种关系选择器；
第二个是宽度和高度，宽度常见三种性质，流动性，包裹性，兼具流动性和包裹性，分别对应块状盒子，内联盒子，内联块盒子。幽灵空白节点，块级盒子的子元素前面的看不见空白。
高度默认是内容元素占据高度，没有内容高度就是 0，值的注意的是高度 100%，是针对父元素的相对值，所以需要设置 html 和 body 都是 height: 100%; 才能使 body 的高度等于浏览器的视口高度。现在有了视口高度单位 vh，我们可以轻松设置视口高度了。最后说一下 最小最大宽度或高度，同时设置最小最大宽度等于限制了宽度范围，高度同理。这样设置是一个不错的响应式手段。比如博客一般设置文章的最大宽度，这样宽度不至于很宽，看起来很舒服。