干货！CSS开发速查全手册，常用属性介绍+示例+阅读推荐（上）

果冻cc
650 阅读36分钟

为什么要写这篇文章？

CSS技术发展到现在，已经成为了一项由80多项W3C规范所定义的复杂技术，包含了将近四五百个属性。CSS已经如此壮大，以致于一个普通人已经无法把它完整的装进自己的头脑了。所以，无论是作为一个CSS的初学者或者是熟练者，在编写CSS代码时，都会时不时的需要查询某一个属性的用法和规则。而这些知识点却分散在互联网的各个角落，我们必须借助搜索引擎查找。虽然有类似MDN这样的网站工具，但是它是以英文字母进行索引的，有时无法满足我们的需要。于是，有了这篇文章的产生，它并不是要代替MDN或者搜索引擎，而是它们的补充。

要将所有常用的属性通过功能用法将它们整理起来也不是一件容易的事情，本文以medium.com/free-cod... 这篇文章作为参考框架，进行翻译整理，并对其中过时的内容进行了删减，并增加了一些原文中没有涉及的新的内容。大部分的代码示例直接取自MDN，因为这些示例都非常棒。这篇文章在Word中总共写了有120多页，26000多字，真是一个庞大的工程，于是，我将它分为上下两个部分发布到这里。

如果你需要这篇文章的Word/PDF版，可以在文章的最后扫描我。

要想在一篇文章中包含CSS全部属性的所有知识点是不可能的，所以在单个章节的后面会提供有推荐阅读的文章链接。

这是两个部分中的上半部分，这篇文章中包含以下的内容：

CSS简介、添加CSS、选择器、属性选择器、伪类、伪元素、优先级、继承、盒模型、box-sizing、单位、背景 、字体、排版、边框、外边距、内边距。

文章下半部分会包含：

颜色、显示类型、定位、浮动和清除浮动、URL、Calc、注释、自定义属性、z-index、Flex、Grid、表格、居中、列表、媒体查询和响应式设计、功能查询、过滤器、Transform、过渡（Transition）、动画Animation）、Normalize.css、错误处理、浏览器前缀、打印

下面我们开始。

一、CSS简介

CSS (Cascading Style Sheets) 是用来样式化和排版你的网页的 —— 例如更改网页内容的字体、颜色、大小和间距，将内容分割成多列或者加入动画以及别的装饰型效果。它是一种用于向用户指定文档如何呈现的语言 — 它们如何被指定样式、布局等。

CSS的优势

  1. 内容与表现分离
  2. 网页的表现统一，容易修改
  3. 丰富的样式，使页面布局更加灵活
  4. 减少网页的代码量，增加网页浏览器速度，节省网络带宽
  5. 运用独立页面的css,有利于网页被搜索引擎收录

CSS如何影响HTML

Web浏览器将CSS规则应用于文档以影响它们的显示方式。一个CSS规则由以下组成：

  • 一组属性，属性的值更新了 HTML 的内容的显示方式。比如，我想让元素的宽度是其父元素的50％，或者元素背景变为红色。
  • 一个选择器，它选择元素，这（些）元素是你想应用这些最新的属性值于其上的元素。比如，我想将我的CSS规则应用到我HTML文档中的所有段落上。

二、添加CSS

有三种的不同方式将 CSS 应用到 HTML 文档上：

1.外部样式表

外部样式表是指：当你将你的 CSS 保存在一个独立的扩展名为 .css 的文件中，并从HTML的 <link> 元素中引用它。此时 HTML 文件看起来像这样：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS测试页</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>这是一个CSS引用示例</p>
  </body>
</html>

以及下面的CSS文件：

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}

这种方法可以说是最好的，因为你可以使用一个样式表来设置多个文档的样式，并且需要更新 CSS 的时候只要在一个地方更新。

2.内部样式表

内部样式表是指不使用外部 CSS 文件，而是将你的 CSS 放置在<style> 元素中，该元素包含在 HTML head 内。此时HTML看起来像这样：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS测试页</title>
    <style>
      h1 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }

      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>这是一个CSS引用示例</p>
  </body>
</html>

这在某些情况下很有用，但它不如外部样式表高效 —— 在网站中，CSS 将需要在每个页面重复，并且需要更新时要更改的多个位置。

3.内联样式

内联样式是仅影响一个元素的CSS声明，被style属性包括着:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS测试页</title>
  </head>
  <body>
    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>
    <p style="color:red;">这是一个CSS引用示例</p>
  </body>
</html>

除非有必要，否则不要使用这种方法！因为它很难维护，并且它还混合了 CSS 表示的样式信息和 HTML 的结构信息，使 CSS 难以阅读和理解。保持不同类型代码的分离才能使开发人员的工作更为容易。

三、选择器

CSS 选择器规定了 CSS 规则会应用到哪些元素上。

基本选择器

假设我们在页面上有一个p元素，并且我们希望p元素中的文字显示为黄色。

我们可以使用类型选择器来选择页面中所有某种类型的元素，这里我们就可以使用p来选择所有的p元素，CSS的写法如下：

p {
  color: yellow;
}

每一个HTML标签都可以作为CSS的选择器，比如：div，span，img等。

如果一个类型选择器在页面中匹配到了多个元素，那么这些元素都会被CSS的设置所影响。

除了类型选择器，还有两种非常常用的选择器：class选择器和ID选择器，它们用于选择页面上特定的元素。

这两种选择器有一个最大的区别，class的值可以在多个元素上进行设置，但是一个文档中每个元素的ID应该是唯一的。

Class选择器的语法是.classname，ID选择器的语法是#idname。

Class选择器示例：

<p class="dog-name">
  姓名
</p>

.dog-name {
  color: yellow;
}

clipboard.png

ID选择器示例：

<p id="dog-name">
  姓名
