这是我参与「第五届青训营」笔记创作活动的第3天。

CSS选择器

1.什么是选择器

每一条 CSS 样式声明（定义）由两部分组成，形式如下：

选择器{
    样式;
}

在 {} 之前的部分是“选择器”，“选择器”是我们的 {} 中的“样式”的作用对象。例如：

p {
  color: red;
}

表示字体为红色的样式作用于 p 选择器。

2. 标签选择器

标签选择器也叫元素选择器。其实就是 html 代码中的标签，比如、、

、

、。

语法格式为：

标签名 {
  属性1: 属性值1;
  属性2: 属性值2;
  ...;
}

比如我们写个简单的 p 标签，里面随便写一句话，然后我们设置文字的颜色为红色。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <p>小牛马</p>
  </body>
</html>

3.类选择器

类选择器，是对 HTML 标签中 class 属性进行选择。CSS 类选择器的选择符是 "."。

类选择器命名规范：不能是纯数字，不能是标签名，不建议使用汉字。一般是点+对应样式描述。

例如：.shadow。

同样的拿前面的例子来说，我们为 p 标签加上一个 class 属性，然后通过 class 属性设置它的背景色为黄色。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      p {
        color: red;
      }
      .bgc {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <p class="bgc">小牛马</p>
  </body>
</html>

4.id 选择器

id 是对 HTML 标签中 id 属性进行选择。id 选择器的选择符是 "#"。任何元素都可以使用 id 属性设置唯一的 id 名称。这是选择单个元素的最有效的方式。

特别需要注意的是 id 选择器具有唯一性，也就是说同一个 HTML 页面不能有相同的 id 名称(使用多个相同的 id 选择器，浏览器不会报错但是不符合 W3C 标准)。

可以这样理解：一个人的名字（class 类名）可以有很多重名的，但是身份证号（id 名称）只能有一个唯一的，不能重复的。

语法格式为：

#id名 {
  属性1: 属性值1;
  属性2: 属性值2;
  ...;
}

我们为前面的例子设置一个 id 属性，通过 id 属性来设置高度。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      p {
        color: red;
      }
      .bgc {
        background-color: yellow;
      }
      #height {
        height: 100px;
      }
    </style>
  </head>
  <body>
    <p class="bgc" id="height">小牛马</p>
  </body>
</html>

5.通配符选择器

通配符选择器用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：

*{
    属性1：属性值1;
    属性2：属性值2;
    ...
}

我们一般使用通配符选择器定义 CSS 样式，清除所有 HTML 标记的默认边距。

* {
  margin: 0; /* 定义外边距*/
  padding: 0; /* 定义内边距*/
}

其他例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      * {
        color: red;
      }
    </style>
  </head>
  <body>
    <p>小牛</p>
    <span>小马</span>
    <strong>666</strong>
  </body>
</html>

7.标签指定式选择器

标签指定式选择器又称交集选择器，由两个选择器构成，其中第一个必须是标签选择器，第二个为 class 选择器或 id 选择器。两个选择器之间不能有空格。简单记忆为：并且的意思。即...又...的意思，比如 p.one 选择的是类名为 one 的段落标签。

例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      p {
        color: red;
      }
      p.one {
        color: blue;
      }
      p#two {
        color: yellow;
      }
    </style>
  </head>
  <body>
    <p>小牛马</p>
    <p class="one">小牛马</p>
    <p id="two">小牛马</p>
  </body>
</html>

8.后代选择器

后代选择器又叫包含选择器，用来选择元素或元素组的后代。其写法就是把外层标记写在前面，内层标记写在后面，中间用空格分隔。当标记发生嵌套时，内层标记就成为外层标记的后代。

例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      .one #two p {
        color: red;
      }
    </style>
  </head>
  <body>
    <div class="one">
      <div id="two">
        <p>小牛马</p>
      </div>
    </div>
  </body>
</html>

9.子代选择器

与后代选择器相比，子元素选择器只能选择作为某个元素的子元素。子选择器使用大于号（>）作为子结合符。

例如选择 p 元素的子元素 strong 元素，为其设置样式。你可以这么写：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      p > strong {
        color: red;
      }
    </style>
  </head>
  <body>
    <p>
      <strong>小牛马</strong>
      <strong>小牛马</strong>
    </p>
    <p>
      <em>
        <strong>小牛马</strong>
        <strong>小牛马</strong>
      </em>
    </p>
  </body>
</html>

注：上述例子中，只有第一个 p 标签中的两个 strong 元素变成了红色，而第二个 p 标签中的两个 strong 元素不受影响。

而如果改成后代选择器，上诉例子中的 style 标签里面改成下面的代码，其余代码不变：

<style>
    p strong {
        color: red;
    }
</style>

