原稿：语雀 · CSS 知识点 · 原目录：CSS › CSS 知识点

选择器

选择器种类

元素、类、ID选择器

  • 对元素<h1>的选择：h1 { }
  • 对box类的选择：.box { }
  • 对id uique的选择：#unique { }

属性选择器

  • 根据某个标签属性的存在选择元素，如选择存在title标签的<a>：a[title] { }
  • 根据有特定值的标签属性选择，如选择指定地址<a>：a[href="<https://example.com>"] { }

伪类、伪元素

  • 伪类：用于选择声明了特定状态的元素，如鼠标悬停：a:hover { }
  • 伪元素：用于选择元素的一部分，如<p>内的第一行文本：p::first-line { }

运算符

  • 后代选择器：article p，选中<article>中任何位置的<p>
  • 子代运算符：article > p，选中<article>中直接子元素<p>
  • 通用兄弟运算符：h1 ~ p，选中<h1>后任何位置同级元素<p>
  • 相邻兄弟运算符：h1 + p，选中与<h1>后直接同级元素<p>

伪类与伪元素

伪类

被添加到一个选择器末尾的关键字，样式在特定状态下才被应用到指定的元素

伪元素

可用于选择元素的一部分，如<p>内的第一行文本p::first-line{ }，但更强大之处是创建不在DOM树中的元素，并为其添加样式。例如通过::before来在一个元素前增加一些文本，并为这些文本添加样式

优先级

通常采用级联和专用规则，后面的覆盖前面的，具体的覆盖概括的，具体借助计算得到一个四位数： 2. 千位： 只有内联样式在该位得一分，内联下没有其他选择器，得分总是1000 4. 百位： 选择器中包含ID选择器则该位得一分。 6. 十位： 选择器中包含类选择器、属性选择器或者伪类则该位得一分。 8. 个位：选择器中包含元素、伪元素选择器则该位得一分。

#outer a {} /* 0101 */
#outer #inner a {}/* 0201 */
div li:nth-child(2) a:hover {}/* 0023 */
div div .nav:nth-child(2) a:hover {}/* 0033 */

页面元素隐藏

  • display:none：DOM 树中存在该元素，但渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件——既不占据空间也不交互
  • visibility:hidden：隐藏元素，在页面中仍占据空间，但是不会响应绑定的监听事件
  • opacity:0：将元素的透明度设置为0，看起来隐藏了，但是依然占据空间且可以交互，比如点击 button 依旧可以触发监听回调

单位

绝对单位

相对单位

cm

厘米

em

在 font-size 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小，如 width

mm

毫米

ex

字符“x”的高度

Q

四分之一毫米

ch

数字“0”的宽度

in

英寸

rem

根元素的字体大小

pc

十二点活字

lh

元素的line-height

pt

点

vw

视窗宽度的1%

px

像素

vh

视窗高度的1%

vmin

视窗宽/高中较小尺寸的1%

vmax

视图宽/高中较大尺寸的1%

最常见的三种 em、px、rem

  • px：绝对单位，页面按精确像素展示。
  • em：相对单位，基准点为父节点 font-size，父元素 font-size:16px 时，子元素的 1em=16px，子元素自身定义了 font-size 按自身来计算
  • rem：相对单位，可理解为"root em", 相对根节点 html 的字体大小来计算

居中

水平居中

参考链接：16种方法实现水平居中垂直居中 2. 行内元素

对父元素使用 text-align: center ，其中的行内元素可以水平居中

.container {
  text-align: center;
}
  1. 块级元素——margin（不固定宽度）

对子元素使用 margin: 0 auto ，左右边距自动分配，适合不支持 flex 的浏览器（见MDN margin）

.center {
    height: 200px;
    width: 200px;
    margin: 0 auto; /* 上下0，左右自动*/
    border: 1px solid red;
}
  1. 块级元素——flex（不固定宽度）

flex布局下对flex容器使用 justify-content:center ，其中的子元素可以沿主轴居中

.center{  display:flex;  justify-content:center;}<div class="center">  <div class="flex-div">1</div>  <div class="flex-div">2</div></div>
  1. 块级元素——transform（不固定宽度）

子元素使用绝对定位。左外边距边缘（margin edge）定位到非 static 定位祖先元素左边缘起50%偏移处，使用transform: translateX(-50%)向左侧平移子元素自身宽度的50%作为补偿

优点：宽度不固定

缺点：不支持IE8，可能要加浏览器前缀

.center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
  1. 块级元素——绝对定位（固定宽度）

直接用于元素，设定元素放置在父容器左起50%处，之后向左修正0.5个元素width，宽度需固定

.center {
    position: absolute;
    left: 50%;
    width: 200px; /* 固定 */
    margin-left: -100px; /* 宽度*-0.5 */
}

垂直居中

  1. 行内元素

让盒子（父元素）的行高 line-height 等于盒高，其中的行内元素就会在盒子垂直居中

<div class="outerBox">
  center text
</div>

.outerBox{
  width:200px;
  height:100px;
  border: 1px solid #000;
  line-height: 100px; /* line-height=height */
}
  1. 行内块级元素

如果要居中盒内一个行内块级元素：添加另一个行内块级伪元素到末端，高度取 100% 盒高。使用 vertical-align 改变行基线为 middle ，则所有行内块级元素沿基线对齐，实现盒内的垂直居中

.container{
    height: 600px;
}
/* 添加一个无内容行内块元素,改变该容器基线 */
.container::after {
  display: inline-block;
  vertical-align: middle;
  content: "";
  height: 100%;
}
/* 让垂直居中的行内块元素与基线对齐 */
.center {
  display: inline-block;
  vertical-align: middle;
}

<div class="container">
    <div class="center">垂直居中</div>
</div>
  1. 块级元素——flex（不固定高度）

flex 布局下对 flex 容器使用 align-items: center (非align-content，辨析见align-items和align-content区别)

优点：高度不固定、优雅的溢出

缺点：不支持IE8/9，可能要加浏览器前缀

.container{  display:flex;  align-items:center;}
  1. 块级元素——transform（不固定高度）

父元素使用相对定位，子元素使用绝对定位。子元素顶部外边距边缘定位到距离非 static 定位祖先元素顶部50%偏移处，使用 transform: translateY(-50%) 向上平移元素自身高度的50%作为补偿

优点：高度不固定