</p>

#dog-name {
  color: yellow;
}

clipboard.png

通用选择器

通用选择器选择所有节点。它也常常和一个名词空间配合使用，用来选择该空间下的所有元素。例如：

.name * {
  color: yellow;
}

组合选择器

CSS还支持更强大的组合选择器。

通过class或者ID作为类型选择器的附属来选择元素。

如下示例：

使用class

<p class="dog-name">
  姓名
</p>

p.dog-name {
  color: yellow;
}

使用ID

<p id="dog-name">
  姓名
</p>

p#dog-name {
  color: yellow;
}

上面我们使用class或ID选择器就可以选择多个或某个元素，为什么这里还要在前面加上元素的类型呢？这样做的原因是为了提高选择器的优先级，使它里面的CSS样式覆盖之前低级别的样式。有关的具体内容请在优先级段落中查看。

多class选择器

你可以将两个class连在一起来选择某一个元素。

<p class="dog-name roger">
  姓名
</p>

.dog-name.roger {
  color: yellow;
}

clipboard.png

Class与ID组合

<p class="dog-name" id="roger">
  姓名
</p>

.dog-name#roger {
  color: yellow;
}

clipboard.png

分组选择器

你可以将相同的CSS样式作用于不同的选择器上，使用逗号来间隔每个选择器：

<p>
  姓名:
</p>
<span class="dog-name">
  张三
</span>

p, .dog-name {
  color: yellow;
}

clipboard.png

也可以使每个选择器占用一行来让代码更清晰：

p,
.dog-name {
  color: yellow;
}

后代选择器

如果有一个span标签它嵌套在一个p标签中，我们就可以通过后代选择器来选择所有p元素中的span元素，而不在p元素中的span元素则不会被选择。后代选择器使用’ ’空格操作符。

<span>
  你好!
</span>
<p>
  姓名:
  <span class="dog-name">
    张三
  </span>
</p>

p span {
  color: yellow;
}

clipboard.png

后代选择器不但可以选择一个元素的子元素，它的孙元素都是可以被选择的。

子元素选择器

如果我们规定只能选择子元素，则要使用子元素选择器，它使用’>’操作符。

p > span {
  color: yellow;
}

这样只有直接嵌套在p元素的所有span元素才会改变颜色。

clipboard.png

相邻兄弟选择器

'+' 操作符可以选择相邻的元素，即第二个元素紧邻着第一个元素，并且拥有共同的父元素。

<p>这是一行文字</p>
<span>这行文字是黄色的</span>

p + span {
  color: yellow;
}

clipboard.png

通用兄弟选择器

'~' 操作符选择兄弟元素，也就是说，后面的元素在第一个元素后面的任意位置，并且这俩元素的父元素相同。

<p>这是一行文字</p>
<span>我们都是黄色的</span>
<span>我们都是黄色的</span>
<span>我们都是黄色的</span>

p ~ span {
  color: yellow;
}

clipboard.png

除了以上的选择器外，还有这几种选择器：

  • 属性选择器
  • 伪类
  • 伪元素

我会将这三个单独出来，分别在各自的段落中进行介绍。

四、属性选择器

CSS属性选择器通过已经存在的属性名或属性值匹配元素。

属性存在选择器

第一类选择器称为属性存在选择器。我们使用[]语法来判断元素是否具有某个属性。例如，p[id]会选择页面中具有ID属性的所有p元素，无论其属性值是什么。

p[id] {
  /* ... */
}

精确属性值选择器

在中括号内，我们可以指定属性的值，只有当属性和值都精确匹配时，才会应用相应的CSS样式。

p[id="my-id"] {
  /* ... */
}

属性值模糊匹配选择器

[attr=value]代表完全匹配，另外还有一些模糊匹配的运算符：

  • [attr*=value]：表示带有以 attr 命名的属性，且属性值包含有"value"的元素。
  • [attr^=value]：表示带有以 attr 命名的属性，且属性值是以"value"开头的元素。
  • [attr$=value]：表示带有以 attr 命名的属性，且属性值是以"value"结尾的元素。
  • [attr|=value]：表示带有以 attr 命名的属性，且属性值为“value”或是以“value-”为前缀的元素。
  • [attr~=value]：表示带有以 attr 命名的属性，且属性值是一个以空格作为分隔的列表，其中至少一个值匹配"value"的元素。

以上所有属性选择器的值都是区分大小写的。

如果在右括号前添加一个字母i，则会忽略属性值的大小写。它在很多浏览器中都被支持，但并非全部的，请访问CaniUse查看兼容性。

五、伪类

伪类是添加到选择器的关键字，指定要选择的元素的特殊状态。例如，:hover可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。

所有的伪类的开头都是一个冒号‘:’

下面列出了最常用的一些伪类：

  • :active - 匹配被用户激活的元素。当用鼠标交互时，它代表的是用户按下按键和松开按键之间的时间。
  • :checked - 表示任何处于选中状态的radio、checkbox或select元素中的option元素。
  • :default - 设置表单控件默认值的样式。
  • :disabled - 表示任何被禁用的元素。
  • :empty - 代表没有子元素的元素。
  • :enabled - 表示任何启用的元素（相对于:disabled）。
  • :first-child - 表示在一组兄弟元素中的第一个元素。
  • :focus - 表示获得焦点的元素（如表单输入）。当用户点击或触摸元素或通过键盘的 “tab” 键选择它时会被触发。
  • :hover - 设置鼠标悬停在某个元素上的样式。
  • :last-child - 代表父元素的最后一个子元素。
  • :link - 选中所有尚未访问的链接。
  • :not(X) - 匹配不符合参数选择器X描述的元素。例如：p:not(.fancy)选择类名不是.fancy的p元素。
  • :nth-child() - 选择指定位置的元素。
  • :nth-last-child() - 选择指定位置的元素，但是从最后一个元素开始计算。
  • :only-child - 代表属于某个父元素的唯一一个子元素。
  • :required - 表示设置了required属性的元素。
  • :root - 匹配文档树的根元素。对于 HTML 来说，:root表示<html>元素。
  • :target - 代表一个唯一的页面元素(目标元素)，其ID与当前URL片段匹配。
  • :valid - 表示内容验证正确的<input>或其他<form>元素。
  • :visited - 表示用户已访问过的链接。