注：从上述两个例子中我们可以看出，子代选择器只选择指定标签的第一代子元素或者理解为它的直接后代（只指定儿子，而不管孙子），后代选择器是作用于所有子后代元素（不只儿子，还可以选择到孙子，重孙子等等）。

10.并集选择器

并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class 类选择器、id 选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的 CSS 样式。简单记忆为：和的意思。

例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      p,
      #one,
      .two {
        color: red;
      }
    </style>
  </head>
  <body>
    <p>我爱学习</p>
    <span id="one">我爱运动</span>
    <strong class="two">我爱睡觉</strong>
  </body>
</html>

注：上述例子表示 p 标签和 id 名为 one 的标签和 class 名为 two 的标签的样式为：颜色为红色。

11.属性选择器

属性选择器是根据元素的属性及属性值来选择元素。常用的几种属性选择器：

例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      p {
        color: blue;
      }
      p[title='one'] {
        color: red;
      }
      p[title~='two'] {
        color: green;
      }
      p[title|='three'] {
        color: pink;
      }
    </style>
  </head>

  <body>
    <p title="five">我爱学习</p>
    <p title="one">我爱运动</p>
    <p title="one two">我爱吃饭</p>
    <p title="three-four">我爱睡觉</p>
  </body>
</html>

12.伪类选择器

CSS 伪类用于向某些选择器添加特殊的效果。

常用的伪类。

:link 应用于未被访问过的链接。IE6 不兼容，解决此问题，直接使用 a 标签。

:hover 应用于有鼠标指针悬停于其上的元素。在 IE6 只能应用于 a 连接，IE7+ 所有元素都兼容。

:active 应用于被激活的元素，如被点击的链接、被按下的按钮等。

:visited 应用于已经被访问过的链接。

例子：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
      /*a:link{
            color: red;
        }*/
      /*链接默认状态*/
      a {
        color: red;
        text-decoration: none;
      }
      /*链接访问之后的状态*/
      a:visited {
        color: yellow;
      }
      /*鼠标放到链接上显示的状态*/
      a:hover {
        color: blue;
        text-decoration: line-through;
      }
      /*链接激活的状态*/
      a:active {
        color: pink;
      }
    </style>
  </head>
  <body>
    <a href="">xiaoniuma</a>
  </body>
</html>

注：我们可能会遇到被点击访问过的超链接不再具有 hover 和 active 了，解决办法是改变 CSS 属性的排列顺序，L-V-H-A（link-visited-hover-active）。可以运行一下，然后更改 L-V-H-A 的顺序后，看看效果。

13.CSS 层叠性和继承性

层叠性

层叠性是指多种 CSS 样式的叠加。而最终什么选择器在层叠中胜出遵循下列规则。

!important 具有最大优先级。也就是说任何情况下，只要定义了它,它的样式最终就会被应用。

例子：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
      #syl {
        color: yellow;
        font-size: 10px;
      }

      .box {
        color: green;
        font-size: 60px;
      }

      div {
        color: red !important;
        font-size: 60px !important;
      }
    </style>
  </head>

  <body>
    <div class="box" id="xnm" style="font-size:12px; color:yellow;">小牛马</div>
  </body>
</html>

源代码出现次序。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
        .box2 {
            font-size: 100px;
            color: blue;
        }
        .box {
            font-size: 60px;
            color: pink;
        }
    </style>
</head>
<body>
<div class="box box2 ">小牛马</div>
</body>
</html>

注：这里的先后次序不是说 class 里面类名的先后次序，而是说定义样式的先后顺序。上述例子中先定义的 box2 类样式，再定义的 box 类样式，最后显示的是 box 类中的样式。

优先级：

规则（1）：行内样式 > 页内样式 > 外部引用样式 > 浏览器默认样式。

规则（2）：important > 内联 > id > 伪类|类 | 属性选择 > 标签 > 伪对象 > 通配符 > 继承。另外权重会叠加，所以为了便于理解，权重设置如下： - 1 表示标签选择器的权重；- 10 表示类选择器的权重；- 100 表示 id 选择器的权重；- 1000 表示内联样式的权重。

注：权重相同时，CSS 遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。所有都相同时，声明靠后的优先级大。

例子：

#header #left ul li.first a
权重为100+100+1+1+10+1=213

