ul 和 ol 的差别
ul:unordered list，无序列表，type属性有：disc—实心圆(默认）、circle—空心圆、square—实心方块ol:ordered list，有序列表，type属性有：1—数字（默认）、a—小写字母、A—大写字母、i—小写希腊字母、I—大写希腊字母。
CSS 如何工作？
浏览器在展现一个文档的时候，必须要把文档内容和相应的样式信息结合起来展示。 这个处理过程一般分两个阶段：
- 浏览器先将标记语言和CSS转换成DOM (文档对象模型)结构。 这时DOM 就代表了电脑内存中的相应文档，因为它已经融合了文档内容和相应的样式表。
- 最后浏览器把 DOM的内容展示出来。
层叠与继承
优先级：
- 网页开发者定义的样式 > 网页阅读者定义的样式 > 浏览器的默认样式
- 子元素自身的样式优先级高于从父级继承来的样式
!import
用户可以通过使用这个关键字使自己定义的样式覆盖开发者定义的样式
文本样式
-
字体:
font-family -
字号:
font-size
<absolute-size>: xx-small ... xx-large
<relative-size>: larger / smaller
<length>: 12px / 0.8em
<percentage>: 80% / inherit
em = 希望得到的像素大小 / 父元素字体像素大小，其实和百分比本质是一样的。都可以自适应用户的字体。
rem是 CSS3 新增的一个相对单位(root em)，即保证了是相对是根布局的相对大小，又避免了父视图的干扰。
- 行高:
line-height
数字：无单位数字乘以该元素的字体大小，建议使用，不会在继承时产生不确定的结果
长度/百分比：可能会带来不确定的结果
-
text-decoration:text-decoration-line||text-decoration-color||text-decoration-style||text-decoration-thickness -
font-style: 斜体 -
font-weight: 文本粗细，normal: 400，bold: 700，medium: 500 -
text-indent: 缩进，可正可负 -
text-transform: 首字母大小写 -
text-align: 文本对齐 -
word-spacing: 单词间距 -
text-size-adjust: 手机或者平板使用的文本溢出算法 -
letter-spacing: 文本间距，和word-spacing不同的就是一个是单词一个是字母 -
word-break: 怎样在单词内断行 -
overflow-wrap: 当一个不能被分开的字符串太长而不能填充其包裹盒时，为防止其溢出，浏览器是否允许这样的单词中断换行。
盒模型及定位
- 子元素位置跟随浏览器宽度变化
子元素 float: left
父元素清除浮动 overflow: hidden
父元素根据子元素判断大小，如果所有的子元素均浮动，父组件则没有大小，其实可以看成是父容器也浮动到同一层 ``overflow: hidden` 有两个作用：1. 溢出隐藏 2. 清除浮动
clear: both 是相对于子元素来说的，真正意义上的清除浮动
元素重叠: 设置 margin-right 为负值
inline 宽度为内部 inline 元素之和，不能用 width 指定，inline 内部不能设置 block 元素
block 默认自动计算宽度，可用 width 指定，但是不要设置 width: 100%
inline-block 和 block 是一样的，只不过不换行
一个元素在别一个元素的左边
----- ------------------------
| con || |
| || |
----- ------------------------
position: absolute;
left: 0;
transform: transformX(-100%);
环绕效果: float: left
相关文档： 灵活运用 CSS 开发技巧 juejin.cn/post/684490… juejin.cn/post/684490…