举个例子，比如页面上有一个a链接，我们将它的文字设置为黄色。

a {
  color: yellow;
}

但是，当我们用鼠标点击这个链接时和它被访问之后，再看这个a元素，它的文字颜色就变为蓝色了。原因在于鼠标单击时a链接会改变状态，变为:active状态。当它被访问后，它处于:visited状态，除非用户清除了浏览历史记录。

因此，要使a链接在所有状态中都显示为黄色，需要这样写：

a,
a:visited,
a:active {
  color: yellow;
}

:nth-child()伪类的括号中要填写一个表达式，形如an+b，下面列举一些表达式的示例：

  • tr:nth-child(2n+1)/tr:nth-child(odd) - 表示HTML表格中的奇数行。
  • tr:nth-child(2n)/tr:nth-child(even) - 表示HTML表格中的偶数行。
  • span:nth-child(0n+1) - 表示子元素中第一个且为span的元素，与 :first-child 选择器作用相同。
  • span:nth-child(1) - 表示父元素中子元素为第一的并且名字为span的标签被选中。
  • span:nth-child(-n+3) - 匹配前三个子元素中的span元素。

:not()伪类小技巧：

当我们要为一个导航菜单的每个li元素添加分割线时，一般会这么做：

先为元素添加边框

/* 添加边框 */
.nav li {
  border-right: 1px solid #666;
}

然后为最后一个元素去除边框

/* 去掉边框 */
.nav li:last-child {
  border-right: none;
}

这样设置太麻烦，使用 :not() 伪类来达到同样的效果：

.nav li:not(:last-child) {
  border-right: 1px solid #666;
}

六、伪元素

伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。比如::first-line伪元素可改变段落首行文字的样式。

伪元素以两个冒号‘::’开头。

一个选择器中只能使用一个伪元素。伪元素必须紧跟在语句中的简单选择器/基础选择器之后。

注意：按照规范，应该使用双冒号（::）而不是单个冒号（:），以便区分伪类和伪元素。但是，由于旧版本的W3C规范并未对此进行特别区分，因此目前绝大多数的浏览器都同时支持使用这两种方式来表示伪元素。

以下列举了一些常用的伪元素：

  • ::after - 创建一个伪元素，作为已选中元素的最后一个子元素。
  • ::before - 创建一个伪元素，其将成为匹配选中的元素的第一个子元素。
  • ::first-letter - 选中某块级元素的第一行的第一个字母。
  • ::first-line - 选中某块级元素的第一行。
  • ::selection - 应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）。

举个例子，我们让每个段落的第一行字体变大一些：

p::first-line {
  font-size: 1.6rem;
}

clipboard.png

或者让每段的一个文字变为粗体红色：

p::first-letter {
  font-weight: bolder;
  color: red;
}

clipboard.png

也可以通过::before和::after伪元素在文字的前面或者后面插入其它的内容：

.boring-text::before {
   content: "无聊! ->";
   color: red;
}
.exciting-text::after {
  content: "<- 让人兴兴兴奋!"; 
  color: green;
}

clipboard.png

七、优先级

当同一个元素有多个声明（不同的选择器）的时候，会发生什么情况，尤其是属性相同时会如何影响元素？

举个例子，假如页面上有一个p元素：

<p class="dog-name">
  姓名
</p>

我们使用class选择器设置文字的颜色：

.dog-name {
  color: yellow;
}

然后又使用类型选择器将文字设置为另一个颜色：

p {
  color: red;
}

那么，页面上文字的颜色应该是什么呢？为什么？

这就涉及到了CSS的优先级，优先级就是分配给指定的CSS声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。数值高的选择器会覆盖数值低的选择器，当数值相等的时候，后面的声明将会被应用到元素上。

如何计算优先级的数值？

优先级的计算有一套规则。

我们将所有的CSS选择器划分为四个等级，每一个等级都是从0开始，写出来是这样：0 0 0 0。这四个等级中最左边的级别最高，而最右边的级别最低。比如，1 0 0 0要高于0 1 0 0，而0 0 0 1是最低的。

下面，我们来分别介绍这四个等级。

等级1

第一个等级，就是最右边的数字，它的级别是最低的。

等级1的选择器主要指类型选择器，当选择器中有一个类型选择器时，就将数字的值加1，如果有多个类型选择器，那么就将数字的值变为选择器的个数。

例如：

p {}                    /* 0 0 0 1 */
span {}                 /* 0 0 0 1 */
p span {}               /* 0 0 0 2 */
p > span {}             /* 0 0 0 2 */
div p > span {}         /* 0 0 0 3 */

等级2

等级2的选择器有三种：

  • class选择器
  • 伪类选择器
  • 属性选择器

它们对应的是右边第二个数字。

.name {}                 /* 0 0 1 0 */
.users .name {}          /* 0 0 2 0 */
[href$='.pdf'] {}        /* 0 0 1 0 */
:hover {}                /* 0 0 1 0 */

等级2的选择器可以和等级1的混合使用：

div .name {}             /* 0 0 1 1 */
a[href$='.pdf'] {}       /* 0 0 1 1 */
.pictures img:hover {}   /* 0 0 2 1 */

这里有一个技巧，我们可以重复class选择器来提高选择器的优先级：

