1、元素尺寸的百分比
-
普通元素（没有定位的元素）的参考标准是父元素的
content区域。 -
绝对定位或固定的元素的参考标准是第一个定位元素（向上寻找设置了定位的最近的祖先元素）的
content + padding区域。
2、清除浮动
父元素中的子元素设置了 float 属性会导致父元素高度坍塌，此时需要清除浮动。
-
可以给子元素设置
overflow: hidden让其成为一个BFC。这种方法可能会带来一定的副作用。 -
给父元素设置一个
after伪元素，伪元素中设置属性clear: both。意为该元素的boder-top会在所有浮动元素的padding-bottom下方，使得父元素的高度被撑开。
3、行盒元素对齐
vertical-align 专门用于两个行盒（inline）或行块盒（inline-block）进行垂直方向上的对齐。
注意：这个属性对于块级元素无效。
实际场景：例如字体图标和文字需要垂直对齐，两者都是默认的行盒，且无法修改。
4、CSS 属性值的计算
- HTML 中的每一个元素的所有 CSS 属性都是有值的，因而浏览器才能解析一个元素并进行展示。
每一个元素的属性值确定都经历下面这个过程：
1)、确定声明值：
寻找代码编写的样式或浏览器默认的样式，且这两个样式没有发生冲突时才会进行应用。
2)、层叠冲突：
如果一个元素存在多个样式，那么按照样式的优先级决定。
-
代码编写的样式 > 浏览器默认的样式
-
根据 CSS 中各种选择器的优先级规则
3)、使用继承：
如果元素不存在样式，那么将从父级元素进行继承。
注意：并不是所有的样式都能继承的。
4)、使用默认值：
如果元素不存在样式，那么将赋予它默认值。
5、自定义字体与字体图标
字体的底层逻辑：
世界上的每一个字符都是可以用 Unicode 编码表示的。浏览器在解析文字时，会将其转换成对应的 Unicode 码，根据 Unicode 码到设置的字体文件中（如果有）查找对应的文字外形，最终显示在页面上。
理解了字体的底层逻辑后，字体图标也是相同的原理。自定义一个图标，设置一个 Unicode 码，将两者关联起来，那么图标就能像字体一样展示了。
简单介绍一下 Unicode 编码：
Unicode 码以“平面”的概念进行管理。
0号平面的范围是 0x0000 ~ 0xFFFF。这个平面足以表示大部分的字符。
另外还有16个平面称为“辅助平面”，我们可以用尚未被使用的 Unicode 码来作为自定义图标的编码。
举个例子：
定义了一个图标，设置它的 Unicode 码为 0xe600。那么在引入字体文件后（使用 @font-face 属性，这里就不具体说明）即可在代码中使用：
<span>0xe600</span>
但这样的可读性很差。所以可以用一个伪元素来优雅地实现：
<span class="icon_demo" />
.icon_demo:before {
font-family: "xxx";
content："\e600"
}
这样写更符合语义化编程的理念。一般这个类名会在字体文件中定义好，引入字体文件后直接使用类名即可。
6、line-height
-
最常用于使文本在盒子中垂直居中（设置
height和line-height的值相同）。 -
设置多行文本的行间距。推荐的用法是设置不带单位的数值，这样会以字体的大小为基准计算。其它带单位的数值（
%或px等）会带来不确定的结果。
具体参照 MDN 文档：# line-height
7、关于绝对定位和浮动元素
绝对定位和浮动元素的 display 会强制变更为 block，并且无法修改！
8、关于 img 白边问题
img 在父盒子中没有设置高度时，底部会留下一条空隙，这是由于 img 标签的默认 display 为 inline。
解决方法：
1、将父盒子的 font-size 设置为 0 ；
2、将 img 的 display 设置为 block 。
9、a 标签中的伪协议
<a href="javascript: ;"></a>
在 href 属性中写 javascript: 被称为伪协议，可以在 href 中执行 js 代码，达到特殊的跳转目的。
10、隐藏元素的 3 种方式
display: "none";
不生成盒子，即不占用空间。
visibility: "hidden";
生成盒子，会占用空间，但不显示，点击事件无法触发。
opacity: 0;
生成盒子，会占用空间，显示，只是透明度为 0，点击事件可以触发。
11、inline-block 造成的元素间隙
当使用 display: inline-block 进行布局时，会造成元素之间存在间隙。这是因为浏览器在处理行内元素时，元素之间的空白符（空格符、回车符等）也会被处理。在字体大小不为 0 的情况下，空白符就会占据一定的宽度，宽度会随着字体的大小发生变化。
解决方案：
- 将 font-size 设置为 0。
- 将两个行内盒元素写在同一行。（受代码格式影响）
- 设置 margin 为负数。（受代码格式影响）
- 设置 float 属性。
12、HTML5
HTML5 增加了很多新的标签，是为了使元素语义化，无关于样式，样式是 CSS 做的事情。
语义化的好处：
- 有利于 SEO（搜索引擎）；
- 有利于无障碍访问（阅读器阅读网页）；
- 有利于浏览器插件解析网页内容。
dataset
为了避免标签中的自定义属性与固有属性冲突，HTML5 规定所有的自定义属性名前增加 "data-"。
在获取自定义属性时也提供了更加简便的方法：
<div id="a" data-name="Toby">111</div>
const a = document.getElementById("a");
console.log(a.dataset); // { name: "Toby" }
classList
获取元素类名时，使用 dom.classList 获取类名，可将多个类名作为一个伪数组返回，并且提供了方法对类名进行操作。
dom.classList.add("a"); // <div class="a" />
dom.classList.remove("a"); // <div />
// toggle 切换 - 无则添加，有则移除
dom.classList.toggle("a"); // <div class="a" />
dom.classList.toggle("a"); // <div />
