最基本的 CSS 知识，包括 CSS 的发明、层叠样式、三种文档流元素、overflow溢出、两种盒模型、margin 合并和基本单位。
一、CCS的发明
李爵士的挪威同事赖先生在 1994 提出 CSS 概念，CSS 的牛 X 之处在于层叠样式表。
二、层叠样式
- 样式层叠 -- 可以多次对同一选择器进行样式声明
- 选择器层叠 -- 可以用不同选择器对同一个元素进行样式声明
- 文件层叠 -- 可以用多个文件进行层叠
这些特性使得CSS极度灵活，后来的 Vue 和 React 为了防止自己的样式被层叠想了很多办法
三、三种文档流元素
-
inline 流动方向：从左到右，到达最右才会换行
inline 宽度：内部 inline 元素的和，不能用 width 指定
inline 高度：由 line-height 间接确定，跟 height 无关，也跟 padding 无关
-
block 流动方向：从上到下，每一个都是另起一行
block 宽度：默认自动计算宽度，可用 width 指定
block 高度：由内部文档流元素决定，可以设 height
-
inline-block 流动方向：也是从左到右，到达最后不会把自己分成两块
inline-block 宽度：结合前两者特点，可用 width
inline-block 高度：跟block类似，可以设置 height
四、overflow 溢出
当内容的宽度或高度大于容器的，会溢出，有四种方式处理。
- overflow: visible; -- 默认方式，什么都不管
- overflow: hidden; -- 隐藏溢出部分
- overflow: scroll; -- 设置使用滚动条，但即使内容不超出高度，还是会显示滚动条
- overflow: auto; -- 当内容没有超出高度，不显示滚动条；当内容超出高度，才显示滚动条
float 和 position: absolute / fixed 可以让元素脱离文档流
五、两种盒模型
-
content-box 内容盒 -- 内容就是盒子的边界
width = 内容宽度
-
border-box 边框盒 -- 边框才是盒子的边界
width = 内容宽度 + padding + border
border-box 更好用
六、margin 合并
margin 的合并要求的前提是它们之间什么都没有，有兄弟 margin 合并和父子 margin 合并。
-
兄弟合并
兄弟合并是符合预期的，可以用 inline-block 消除。
-
父子合并 父子合并可以用 padding / border 挡住或者用 overflow: hidden 挡住
七、基本单位
-
长度单位：
px -- 像素
em -- 相对自身 font-size 的倍数
百分数
整数
-
颜色：
十六进制 #FF6600 或者 #F60
RGBA 颜色 rgb(0,0,0) 或者 rgba(0,0,0,1)
hsl 颜色 hsl(360,100%,100%)，hsl(360,100%,100%,0.5)
「资料来源：©饥人谷」