.name {}              /* 0 0 1 0 */
.name.name {}         /* 0 0 2 0 */
.name.name.name {}    /* 0 0 3 0 */

等级3

等级3的选择器主要指ID选择器。

#name {}                    /* 0 1 0 0 */
.user #name {}              /* 0 1 1 0 */
#name span {}               /* 0 1 0 1 */

等级4

等级4主要指内联样式，它的等级是最高的。

<p style="color: red">Test</p> /* 1 0 0 0 */

从等级1到等级4，选择器的优先级增大，高级别的选择器会覆盖低级别选择器的样式。当然，还有一个等级5的关键字，它就是!important，但是我们不建议使用它。

本段的最后送给你一个在线的工具（英文），它可以自动计算选择器的优先级等级。

有关CSS优先级的更多内容可以阅读MDN文章《CSS优先级》

八、继承

CSS中，子元素可以从父元素继承部分的属性。这里说的是部分，并不是全部的属性。

某些属性被继承是有意义的，这有助于我们编写更简洁的CSS，因为我们不必在每个子元素上重复设置该属性。

支持的继承的属性

以下列举了一些比较常用的默认可继承属性。

  • border-collapse
  • border-spacing
  • caption-side
  • color
  • cursor
  • direction
  • empty-cells
  • font-family
  • font-size
  • font-style
  • font-variant
  • font-weight
  • font-size-adjust
  • font-stretch
  • font
  • letter-spacing
  • line-height
  • list-style-image
  • list-style-position
  • list-style-type
  • list-style
  • orphans
  • quotes
  • tab-size
  • text-align
  • text-align-last
  • text-decoration-color
  • text-indent
  • text-justify
  • text-shadow
  • text-transform
  • visibility
  • white-space
  • widows
  • word-break
  • word-spacing

举个例子：

<p>这段文字包含<em>一些可以继承颜色的</em>文字。</p>

p { color: green; }

em元素中的文字会自动继承它父元素p元素所设置的颜色：

clipboard.png

强制属性继承

要让一个不是默认继承的属性继承它的父元素属性应该怎么做？应该使用关键字inherit。

body {
  background-color: yellow;
}
p {
  background-color: inherit;
}

强制属性不继承

CSS中有一个revert关键字，它可以将属性值恢复为浏览器默认的原始值，而不是从父元素继承。但是，这个关键字的浏览器支持性并不是很好，所以很少使用它。所以一般常用的方法就是给属性另设置一个值来覆盖从父元素继承来的值。

其它

除了以上的inherit与revert，CSS还有两个关键字：

  • initial：将属性的初始（或默认）值应用于元素，用于将所有CSS属性恢复到其初始状态。
  • unset：如果属性值从其父级继承，则将该属性设置为继承的值，如果没有继承父级样式，则将该属性重新设置为初始值。换句话说它会优先用 inherit 的样式，其次会应该用initial的样式。

九、盒模型

当对一个文档进行布局的时候，浏览器的渲染引擎会根据CSS基础框盒模型，将所有元素表示为一个个矩形的盒子。

盒模型解释了元素的大小。

每个盒子由四个部分（或称区域）组成：

  • 内容区域
  • padding
  • border
  • margin

用图片看起来会更直观：

clipboard.png

浅蓝色的区域是内容区域，它的四周是padding，然后再往外是border和margin。

默认情况下，在元素上设置width或height，将作用于内容区域，所有的padding、border都是在width和height之外的，我们在布局计算时要注意这点。

当然，通过box-sizing属性可以改变元素的计算方式，我们马上就会介绍。

十、Box-sizing

box-sizing属性定义了浏览器应该如何计算一个元素的总宽度和总高度。

在盒模型的默认定义里，对一个元素所设置的width与height只会应用到这个元素的内容区域。如果这个元素有任何的border或padding，绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。

当我们实现响应式布局时，这个特点尤其烦人。

box-sizing属性可以被用来调整这些表现，这个属性有两个值：

  • content-box：默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
  • border-box：设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。

举个例子，如图：

clipboard.png

第一个div的总宽度是：160px + (2 * 20px) + (2 * 8px) = 216px，总高度是：80px + (2 * 20px) + (2 * 8px) = 136px；

而第二个div的总宽度就是160px，总高度是80px，是不是这样更简单。

我们经常会在一些CSS代码的开头看到这样的设置：

*, *:before, *:after {
  box-sizing: border-box;
}

将所有元素的尺寸计算都变为了border-box方式，这样对于页面布局来说会更加的容易方便。

十一、单位

单位是我们在CSS中最常用的内容之一，许多CSS属性使用它，比如width、margin、padding、font-size、border-width、text-shadow等。

下面的内容中，将逐一介绍CSS的各种单位。

像素

最广泛使用的单位。与显示设备相关，对于屏幕显示，通常是一个设备像素（点）的显示，对于打印机和高分辨率的屏幕，一个CSS像素意味着多个设备像素，因此，每英寸的像素的数量保持在96左右。

百分比

百分比值经常是根据父对象来确定大小。百分比值由一个<number>具体数值后跟着%符号构成。就像其它css里的单位一样，在%和数值之间是不允许有空格的。

许多长度属性使用百分比，如 width, height, margin, padding。百分比也可以在 font-size 属性看到，其中的文字大小是与其父级元素的文字大小直接相关。

举个例子：

.parent {
  width: 400px;
}
.child {
  width: 50%; /* = 200px */
}

线下单位

这里的线下单位指电脑出现之前我们真实世界中的各种测量单位。

  • cm：一厘米（映射到屏幕上是37.8px）
  • mm：一毫米（0.1cm）
  • q：一毫米的四分之一
  • in：一英寸（映射到屏幕上是96px）
  • pt：1英寸 = 72pt
  • pc：1pc = 12pt