继承性继承性就是指我们写 CSS 样式表的时候子元素会继承父元素的某些样式，比如文本颜色和字号。下面看个简单的例子，帮助理解：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
      .box {
        font-size: 15px;
        color: red;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <span>小牛马</span>
    </div>
  </body>
</html>

注：想要设置一个可继承的属性，只需将它应用于父元素即可。所有字相关的都可以继承，比如：color、text-系列、font-系列、line-系列等。并不是所有的 CSS 属性都可以继承，例如：边框、外边距、内边距、背景、定位、元素宽高属性就不能继承。所有盒子相关的属性都不能继承例如：a 标签，h1 标签不会实现继承。

五.CSS 布局模型

1.布局模型概述

布局模型与盒模型一样都是 CSS 最基本、最核心的概念。但布局模型是建立在盒模型基础之上，又不同于我们常说的 CSS 布局样式或 CSS 布局模板。CSS 三种基本网页布局模型：流动模型（Flow）、浮动模型（Float）、层模型（Layer）。

2.流动模型

流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。流动布局模型具有 2 个比较典型的特征：

块状元素都会在所处的包含元素内，自上而下按顺序垂直延伸分布，因为在默认状态下，块级元素的宽度都为 100%，实际上，块状元素都会以行的形式占据位置（每一个便签都显示着自己本来默认的那个宽高）。
在流动模型下，行内元素都会在所处的包含元素内从左到右水平分布显示（内联元素可不像块级元素独占一行的）

3.浮动模型

块状元素都是独占一行，如果现在我们想让两个块状元素并排显示，怎么办呢？设置元素浮动就可以实现。任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动。如下代码可以实现两个 div 元素一行显示。

<head>
  <style>
    div {
      width: 200px;
      height: 200px;
      border: 2px blue solid;
      float: left;
    }
  </style>
</head>
<body>
  <div></div>
  <div></div>
</body>

脱标

特别需要注意的是，设置了浮动的元素，脱离标准流（脱标）。下面来一个具体的例子。

首先写三个不浮动的 div。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      .box {
        width: 600px;
        height: 300px;
        border: 2px dashed green;
      }
      .box1,
      .box2,
      .box3 {
        width: 200px;
        height: 100px;
      }
      .box1 {
        background-color: red;
      }
      .box2 {
        background-color: yellow;
      }
      .box3 {
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="box3"></div>
    </div>
  </body>
</html>

然后我们给 box2 盒子（黄色的盒子），设置右浮动来看看效果：

.box2 {
  background-color: yellow;
  float: right;
}

结论：box2 盒子（黄色的盒子）脱离了文档流并且向右移动，直到它的右边缘碰到包含框的右边缘。而 box3 盒子（蓝色的盒子）则替代了原来 box2 的位置。

给 box2 盒子（黄色的盒子），设置左浮动来看看效果：

结论：box2 盒子（黄色的盒子）脱离了文档流并且左右移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了 box3 盒子，使 box3 盒子从视图中消失。我们可以理解为 box2 盒子像羽毛一样飘在 box3 盒子上面，挡住了 box3 盒子。

3.清除浮动

当父容器没有设置高度，里面的盒子没有设置浮动的情况下会将父容器的高度撑开。一旦父容器中的盒子设置浮动，脱离标准文档流，父容器立马没有高度，下面的盒子会跑到浮动的盒子下面。出现这种情况，我们需要清除浮动。

首先我们写一个示例，不设置浮动，第一个盒子的父元素不设置高度。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      .box {
        width: 600px;
        border: 2px dashed green;
      }
      .box1,
      .box2 {
        width: 200px;
        height: 100px;
      }
      .box1 {
        background-color: red;
      }
      .box2 {
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="box1"></div>
    </div>
    <div class="box2"></div>
  </body>
</html>

然后我们修改上面的例子，给 box1 盒子设置一个左浮动。再来看看效果。

我们发现 box2 盒子跑到 box1 盒子下面去了，这个时候我们就需要清除浮动带来的不利影响了。

清除浮动的方法有很多，最常见的用得最多的方法：使用伪元素来清除浮动，是在浮动元素的父元素上设置伪元素，此处是 box 上设置。

.clearfix:after {
  content: '';
  /*设置内容为空*/
  height: 0;
  /*高度为0*/
  line-height: 0;
  /* 行高为0*/
  display: block;
  /*将文本转为块级元素*/
  visibility: hidden;
  /*将元素隐藏*/
  clear: both; /*清除浮动*/
}

.clearfix {
  zoom: 1;
  /*为了兼容IE*/
}

注：是在浮动元素的父级元素上设置伪元素，也就是说我们把 <class="box"> 改成 <class="box clearfix">，在其他地方使用的时候，也是只需要在标签中添加上一个 class 名 clearfix，并直接复制上述清除浮动的伪元素代码即可。当然我们这里还可以直接给父元素加上高度，来解决这个不利影响，不过一般不建议这么做，因为有时候我们也不知道高度具体是多少，容易出问题，所以还是建议用伪元素来清除浮动。

4.层模型

层模型有三种形式：相对定位、绝对定位、固定定位。

层模型-绝对定位

绝对定位语法为

position：absolute;

绝对定位有以下特点：

绝对定位以浏览器左上角为基准设置位置

当一个盒子包含在另一个盒子中，父盒子未设置定位，子盒子以浏览器左上角为基准设置位置；当父盒子设置定位，子盒子以父盒子左上角为基准设置位置

绝对定位不占空间位置（类似于浮动）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      div {
        width: 200px;
        height: 200px;
        border: 5px red solid;
        position: absolute;
        left: 100px; /*相对于浏览器向左偏移100像素*/
        top: 80px; /*相对于浏览器向上偏移80像素*/
      }
    </style>
  </head>
  <body>
    <div></div>
    <!-- 相对于浏览器进行定位 -->
  </body>
</html>

相对定位

相对定位语法为

position：relative;

相对定位有以下特点：

相对定位以元素自身的位置为基准设置位置

相对定位要占空间位置

一般子元素设置绝对定位，父元素设置相对定位（子绝父相）

栗子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      .box1 {
        width: 200px;
        height: 100px;
        position: relative;
        border: 1px dashed green;
      }
      .box2 {
        width: 100px;
        height: 50px;
        position: absolute;
        border: 1px dashed blue;
        top: 20px;
        left: 20px;
      }
    </style>
  </head>
  <body>
    <div class="box1">
      <div class="box2"></div>
    </div>
  </body>
</html>

固定定位

固定定位表现类似于绝对定位，只有一个主要区别：绝对定位固定元素是相对于元素或其最近的定位祖先，而固定定位固定元素则是相对于浏览器视口本身。固定定位也不占空间位置，语法为：

position：fixed;

例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      p {
        position: fixed;
        top: 200px;
        left: 100px;
      }
    </style>
  </head>
  <body>
    <p>小牛马</p>
  </body>
</html>

注：复制这段代码到编辑器中运行，然后调整浏览器的视口大小，会发现，无论怎么变，p 标签所在的位置始终距离浏览器视口的左距离为 100px，上距离为 200px。

介绍 top， bottom， left， right

使用 top， bottom， left 和 right 来精确指定要将定位元素移动到的位置，这些属性的值可以使用逻辑上期望的任何单位：px，cm，%等。也可以使用负值。

z-index

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。用于处理当多个元素重叠的时候，哪些元素设置在其他元素的顶部。特别需要注意的是元素可拥有负的 z-index 属性值，属性值没有单位，只有数字。z-index 仅能在定位元素上奏效（例如 position:absolute;）

例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      .box {
        position: absolute;
        left: 50px;
        top: 20px;
        z-index: -1;
        background-color: red;
        width: 200px;
        height: 200px;
      }
      .box1 {
        position: absolute;
        left: 80px;
        top: 20px;
        z-index: 2;
        background-color: pink;
        width: 200px;
        height: 200px;
      }
    </style>
  </head>

  <body>
    <div class="box"></div>
    <div class="box1"></div>
  </body>
</html>

六、CSS3介绍

1.什么是 CSS3

CSS3 是CSS（层叠样式表）技术的升级版本，于 1999 年开始制订，2001 年 5 月 23 日 W3C 完成了 CSS3 的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。

CSS 演进的一个主要变化就是 W3C 决定将 CSS3 分成一系列模块。浏览器厂商按 CSS 节奏快速创新，因此通过采用模块方法，CSS3 规范里的元素能以不同速度向前发展，因为不同的浏览器厂商只支持给定特性。但不同浏览器在不同时间支持不同特性，这也让跨浏览器开发变得复杂。

(来自百度百科。)

2.CSS3 的好处

CSS3 给我们带来了什么好处呢？简单的说，CSS3 把很多以前需要使用图片和脚本来实现的效果、甚至动画效果，只需要短短几行代码就能搞定。比如圆角，图片边框，文字阴影和盒阴影，过渡、动画等。 CSS3 简化了前端开发工作人员的设计过程，加快页面载入速度。

3.浏览器引擎前缀

在阅读 CSS 代码的时候可能会发现这样的代码：

-webkit-transition: width 2s;
-moz-transition: width 2s;
-o-transition: width 2s;
transition: width 2s;

其实上述的 css 代码会执行的只有一条，浏览器只会响应其中的一条，然后忽略其它几条。你是不是会感到疑惑，一个 transition 属性会有这么多种写法，-webkit- 、-moz- 、-o- 这些都是什么呢？还是说这些不是一种属性。 -webkit- 、-moz- 、-o- 这些其实就是我们这里要讲到的前缀。这里的前缀是浏览器引擎前缀（ Vendor prefix ），它是浏览器公司在新的或者是正在实验中的 CSS3 功能变为 CSS3 规范之前，提供一种对该功能的支持方式。

介绍一下这些浏览器引擎前缀：

moz- ：Firefox 等使用 Mozilla 引擎的浏览器。

-webkit- ：Safari 、 Chrome 等使用 Webkit 引擎的浏览器。

-o- ：Opera 浏览器早期。

-ms- ：IE 和 Edge 等。

浏览器引擎前缀的使用方法也一目了然，将前缀放到属性名前即可。这些前缀并非都是需要的，因为有些属性已经被大部分浏览器所支持。但是一般情况下加上这些前缀是不会有问题的，只要记得把不带前缀的放在最后一条即可。

七、CSS3 元素属性升级

1.背景

在 CSS3 中，背景的样式作了一些升级调整，让我们可以更好的控制背景元素的样式。这里主要介绍以下几个调整：

background-size

background-origin

background-clip

background-size

background-size 指定背景图像的大小，取代了以前背景图像的大小由实际大小决定。背景图像的大小可以是像素或是百分比大小。

background-size 的语法为：

background-size: length|percentage|cover|contain;

值	描述
length	设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
percentage	以父元素的百分比来设置背景图像的宽度和高度，如 background-size:50% 50%;。第一个值设置宽度，第二个值设置高度。同 length 的用法，如果只给出一个值，那么第二个值会被设置为 auto。
cover	把背景图像扩展到可以完全覆盖背景区域为止，图片的某些部分可能会无法显示。
contain	使背景图片的高度和宽度完全适应内容区域。

<!DOCTYPE html>
<html>
  <head>
    <title>xiaoniuma</title>
    <style type="text/css">
      div {
        border: 2px solid;
        margin: 50px;
        width: 200px;
        height: 200px;
        padding: 50px;
        <!--读者自行导入图片哈，注意路径的存放-->
        background-image: url('image.png');
        background-size: 100% 100%;
        /* 如需要查看其它效果，可将注释中的内容替换上面的 background-size */
        /* background-size:100px 200px; */
        /* background-size:50% 50%; */
        /* background-size:cover; */
        /* background-size:contain; */
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

background-origin

background-origin 的语法为：

padding-box|border-box|content-box;

background-origin 字面理解是背景图片起点的意思，它规定 background-position 属性相对于什么位置来定位。它有三个值：

值	描述
padding-box	(默认）背景图片从盒模型的 padding-box 左上角开始绘制，即背景图片相对于内边距框来定位。
border-box	背景图片从盒模型的 border-box 左上角开始绘制，即背景图片相对于边框和来定位。
content-box	背景图片从盒模型的 content-box 左上角开始绘制，即背景图片相对于内容框来定位。

这里用上一个例子中的代码来演示 background-origin 不同值的效果，为了对比背景图片的不同的起始位置，使用图片的原尺寸，即删除 background-size ：

<!DOCTYPE html>
<html>
  <head>
    <title>xiaoniuma</title>
    <style type="text/css">
      /* background-origin: border-box */
      div {
        border: 2px solid;
        margin: 50px;
        width: 200px;
        height: 200px;
        padding: 50px;
        background-image: url('image.png');
        background-repeat: no-repeat;
        background-origin: border-box;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>xiaoniuma</title>
    <style type="text/css">
      /* background-origin: content-box */
      div {
        border: 2px solid;
        margin: 50px;
        width: 200px;
        height: 200px;
        padding: 50px;
        background-image: url('image.png');
        background-repeat: no-repeat;
        background-origin: content-box;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

可以发现，background-origin 设置为 content-box 和 border-box 的区别，一个是从盒模型的 content-box 的左上角开始绘制，一个是从盒模型 border-box 左上角开始绘制。

注意：如果背景不是 no-repeat，这个属性无效，他会从边框开始显示。

background-clip

background-clip 的语法为：

background-clip: border-box|padding-box|content-box;

background-clip 与 background-origin 可以取到的值相同，它们的功能大致相同。但是两者存在一些细微的差别。当它们的值都为 border-box 时，虽然都是从盒模型的边框左上角开始绘制背景图片，但是 background-clip 绘制出来的背景图片不会覆盖左方和上方的边框，而 background-origin 绘制出来的背景图片则会覆盖左方和上方的边框。

<!DOCTYPE html>
<html>
  <head>
    <title>xiaoniuma</title>
    <style type="text/css">
      /* background-origin: border-box */
      div {
        border: 2px solid;
        margin: 50px;
        width: 200px;
        height: 200px;
        padding: 50px;
        background-image: url('image.png');
        background-repeat: no-repeat;
        background-clip: border-box;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

2.边框

CSS3 中，针对边框的样式作了一些升级调整，这里主要讲解三个属性：

border-radius

border-image

box-shadow

border-radius

在 CSS2 中添加边框圆角是一件很困难的事情，我们需要在每个角落使用不同的图像。但是，在 CSS3 中，我们只需要使用属性 border-radius 就可以创建圆角。

border-radius: 20px; /*所有的角都使用半径为20px的圆角*/

<!DOCTYPE html>
<html>
  <head>
    <title>xiaoniuma</title>
    <style type="text/css">
      div {
        margin: 20px;
        border: 2px solid;
        border-radius: 20px;
        width: 200px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <div><p>border-radius</p></div>
  </body>
</html>

border-radius 属性其实是 border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius 四个属性的简写模式，四个数值的书写顺序是：左上角、右上角、右下角、左下角。

当 border-radius 只设置一个值，即将该值应用到元素的四个角上。
当 border-radius 设置两个或三个值时，按照对角线相同原则，如：

<!DOCTYPE html>
<html>
  <head>
    <title>xiaoniuma</title>
    <style type="text/css">
      div {
        margin: 20px;
        border: 2px solid;
        border-radius: 20px 50px; /*省略了左下和右下，按照对角线相同的原则，应为 20px 50px 20px 50px*/
        width: 200px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <div><p>border-radius</p></div>
  </body>
</html>

border-radius 按照语法的完整写法其实是 border-radius:10px 10px 10px 10px / 10px 10px 10px 10px; ，前面四个表示圆角的水平半径，后面四个表示圆角的垂直半径。

除了为边框添加圆角，你还可以将 border-radius属性运用到图片上来制作你的圆角图片。

注意： border-radius 可以用 px 单位，也可以用百分比或者 em，但目前的兼容性不太好。

border-image 使用属性 border-image ，我们可以使用图片来创建一个边框。语法为：

border-image: source(url) slice width outset repeat;

ource:所使用图片的路径。

slice:图片边框向内偏移。

width:图片边框宽度。

outset:边框图像区域超出边框的量。

repeat:图像边框是否应该平铺（repeat）、铺满（round）或拉伸（stretch）。

<!DOCTYPE html>
<html>
  <head>
    <title>xiaoniuma</title>
    <style type="text/css">
      /* background-origin: border-box */
      div {
        border: 40px solid;
        margin: 50px;
        width: 200px;
        height: 200px;
        padding: 50px;
        border-image: url('image.png') 30 30 stretch;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

**box-shadow ** 属性 box-shadow 用于给盒子添加阴影，语法与 text-shadow 有些相似：

box-shadow: 水平阴影 垂直阴影 模糊阴影 阴影尺寸 阴影颜色 inset;

与 text-shadow 相比，水平阴影、垂直阴影、模糊阴影的作用和 text-shadow 的对应属性相同，另外 box-shadow 多了阴影尺寸和 inset。

水平阴影：规定水平阴影的位置（阴影与盒子的水平偏移，正值向右偏移，负值向左偏移），必选项。

垂直阴影：规定垂直阴影的位置（阴影与盒子的垂直偏移，正值向下偏移，负值向上偏移），必选项。

模糊阴影：规定模糊的距离，可选项；值越大，模糊半径越大，阴影也就越大越淡。

阴影尺寸：阴影尺寸就是阴影外延出去的总长度。

inset：阴影默认是向外发散的，inset 参数的作用就是使外阴影变为内阴影（可以写在参数的第一个和最后一个，其他位置是无效的）。

阴影颜色：规定阴影颜色，可选项；如不规定该项的值，则使用 UA（用户代理）自行选择的颜色。如果想保持跨浏览器的一致性，阴影的颜色就需要明确的被指定为一种。

注：参数的顺序不要乱写。

<!DOCTYPE html>
<html>
  <head>
    <title>shiyanlou</title>
    <style type="text/css">
      .shadow1 {
        float: left;
        margin: 50px;
        width: 200px;
        height: 200px;
        background-color: #eee8cd;
        box-shadow: 0 0 0 10px #000;
        /*将除阴影尺寸之外的数值都设置为0,观察阴影尺寸的效果*/
      }
      .shadow2 {
        float: left;
        margin: 50px;
        width: 200px;
        height: 200px;
        background-color: #eee8cd;
        box-shadow: 20px 20px 10px #000;
        /*水平阴影和垂直阴影都为正值，阴影在原盒子右下方*/
      }
      .shadow3 {
        float: left;
        margin: 50px;
        width: 200px;
        height: 200px;
        background-color: #eee8cd;
        box-shadow: -20px -20px 10px #000;
        /*水平阴影和垂直阴影都为负值，阴影在原盒子左上方*/
      }
      .shadow4 {
        float: left;
        margin: 50px;
        width: 200px;
        height: 200px;
        background-color: #eee8cd;
        box-shadow: 0 0 100px #000 inset;
        /*除了模糊阴影外的值都设置为 0 ，另外使用参数 inset ，阴影在盒子内部*/
      }
      .shadow5 {
        float: left;
        margin: 50px;
        width: 200px;
        height: 200px;
        background-color: #eee8cd;
        box-shadow: -40px 0 100px red, /*左边阴影*/ 0 -40px 100px #000,
          /*上边阴影*/ 40px 0 100px blue, /*右边阴影*/ 0 40px 100px yellow; /*下边阴影*/
        /*盒子的多阴影，设置了上下左右四个阴影*/
      }
    </style>
  </head>
  <body>
    <div class="shadow1">
      将除阴影尺寸之外的数值都设置为0，可以看到阴影尺寸就是阴影外延出去的长度，相当于增加了
      border 的宽度。需要注意的是，box-shadow 不占据空间，所以阴影尺寸虽然增加了
      border 的宽度，但它并不是 border。
    </div>
    <div class="shadow2">水平阴影和垂直阴影都为正值，阴影在原盒子右下方</div>
    <div class="shadow3">水平阴影和垂直阴影都为负值，阴影在原盒子左上方</div>
    <div class="shadow4">
      除了模糊阴影外的值都设置为 0 ，另外使用参数 inset ，阴影在盒子内部
    </div>
    <div class="shadow5">盒子的多阴影，设置了上下左右四个阴影</div>
  </body>
</html>

模糊阴影和阴影尺寸的区别

模糊阴影：其值只能是为正值，如果其值为 0 时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊。

阴影尺寸：其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；

九.CSS3 文本

颜色之 RGBA

RGB 是一种色彩标准，是由红(R)、绿(G)、蓝(B)的变化以及相互叠加来得到各式各样的颜色。RGBA 是在 RGB 的基础上增加了控制 alpha 透明度的参数。

语法：

color：rgba(R,G,B,A)

取值：

R：红色值，正整数 | 百分数。

G：绿色值，正整数 | 百分数。

B：蓝色值，正整数 | 百分数。

A：Alpha 透明度，取值 0~1 之间。

以上 R、G、B 三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A 为透明度参数，取值在 0~1 之间，不可为负值。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      div {
        width: 50px;
        height: 50px;
        background-color: rgba(255, 0, 0, 0.3);
      }
    </style>
  </head>
  <body>
    <p>设置透明度为30%的红色</p>
    <div></div>
  </body>
</html>

2.text-shadow

属性 text-shadow 用于给文本添加阴影，语法为：

text-shadow: 水平阴影 垂直阴影 模糊阴影 阴影颜色;

水平阴影：规定水平阴影的位置（阴影与文本的水平偏移，正值向右偏移，负值向左偏移），必选项

垂直阴影：规定垂直阴影的位置（阴影与文本的垂直偏移，正值向下偏移，负值向上偏移），必选项

模糊阴影：规定模糊的距离，可选项;值越大，模糊半径越大，阴影也就越大越淡

阴影颜色：规定阴影颜色，可选项；如不规定该项的值，则使用 UA（用户代理）自行选择的颜色。如果想保持跨浏览器的一致性，阴影的颜色就需要明确的被指定为一种。


<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style type="text/css">
      .shadow1 {
        margin: 50px;
        color: green;
        text-shadow: 20px 20px 3px #000;
        /* 水平和垂直阴影都为正值，阴影呈现在原文本右下方 */
      }
      .shadow2 {
        margin: 50px;
        color: green;
        text-shadow: -20px -20px 7px #000;
        /* 水平和垂直阴影都为负值，阴影呈现在原文本左上方 */
      }
      .shadow3 {
        margin: 50px;
        color: green;
        text-shadow: 0 0 50px #000;
      }
      .shadow4 {
        margin: 50px;
        color: green;
        /*多重阴影，每个边的阴影用逗号隔开,阴影的应用顺序为从前到后，第一个指定的阴影在顶部*/
        text-shadow: -40px 0 10px red, /*左边阴影*/ 0 -40px 10px #000,
          /*上边阴影*/ 40px 0 10px blue, /*右边阴影*/ 0 40px 10px yellow; /*下边阴影*/
      }
    </style>
  </head>
  <body>
    <h1 class="shadow1">水平和垂直阴影都为正值，阴影呈现在原文本右下方</h1>
    <h1 class="shadow2">水平和垂直阴影都为负值，阴影呈现在原文本左上方</h1>
    <h1 class="shadow3">
      没有设置水平与垂直阴影，阴影扩散的范围就是模糊半径的范围
    </h1>
    <h1 class="shadow4">多阴影，设置了上下左右四个边的阴影</h1>
  </body>
</html>

可以尝试修改参数值，体会数值正负对水平阴影和垂直阴影的影响,以及模糊阴影对模糊半径范围的影响。

3. text-overflow

文本框经常会出现文本溢出的情况，在只有单行文本框，文本又出现溢出的情况，这时候就需要 text-overflow 来处理这些溢出的文本了。

text-overflow 有三个取值：

clip ：修剪文本。

ellipsis ：显示省略符号来代替被修剪的文本。

string ：使用给定的字符串来代替被修剪的文本。

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style type="text/css">
      .item1 {
        white-space: nowrap;
        border: 1px solid;
        width: 150px;
        overflow: hidden;
        text-overflow: clip;
      }
      .item2 {
        white-space: nowrap;
        border: 1px solid;
        width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      /*
        .item3{
            white-space: nowrap;
            border: 1px solid;
            width: 150px;
            overflow: hidden;
            text-overflow: "i'm string";
        }
        字符串替代溢出字符的方式目前只有 Firefox 9.0+ 支持，大部分浏览器都不支持该溢出替换方式。
        */
    </style>
  </head>
  <body>
    <div class="item1">hhhhhhhhhhhhhhhhhhhhhhhh</div>
    <div class="item2">hhhhhhhhhhhhhhhhhhhhhhhh</div>
    <!-- <div class="item3">hhhhhhhhhhhhhhhhhhhhhhhh</div> -->
  </body>
</html>

可以发现，item1 中溢出的文本直接被截断，文本框边缘还出现了截断一半的 h 字母，因为 text-overflow 设置为 clip ；同样的，item2 中溢出的文本采用省略号代替，因为 text-overflow 设置为了 ellipsis。由于大部分浏览器都不支持溢出使用字符串替代的方式，且实验楼 Web IDE 提供的浏览器内核不是 Gecko ，所以我们将这种方式注释起来，感兴趣的同学可以在自己主机的 Firefox 浏览器中运行调试。

3.overflow-wrap & word-break

overflow-wrap 和 word-break 都可以起到对单词的换行作用，前者用来表明是否允许浏览器在单词内进行短句，例如出现了一个很长的 url 或者单词，由于找不到自然段据点空格或标点符号而产生了溢出，这时候就可以使用 overflow-wrap 来解决这个问题；word-break 则是用于表明怎样在单词内进行短句。

overflow-wrap

overflow-wrap 常用的有两个取值：

normal:浏览器保持默认处理

break-word:允许在长单词内进行换行

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style type="text/css">
      .div1 {
        margin: 50px;
        border: 1px solid;
        width: 100px;
        overflow-wrap: break-word;
      }
      .div2 {
        margin: 50px;
        border: 1px solid;
        width: 100px;
        overflow-wrap: normal;
      }
    </style>
  </head>
  <body>
    <div class="div1">Hello world!veryveryveryveryverylongword isn't it?</div>
    <div class="div2">Hello world!veryveryveryveryverylongword isn't it?</div>
  </body>
</html>

可以看到，句子中出现了一个很长的单词，属性 overflow-wrap 设置为 break-word，即允许从中间断开，没有出现溢出的情况，在句子开始的 Hello World！中，可以看到这两个单词是处于两行，也就是说如果把它们放在一行内会出现溢出的情况，break-word 不会拆散短单词，所以这里出现了换行；属性 overflow-wrap 设置为 normal 时，采用浏览器默认的换行方式，出现了溢出。

word-break

word-break 有三个取值：

normal:保持浏览器默认换行方式

break-all:表明对于 non-CJK（非中文/日文/韩文）文本，可在任意字符间断行

keep-all:CJK 文本不断行，non-CJK 文本表现同 normal 。展开一点来说就是只能在半角空格或连字符处换行,也就是说，keep-all 只能在语句的正常语句起始处和单词起始处换行，如果 non-CJK 单词过长，使用值 keep-all 就有可能造成文本框溢出

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .item1 {
            margin: 20px;
            border: 1px solid;
            width: 100px;
            word-break: normal;
        }
        .item2 {
            margin: 20px;
            border: 1px solid;
            width: 100px;
            word-break: break-all;
        }
        .item3 {
            margin: 20px;
            border: 1px solid;
            width: 100px;
            word-break: keep-all;
        }
    </style>
</head>
<body>
<div class="item1">
    我爱学习，我爱橘猫烧鲷鱼鱼鱼！Hello world!veryveryveryveryverylongword
    isn't it?
</div>
<div class="item2">
    我爱学习，我爱橘猫烧鲷鱼鱼鱼！Hello world!veryveryveryveryverylongword
    isn't it?
</div>
<div class="item3">
    我爱学习，我爱橘猫烧鲷鱼鱼鱼！Hello world!veryveryveryveryverylongword
    isn't it?
</div>
</body>
</html>

第一个文本框的 word-break 属性设置为 normal，可以看到,浏览器默认换行是 CJK 换行，non-CJK 换行方式是在半角空格连字符的地方换行，长单词不换行。第二个文本框的 word-break 属性设置为 break-all，可以看到 CJK 和 non-CJK 文本被随意拆分换行，不会出现文本框溢出，但是 non-CJK 文本也失去原有的样子；第三个文本框的 word-break 属性设置为 keep-all，由于只能在半角空格或连字符处换行，所以过长的 non-CJK 文本产生了溢出现象，但是每个单词都能在一行内呈现，另外，设置为 keep-all 时，CJK 文本是不断行的，在第一个逗号的地方产生了换行，第二行的我爱实验楼楼楼楼楼中间没有半角空格或连字符，所以没有换行产生了溢出，直到感叹号的地方才产生换行。

「CSS」学习笔记02｜ 青训营笔记