CSS W3快速过一遍

个人认为需要注意的但还未完全理解装到脑子里的一些知识点

1 CSS 指的是层叠样式表* (Cascading Style Sheets)

2 各种选择器 目录

3 使用 box-sizing 属性将宽度保持为 300px，无论填充量如何

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

4 1em 等于当前字体大小。浏览器中的默认文本大小为 16px。因此，默认大小 1em 为 16px。

可以使用这个公式从像素到 em 来计算大小：pixels/16=em。

5 CSS定位

五种: static,relative,absolute,fixed,sticky
z-index 属性指定元素的堆栈顺序
如果两个定位的元素重叠而未指定 z-index，则位于 HTML 代码中最后的元素将显示在顶部。

区别是定位的基准
position: absolute; 的元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）。

然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。

注意：“被定位的”元素是其位置除 static 以外的任何元素。

CSS 定位详解-阮一峰
CSS定位讲解-MDN
MDN讲解视频版

6 display: inline-block

与 display: inline 相比，主要区别在于 display: inline-block 允许在元素上设置宽度和高度

7 垂直对齐

使用其值等于 height 属性值的 line-height 属性

关于inline-height的讲解

8 CSS - :first-child 伪类

:first-child 伪类与指定的元素匹配：该元素是另一个元素的第一个子元素
first-child伪类讲解

9 CSS 伪元素

伪元素讲解

10 CSS 透明度

opacity 属性的取值范围为 0.0-1.0。值越低，越透明

11 CSS导航栏

垂直导航栏
水平导航栏

12 下拉菜单

讲解

13 图像精灵

14 属性选择器

讲解

15 CSS表单搜索框

搜索框

16 计数器

计数器讲解

17 特异性

不知道重不重要 先放在这