相对单位

  • em：这个单位表示元素的font-size的计算值。如果用在font-size属性本身，它会继承父元素的font-size。
  • rem：与em相似，它代表根元素的font-size大小（例如<html>元素的font-size）。当用在根元素的font-size上面时，它代表了它的初始值。我们可以只需设置一次字体的大小，然后对整个页面的元素尺寸做整体的控制。
  • ex：指字母‘x’的高度，不同的字体它的高度是不一样的。对于很多字体， 1ex ≈ 0.5em。
  • ch：与ex单位类似，它值字符‘0’的高度。

视区比例单位

  • vw：表示视区宽度的百分比，1vw = 视口宽度的 1/100。
  • vh：表示视区高度的百分比，1vh = 视口高度的 1/100。
  • vmin：看视区高度和宽度之间谁最小，1vmin = 最小值的 1/100。
  • vmax：看视区高度和宽度之间谁最大，1vmax = 最大值的 1/100。

fr

fr单位表示网格（grid）容器中的一段可变长度。于grid-template-columns、grid-template-rows及相关属性中使用。

有关单位相关的知识可以阅读文章《CSS: em, px, pt, cm, in…》和《7个你可能不认识的CSS单位》

十二、背景

通过下面与背景相关的属性可以改变元素的背景颜色或背景图片样式。

  • background-color
  • background-image
  • background-clip
  • background-position
  • background-origin
  • background-repeat
  • background-attachment
  • background-size

background是上面这些属性的简写形式，用于一次性集中定义各种背景属性，包括color, image, origin与size, repeat方式等等。

background-color属性用于改变元素的背景颜色，属性的值为颜色值或关键字"transparent"。

p {
  background-color: yellow;
}
div {
  background-color: #333;
}

clipboard.png

background-image属性用于为一个元素设置一个或者多个背景图像，通过指定图像位置URL来引入图片。

div {
  background-image: url(image.png);
}

background-clip设置元素的背景（背景图片或颜色）是否延伸到边框下面。它有四个值：

  • border-box：默认值，背景延伸至边框外沿（但是在边框下层）。
  • padding-box：背景延伸至内边距（padding）外沿。不会绘制到边框处。
  • content-box：背景被裁剪至内容区（content box）外沿。
  • text：背景被裁剪成文字的前景色。

以下是MDN上的示例截图：

图片描述

background-position 为每一个背景图片设置初始位置。这个位置是相对于由 background-origin 定义的位置图层的。

/* 关键字值 */
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;

/* 百分比值 */
background-position: 25% 75%;

/* 长度值 */
background-position: 0 0;
background-position: 1cm 2cm;
background-position: 10ch 8em;

/* 多图设置 */
background-position: 0 0, center;

/* 偏移值 */
background-position: bottom 10px right 20px;
background-position: right 3em bottom 10px;
background-position: bottom 10px right;
background-position: top right 10px;

/* 全局值 */
background-position: inherit;
background-position: initial;
background-position: unset;

示例：

图片描述

如果背景图片小于元素的大小，可以通过background-repeat属性指定背景图像的重复方式。背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。

/* 单值语法 */
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;

/* 双值语法: 水平horizontal | 垂直vertical */
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;

background-repeat: inherit;

示例：

图片描述

background-origin规定了背景图片的原点位置。它有三个值：

background-origin: border-box
background-origin: padding-box
background-origin: content-box

当使用background-attachment为fixed时，该属性将被忽略不起作用。

background-attachment属性决定背景图像的位置是在视口内固定，还是随着包含它的区块滚动。它也有三个值：

background-attachment: scroll; /* 表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。 */
background-attachment: fixed;  /* 表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动， 并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。 */
background-attachment: local;  /* 表示背景相对于元素本身固定， 而不是随着它的内容滚动. */

最后一个属性是background-size，它设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。

/* 关键字 */
background-size: cover
background-size: contain

/* 一个值: 这个值指定图片的宽度，图片的高度隐式的为auto */
background-size: 50%
background-size: 3em
background-size: 12px
background-size: auto

/* 两个值 */
/* 第一个值指定图片的宽度，第二个值指定图片的高度 */
background-size: 50% auto
background-size: 3em 25%
background-size: auto 6px
background-size: auto auto

/* 逗号分隔的多个值：设置多重背景 */
background-size: auto, auto     /* 不同于background-size: auto auto */
background-size: 50%, 25%, 25%
background-size: 6px, auto, contain

/* 全局属性 */
background-size: inherit;
background-size: initial;
background-size: unset;

示例

图片描述

注意：没有被背景图片覆盖的背景区域仍然会显示用background-color属性设置的背景颜色。此外，如果背景图片设置了透明或者半透明属性，衬在背景图片后面的背景色也会显示出来。

十三、字体

font属性是以下属性的简写：

  • font-family
  • font-weight
  • font-stretch
  • font-style
  • font-size

它们分别设置页面文字的字体、粗细、斜体和大小等样式。

图片描述

下面我们来分别看一下这些以‘font-’开头的属性。

font-family允许您通过给定一个有先后顺序的，由字体名或者字体族名组成的列表来为选定的元素设置字体。

.serif {
    font-family: Times, Times New Roman, Georgia, serif;
}
.sansserif {
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
.monospace {
    font-family: "Lucida Console", Courier, monospace;
}

属性的值用逗号隔开。浏览器会选择列表中第一个该计算机上有安装的字体，或者是通过 @font-face 指定的可以直接下载的字体。

通用字体族名是一种备选机制，用于在指定的字体不可用时给出较好的字体。通用字体族名都是关键字，所以不可以加引号。 在列表的末尾应该至少有一个通用字体族名。 以下是该属性可能的取值以及他们的定义。

  • Serif

    带衬线字体，笔画结尾有特殊的装饰线或衬线。 例如： Lucida Bright, Lucida Fax, Palatino,
    "Palatino Linotype", Palladio, "URW Palladio", serif。

  • Sans-Serif
    无衬线字体，即笔画结尾是平滑的字体。 例如， "Open Sans", "Fira Sans", "Lucida Sans",
    "Lucida Sans Unicode", "Trebuchet MS", "Liberation Sans", "Nimbus
    Sans L", sans-serif。
  • Monospace
    等宽字体，即字体中每个字宽度相同。 例如， "Fira Mono", "DejaVu Sans Mono", Menlo,
    Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace。
  • cursive
    草书字体。这种字体有的有连笔，有的还有特殊的斜体效果。因为一般这种字体都有一点连笔效果，所以会给人一种手写的感觉。
    例如， "Brush Script MT", "Brush Script Std", "Lucida Calligraphy","Lucida Handwriting", "Apple Chancery", cursive。
  • fantasy
    Fantasy字体主要是那些具有特殊艺术效果的字体。
    例如，Papyrus, Herculanum, Party LET, Curlz MT, Harrington, fantasy。

font-weight属性指定了字体的粗细程度。你可以使用这些关键字：

  • normal
  • bold
  • bolder (相对于父元素)
  • lighter (相对于父元素)

也可以使用数值：

  • 100
  • 200
  • 300
  • 400, 等同于normal
  • 500
  • 600
  • 700，等同于bold
  • 800
  • 900

100是最细的字体，900是最粗的字体。

这些反映字体粗细的数值并不是每个字体都支持的，如果指定的数值不可用，则使用以下规则来确定实际呈现的文字粗细：

  • 如果指定的数值在 400和 500之间（包括400和500）： 按升序查找指定值与500之间的可用数值；如果未找到匹配项，按降序查找小于指定值的可用数值； 如果未找到匹配项，按升序查找大于500的可用数值。
  • 如果指定值小于400，按降序查找小于指定值的可用数值。 如果未找到匹配项，按升序查找大于指定值的可用数值（先尽可能的小，再尽可能的大）。
  • 如果指定值大于500，按升序查找大于指定值的可用数值。 如果未找到匹配项，按降序查找小于指定值的可用数值（先尽可能的大，再尽可能的小）。

以上策略意味着，如果一个字体只有 normal 和 bold 两种粗细值选择，指定粗细值为 100-500 时，实际渲染时将使用 normal，指定粗细值为 600-900 时，实际渲染时将使用 bold 。

font-style属性允许你将字体设置为斜体样式。

font-style: normal;
font-style: italic;
font-style: oblique;

clipboard.png

italic与oblique都表示文字的斜体，它们之间的差别是细微的，我们经常用的是italic。

font-size属性指定字体的大小。

因为该属性的值会被用于计算em和ex长度单位，所以改变该值可能改变其他元素的大小。

font-size支持两种类型的值：

  1. 长度值，例如px，em，rem等单位，还有百分比值。

  2. 关键字值，包括：

    • xx-small
    • x-small
    • medium
    • large
    • x-large
    • xx-large
    • smaller (相对于父元素)
    • larger (相对于父元素)

使用示例：

p {
  font-size: 20px;
}
li {
  font-size: medium;
}

使用@font-face加载自定义字体

@font-face允许你从远程服务器或者用户本地添加字体，这个字体将由浏览器自动下载并在页面中使用。

@font-face可以消除对用户电脑字体的依赖。例如，我们引用一个叫做“MyHelvetica”的第三方字体：

@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"),
  local("HelveticaNeue-Bold"),
  url(MgOpenModernaBold.ttf);
  font-weight: bold;
}

local()函数表示从用户本地查找指定的字体名称，如果找到了一个匹配项, 本地字体就会被使用；否则, 浏览器就会使用url()函数指定的地址下载相应的字体资源。

通过@font-face引用的字体支持以下的格式：

  • woff (Web Open Font Format)
  • woff2 (Web Open Font Format 2.0)
  • eot (Embedded Open Type)
  • otf (OpenType Font)
  • ttf (TrueType Font)

下面的属性允许我们定义要加载的字体的样式：

  • font-family
  • font-weight
  • font-style
  • font-stretch

一点提示：@font-face引用第三方字体会依赖网络，不同的网络情况下加载的性能也是不一样的，我们必须在开发时考虑到这一点。

十四、排版

本节中，我们将讨论以下的属性：

  • text-transform
  • text-decoration
  • text-align
  • vertical-align
  • line-height
  • text-indent
  • text-align-last
  • word-spacing
  • letter-spacing
  • text-shadow
  • white-space
  • tab-size
  • writing-mode
  • hyphens
  • text-orientation
  • direction
  • line-break
  • word-break
  • overflow-wrap

text-transform

text-transform属性可以转换文本的大小写。它有四个值：

  • capitalize：每个单词的第一个字母大写。
  • uppercase：全部文本大写。
  • lowercase：全部文本小写。
  • none：禁用转换文本大小写，用于避免继承属性。

举个例子：

clipboard.png

当然，这个属性对中文就没有意义了，因为中文没有大小写的区分。

text-decoration

text-decoration属性是用于向文本添加装饰效果，包括：

  • underline：下划线
  • overline：顶划线
  • line-through：删除线
  • blink：闪烁
  • none：什么效果也没有

还可以设置装饰效果的样式和颜色。

比如：

clipboard.png

可用的样式值有：solid（实线）, double（双实线）, dotted（点划线）, dashed（虚线）, wavy（波浪线）。

text-decoration属性实际上是text-decoration-line，text-decoration-color，text-decoration-style三个属性的简写形式。

text-align

text-align定义行内内容（例如文字）如何相对它的块父元素对齐。text-align 并不控制块元素自己的对齐，只控制它的行内内容的对齐。

这个属性支持的值有：

  • start：默认值，如果内容方向是左至右，则等于left，反之则为right。
  • end：如果内容方向是左至右，则等于right，反之则为left。
  • left：行内内容向左侧边对齐。
  • right：行内内容向右侧边对齐。
  • center：行内内容居中。
  • justify：文字向两侧对齐，对最后一行无效。
  • justify-all：和justify一致，但是强制使最后一行两端对齐。

示例：

clipboard.png

vertical-align

vertical-align属性用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。

vertical-align属性可被用于两种环境：

  • 使行内元素盒模型与其行内元素容器垂直对齐。
  • 垂直对齐表格单元内容。

不能用它垂直对齐块级元素。

vertical-align属性支持的值有很多：

  • baseline：默认值，使元素的基线与父元素的基线对齐。
  • sub：使元素的基线与父元素的下标基线对齐。
  • super：使元素的基线与父元素的上标基线对齐。
  • top：使元素及其后代元素的顶部与整行的顶部对齐。
  • text-top：使元素的顶部与父元素的字体顶部对齐。
  • middle：使元素的中部与父元素的基线加上父元素x-height的一半对齐。
  • bottom：使元素及其后代元素的底部与整行的底部对齐。
  • text-bottom：使元素的底部与父元素的字体底部对齐。

示例：

图片描述

line-height

line-height属性用于设置多行元素的空间量，如多行文本的间距。对于块级元素，它指定元素行盒（line boxes）的最小高度。对于非替代的 inline 元素，它用于计算行盒（line box）的高度。

line-height 属性被指定为以下任何一个：

  • 一个数字
  • 一个长度
  • 一个百分比
  • 关键词 normal。

示例：

图片描述

text-indent

text-indent属性设置一个段落的第一行文字的缩进距离。

例如：

p {
  text-indent: -10px;
}

text-align-last

默认情况下，段落的最后一行文本的对齐方式是参照text-align的，使用text-align-last属性可以更改它的对齐规则。

例如：

p {
  text-align-last: right;
}

word-spacing

设置单词之间的间距。

例如：

p {
  word-spacing: 2px;
}
span {
  word-spacing: -0.2em;
}
.a {
  word-spacing: normal;
}

letter-spacing

设置字符之间的间距。

例如：

p {
  letter-spacing: 0.2px;
}
span {
  letter-spacing: -0.2em;
}
.a {
  letter-spacing: normal;
}

text-shadow

text-shadow属性为文字添加阴影。可以为文字与 text-decorations 添加多个阴影，阴影值之间用逗号隔开。

每个阴影都有两到三个<length>参数 ， 以及一个与阴影颜色相关的<color>参数 。 前两个<length>参数，是以“文字中心”为原点的坐标轴，分别为x轴 <offset-x> 和y轴 <offset-y> 的值； 如果有第三个<length>参数，则第三个数值为形成阴影效果的半径的数值 <blur-radius> 。

如果未指定<color>颜色，阴影将使用文本颜色。

示例：

图片描述

white-space

white-space属性用来处理元素中的空白。

会合并空白的值有：

  • normal：默认值，连续的空白符会被合并，换行符会被当作空白符来处理。填充line盒子时，必要的话会换行。
  • nowrap：和 normal 一样，连续的空白符会被合并。但文本内的换行无效。
  • pre-line：连续的空白符会被合并。在遇到换行符或者
    元素，或者需要为了填充line盒子时会换行。

会保留空白的值有：

  • pre：连续的空白符会被保留。在遇到换行符或者
    元素时才会换行。
  • pre-wrap：连续的空白符会被保留。在遇到换行符或者
    元素，或者需要为了填充line盒子时才会换行。

下面的表格总结了各种white-space值的行为：

clipboard.png

tab-size

设置制表符的宽度。默认值是8，可以设置一个整数或者长度值来改变。

p {
  tab-size: 2;
}
span {
  tab-size: 4px;
}

writing-mode

定义文本行是水平还是垂直排列，以及阻止块级元素中文本前进的方向。

可用的值有：

  • horizontal-tb：默认值
  • vertical-rl：内容是垂直排列的。新行放在前一行的左边。
  • vertical-lr：内容是垂直排列的。新行放在前一行的右边。

direction

direction 用来设置文本、表列水平排列的方向。rtl 表示从右到左 (类似希伯来语或阿拉伯语)，ltr 表示从左到右 (类似英语等大部分语言)。

示例：

图片描述

word-break

word-break属性指定了怎样在单词内断行。有三个值：

  • normal：默认值，意味着文本只在单词之间断开，不会在单词内部。
  • break-all：浏览器可以在任意地方断开（但不添加连字符）。
  • keep-all：主要用于CJK（中文/日文/韩文）文本，不断行。

示例：

图片描述

十五、边框border

border属性是一个用于为元素设置边框的简写属性。边框位于元素margin与padding之间。

border可以用于设置一个或多个以下属性的值：

  • border-style
  • border-color
  • border-width

border-radius用于设置元素的外边框圆角。

你还可以将图片用作边框，实现这种效果的属性是border-image或者它的各种独立属性：

  • border-image-source
  • border-image-slice
  • border-image-width
  • border-image-outset
  • border-image-repeat

border属性示例：

图片描述

下面，就来详细介绍一下有关边框的每个属性，从border-style开始。

边框的样式

border-style是一个简写属性，用来设定元素边框的样式。支持的样式有：

  • dotted：圆点
  • dashed：虚线
  • solid：实线
  • double：双实线
  • groove：雕刻效果
  • ridge：浮雕效果
  • inset：陷入效果
  • outset：突出效果
  • none：默认值，不显示边框
  • hidden：不显示边框

示例：

clipboard.png

border-style默认值是none，这意味着如果您只修改border-width和border-color是不会出现边框的，除非您还将这个属性修改到none或hidden以外的值。

border-style是以下四个属性的简写形式：

  • border-top-style
  • border-right-style
  • border-bottom-style
  • border-left-style

你可通过这四个属性改变某一条边的样式。

边框的宽度

border-color属性可以设置元素的边框宽度。

你可以使用关键字值：

  • thin
  • medium (默认值)
  • thick

clipboard.png

或者使用px，em，rem单位或者其它表示长度的数值。

border-width也是以下四个属性的简写形式：

  • border-top-width
  • border-right-width
  • border-bottom-width
  • border-left-width

边框的颜色

border-width属性可以设置元素的边框颜色。

如果不设置边框的颜色，默认情况下边框会使用元素中文本的颜色。

代码示例：

/* border-color: color; 单值语法 */ 
border-color: red;

/* border-color: vertical horizontal; 双值语法*/
border-color: red #f015ca;

/* border-color: top horizontal bottom; 三值语法 */
border-color: red yellow green;

/* border-color: top right bottom left; 四值语法 */
border-color: red yellow green blue;

border-color: inherit

同样的，border-color也是一个简写属性：

  • border-top-color
  • border-right-color
  • border-bottom-color
  • border-left-color

边框圆角

border-radius属性允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。

来自MDN上的示意图：

clipboard.png

示例：

图片描述

有关border-radius属性的原理和技术短短的几句话是很难说清楚的，有关它更详细的分析大家可以阅读文章《秋月何时了，CSS3 border-radius知多少？》

border-image

最后一个有关边框的属性也是CSS中非常炫酷的一个属性，border-image允许在元素的边框上绘制图像，这使得绘制复杂的外观组件更加简单。使用border-image时，其将会替换掉border-style属性所设置的边框样式。

设置边框图像需要设置以下五个属性：

  • border-image-source
  • border-image-slice
  • border-image-width
  • border-image-outset
  • border-image-repeat

border-image是这五个属性的简写形式。

示例：
HTML

<div id="bitmap">图像被拉伸并填充边框区域。</div>

CSS

#bitmap { 
  border: 30px solid transparent;
  padding: 20px;
  border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 30;
}

clipboard.png

有关border-image属性的原理和更详细的说明请阅读《border-image边框图像详解》

十六、外边距（margin）

margin属性用于给元素四个（上下左右）方向添加外边距。

请记住：

  • margin在元素的边框外添加空间
  • padding在元素的边框内添加空间

margin是四个外边距属性设置的简写。四个外边距属性设置分别是：

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

它们的用法非常简单，例如：

margin-left: 30px;
margin-right: 3em;

magin简写

margin是一个简写属性，它接受1~4个可选参数，不同数量的参数代表的含义不同：

  • 一个值，这个值会被指定给全部的四个边。

    margin: 20px;

  • 两个值，第一个值被匹配给上边和下边, 第二个值被匹配给左边和右边。

    margin: 20px 10px;

  • 三个值，第一个值被匹配给上边, 第二个值被匹配给左边和右边, 第三个值被匹配给下边。

    margin: 20px 10px 30px;

  • 四个值，会依次按上边、右边、下边、左边的顺序匹配 (即顺时针顺序)。

    margin: 20px 10px 5px 0px;

接受的值类型

margin属性接受任何的长度单位值，最常见的是px、em、rem，以及百分比，还有一个auto。

使用auto来居中元素

auto可以让浏览器自动计算边距，它最常用的地方就是使块状元素居中。

margin: 0 auto;

在现代浏览器中，如果要把一些东西水平居中，使用 display:flex; justify-content: center;

然而, 在一些老的浏览器，如IE8-9, 这些是不可用的。想要把一个元素在其父元素中居中, 使用 margin: 0 auto。

使用负margin

margin可以取值为负数，并且十分有用。设置负的上边距会使元素本身向上移动，如果给定足够大的负值，它会被移出页面。

给元素设置负的下边距会使它下面的元素向上移动。

负的右边距会使元素的内容超出其允许的内容区域。

负的左边距将元素向左移动，如果给定足够大的负值，它将移出页面。

负margin更详细的内容请跳转至《深入理解CSS中的margin负值》了解学习。

十七、内边距（padding）

padding属性用于给元素四个（上下左右）方向添加内边距。

请记住：

  • margin在元素的边框外添加空间
  • padding在元素的边框内添加空间

padding是四个内边距属性设置的简写。四个内边距属性设置分别是：

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

padding区域指一个元素的内容和其边界之间的空间，使用非常简单：

padding-left: 30px;
padding-right: 3em;

该属性不能为负值。

padding简写

padding是一个简写属性，它接受1~4个可选参数，不同数量的参数代表的含义不同：

  • 一个值，这个值会被指定给全部的四个边。

    padding: 20px;

  • 两个值，第一个值被匹配给上边和下边, 第二个值被匹配给左边和右边。

    padding: 20px 10px;

  • 三个值，第一个值被匹配给上边, 第二个值被匹配给左边和右边, 第三个值被匹配给下边。

    padding: 20px 10px 30px;

  • 四个值，会依次按上边、右边、下边、左边的顺序匹配 (即顺时针顺序)。

    padding: 20px 10px 5px 0px;

接受的值类型

padding属性接受任何的长度单位值，最常见的是px、em、rem，以及百分比。


上半部分结束，未完待续。。。

如果你需要这篇文章的Word/PDF版，请：

图片描述

参考文档：
1.developer.mozilla.org/zh-CN/docs/…
2.www.ruanyifeng.com/blog/2017/0…
3.www.cnblogs.com/mofish/arch…
4.blog.shihshih.com/css-filter/
5.medium.com/free-code-c…


avatar
文章
阅读
粉丝