超细的CSS学习笔记（CSS详解）

业界资讯 2022-05-12 10:32:04 阅读次数: 0

复习CSS时记录的笔记。
从最基本的 CSS 概念开始，复习如何使用 CSS 同时控制多重网页的样式和布局。同时涉及最新版本 CSS3 的内容，掌握新的标准化组件。
请添加图片描述

文章目录

一、CSS介绍

1.CSS概述

层叠样式表（英语：Cascading Style Sheets，简写 CSS），又称串样式列表、级联样式表、串接样式表、阶层式样式表，一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，由 W3C 定义和维护。目前最新版本是 CSS2.1，为 W3C 的推荐标准。

注：定义来自维基百科。

直观的来说 CSS 就是我们网页的美容师，为我们的网页添加样式，美化网页，让网页更加美观。而我们前面所学到的 HTML 是写出我们网页的结构。

2.CSS语法

CSS 的语法单元是样式，每个样式包含两部分内容：选择器和声明（或者称为规则）：

例子：

h1 {
    
    
  color: red;
}

注：上述例子中 h1 是选择器，color 是属性，red 是属性值。

请添加图片描述
CSS 语法结构为：选择器{属性：值;属性：值;…}

  • 选择器：通常是你需要设置样式的 HTML 元素。
  • 属性：是你需要设置的样式属性，比如宽高，颜色，大小等。
  • 属性值：你需要设置的样式属性的具体值，比如宽高具体是多少 px，颜色具体是什么颜色。

3.CSS 注释

注释用来为部分 CSS 代码添加额外的解释，或者用来组织浏览器解析一部分区域内的 CSS 代码。

语法：

/* 这是一行单行注释 */

/*
这是
多行注释
*/

新建一个 test.html 文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      p {
    
    
        color: red;
        /*font-size:28px;
        font-weight:500;*/
      }

      div {
    
    
        width: 200px;
        height: 200px;
        /* background:blue;*/
        background: red;
      }
    </style>
  </head>

  <body>
    <div>小牛</div>
    <p>小马使我快乐！</p>
  </body>
</html>

请添加图片描述

4.CSS 数值与单位

你会在很多地方看到 CSS 单位中使用到数值。下面为大家介绍数值的最常用类别。

颜色值

在网页中的颜色设置是非常重要，有字体颜色，背景颜色，边框颜色等，设置颜色的方法也有很多：

1.英文命名颜色

p {
    
    
  color: pink;
}
/*给p标签的字体颜色设置为粉色*/

2.RGB 颜色

由 Red、Green、Blue 三种颜色的比例来配色，简称 RGB。

p {
    
    
  color: rgb(154, 32, 432);
}

每一项的值可以是 0~255 之间的整数，也可以是 0~100% 的百分数，如：

p {
    
    
  color: rgb(30%, 20%, 40%);
}

3.十六进制颜色

现在较为普遍的颜色使用法，其原理其实也是 RGB 设置，但是其每一项的值由 0~255 变成了十六进制 00-ff。

p {
    
    
  color: #00eeff;
}

长度值

长度单位总结了几种常用单位：px，em，%，这三种单位都是相对单位。

1.像素

px 像素（Pixel）。相对长度单位，像素 px 是相对于显示器屏幕分辨率而言的。

特点：

  • E 无法调整那些使用 px 作为单位的字体大小。
  • 国外的大部分网站能够调整的原因在于其使用了 em 或 rem 作为字体单位。

2.em

就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px，那么 1em=14px。如果 font-size 为 18px，那么 1em=18px。

p {
    
    
  font-size: 14px;
  line-height: 2em;
}
/*在这里的line-height行高被设置成了14*2=28px*/

3.百分比

p {
    
    
  font-size: 14px;
  line-height: 120%;
}
/*行高为：14*1.2=16.8*/

5.CSS样式类型

CSS 样式类型分为三种：内联式、内嵌式、外链式。

内联式(行内式)

通过标签的 style 属性来设置元素的样式，语法格式为：

<标签名 style="属性1:属性值1; 属性2:属性值2; ..."> 内容 </标签名>

例子：

<p style="color:blue;">Hello World</p>

优点：十分灵活，书写方便，权重高（后面会提到）。
缺点：只能操作某一个标签，没有实现样式和结构相分离。

内嵌式（内部样式表）

将 CSS 代码集中写在 HTML 文档的 head 头部标签中，并且用 style 标签定义。语法格式为：

<head>
<style type="text/css">
    选择器 {
    
    属性1:属性值1; 属性2:属性值2; ...}
</style>
</head>

例子：

<style type="text/css">
    p{
    
    color:blue;}
</style>

优点：可以通过一条语句操作多个标签或类。
缺点：只能控制一个页面，没有彻底实现样式和结构分离。

外链式（外部样式表）

将所有的样式放在一个或多个以 .CSS 为扩展名的外部样式表文件中，通过 link 标签将外部样式表文件链接到 HTML 文档中。语法格式为：

<head>
  <link href="CSS文件的路径"  rel="stylesheet" />
</head>

注：href 定义所链接外部样式表文件的 URL，可以是相对路径，也可以是绝对路径。rel 定义当前文档与被链接文档之间的关系，在这里需要指定为 “stylesheet”，表示被链接的文档是一个样式表文件。

例子：

首先我们要创建一个 css 文件，比如：main.css。然后在里面就能直接写 css 代码了。比如:

p {
    
    
  color: blue;
}

其次我们在 html 文件中引入这个 css 文件。

<link rel="stylesheet" href="main.css" />

优点：一个单独的 CSS 文件，多个 HTML 文件可以引用一个 CSS 样式表文件。HTML 代码和 CSS 代码分离,要写什么就在哪个文件去找，修改方便。

注：这样写的前提是 HTML 页面与 CSS 文件在同一文件夹下。行内样式表一般写在标签头部，内嵌式样式表、外联式一般写在 标签内。为了编码规范，希望大家尽量使用外联式来写我们的 CSS 代码。

三种方法的优先级

我三种 CSS 样式类型，如果对于同一个元素，同时使用了三种方法设置了 CSS 样式，这个时候，哪个方法是有效的呢 ？

可以记住一个优先级：

内联式 > 嵌入式 > 外链式

但是“嵌入式 > 外链式” 有一个前提：嵌入式 CSS 样式的位置一定在外链式后面

制作一个谷歌图标的小案例。
在这里插入图片描述
源码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <meta charset="utf-8" />
  </head>

  <body>
    <p style="font-size:60px">
      <span style="color:blue">G</span>
      <span style="color:red">o</span>
      <span style="color:orange">o</span>
      <span style="color:blue">g</span>
      <span style="color:green">l</span>
      <span style="color:red">e</span>
    </p>
  </body>
</html>

注：span 是一个行内标签，它能够不换行显示。

二.CSS基本样式

1.文字排版

字体

通过 font-family 属性设置字体种类，注意不要设置不常用的字体，因为如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的字体。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      body {
    
    
        font-family: 'yahei';
        /*微软雅黑*/
      }
    </style>
  </head>
  <body>
    <p>小牛</p>
  </body>
</html>

几种几乎所有系统都能够支持的几种字体：Arial，Courier New，Georgia，Times New Roman，Trebuchet MS，Verdana。

字体大小和颜色

字体大小通过 font-size 属性设置。字体的常用单位是：px，em。字体颜色通过 color 属性来设置。

<style>
  body {
    
    
    font-family: 'yahei';
    font-size: 40px;
    color: red;
  }
</style>
<body>
  <p>小牛</p>
</body>

注意：这里只展示

字体样式-粗体

通过 font-weight 属性设置字体的粗细。常用的有 normal：字体正常，bold：文字加粗。

<style>
  body {
    
    
    font-size: 40px;
    color: red;
    font-weight: bold;
  }
</style>
<body>
  <p>小牛</p>
</body>

字体样式-斜体
通过 font-style 属性设置文字格式。

  • normal: 将文本设置为普通字体 (将存在的斜体关闭)。
  • italic: 如果当前字体的斜体版本可用，那么文本设置为斜体版本；如果不可用，那么会利用 oblique 状态来模拟 italics。
  • oblique: 将文本设置为斜体字体的模拟版本，也就是将普通文本倾斜的样式应用到文本中。
body {
    
    
  font-size: 40px;
  color: red;
  font-style: italic;
}

字体装饰

通过 text-decoration 属性设置或者取消字体上的文本装饰，我们一般会使用这个属性去掉链接上的默认下划线。

可用值为：

  • none: 取消已经存在的任何文本装饰。
  • underline: 文本下划线。
  • overline: 文本上划线。
  • line-through: 穿过文本的线（删除线）。
body {
    
    
  font-size: 40px;
  color: red;
  font-style: italic;
  text-decoration: underline;
}

段落排版

缩进

段落缩进使用 text-indent 属性，中文文字中的段前习惯空两个文字的空白。

<style>
  body {
    
    
    font-size: 14px;
    color: red;
    font-style: italic;
    text-decoration: underline;
    text-indent: 2em;
  }
</style>
<body>
  <p>小牛和小马是好朋友</p>
</body>

行高

可以使用 line-height 属性设置段落行高。

<style>
  body {
    
    
    font-size: 14px;
    color: red;
  }
</style>
<body>
  <p>小牛和小马是好朋友</p>
  <p style="line-height:30px">小牛和小马是好朋友</p>
</body>

当两个段落一个设置行高，一个未设置行高时的效果：
请添加图片描述
中文字间距、字母间距

可以使用 letter-spacing 属性设置文字间距或者字母间距。

  <style>
        body{
    
    
            font-size:14px;
            color:red;
            letter-spacing:2em;
        }
    </style>
  </head>
  <body>
       <p>小牛和小马是好朋友</p>
  </body>

对齐

如果想为块状元素中的文本、图片设置样式居中，可以使用text-align 属性。

  <style>
        body{
    
    
            font-size:14px;
            color:red;
            text-align:center;
        }
    </style>
  </head>
  <body>
      <p>小牛和小马是好朋友</p>
  </body>

同样也可以使用 text-align:left 设置左对齐，使用 text-align:right 设置右对齐。

2.样式化列表

list 列表大体上和其他文本一样，这里讲解一些特殊用在列表上的 CSS 属性。

列表特定样式

符号样式：用 list-style-type 设置用于列表的项目符号的类型，例如无序列表的方形或圆形项目符号，或有序列表的数字，字母或罗马数字。常见的取值有：

  • disc 无序列表的默认值，实心圆。
  • circle 空心圆。
  • square 实心方块。
  • decimal 有序列表的默认值阿拉伯数字。
  • lower-alpha 小写英文字母。
  • upper-alpha 大写英文字母。

栗子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      ul {
    
    
        list-style-type: circle;
      }
      ol {
    
    
        list-style-type: lower-alpha;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>111</li>
      <li>222</li>
      <li>333</li>
    </ul>

    <ol>
      <li>555</li>
      <li>666</li>
      <li>777</li>
    </ol>
  </body>
</html>

运行效果：
在这里插入图片描述

项目符号位置：通过 list-style-position 设置在每个项目开始之前，项目符号是出现在列表项内，还是出现在其外。

  • 默认值为 outside，这使项目符号位于列表项之外。
  • 如果值设置为 inside，项目条目则位于行内。

我们把前面的例子设置为 inside 来看看效果,为了便于查看效果，我们为 ul 和 li 设置背景色。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      ul {
    
    
        list-style-type: circle;
        list-style-position: inside;
        background-color: red;
      }

      ol {
    
    
        list-style-type: lower-alpha;
      }

      li {
    
    
        background-color: gold;
      }
    </style>
  </head>

  <body>
    <ul>
      <li>111</li>
      <li>222</li>
      <li>333</li>
    </ul>

    <ol>
      <li>555</li>
      <li>666</li>
      <li>777</li>
    </ol>
  </body>
</html>

效果为：
在这里插入图片描述

2.样式化链接

选择器中有以下几种伪类 :link、 :hover、 :active、 :visited， 我们也可以为伪类设置样式。

首先我们写一个链接，来看看它默认的一些样式：

<a href="#">我是链接</a>

效果图：
在这里插入图片描述
我们发现以下特点：

  • 链接具有下划线。
  • 未访问过的 (Unvisited) 的链接是蓝色的。
  • 访问过的 (Visited) 的链接是紫色的。
  • 悬停 (Hover) 在一个链接的时候鼠标的光标会变成一个小手的图标。
  • 激活 (Active) 链接的时候会变成红色 (用鼠标左键点击链接)。

知道链接的默认样式后，我们同样可以使用 color 属性改变链接不同状态的颜色，使用 text-decoration 属性去掉链接默认的下划线。一般来说对于链接的样式，掌握这两个就够了。

<style>
  a:hover {
    
    
    color: red;
    text-decoration: none;
    /*鼠标经过，字体颜色变成红色，并且去掉下划线*/
  }
</style>
<body>
  <a href="https://www.lanqiao.cn/">实验楼</a>
</body>

3.Web字体

对于字体的使用来说，有时候我们可能并不仅仅满足于使用自带的字体。而通过 Web 字体，我们可以使用更多的不同的文本样式。

首先我们通过 @font-face 指定要下载的字体文件。

@font-face {
    
    
  font-family: 'Bitstream Vera Serif Bold';
  src: url('http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf');
}

然后使用 @font-face 中指定的字体种类名称来将你的定制字体应用到你需要的地方，比如说：

body {
    
    
  font-family: 'Bitstream Vera Serif Bold', serif;
}

完整的代码为：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      @font-face {
    
    
        font-family: 'Bitstream Vera Serif Bold';
        src: url('http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf');
      }

      body {
    
    
        font-family: 'Bitstream Vera Serif Bold', serif;
      }
    </style>
  </head>

  <body>
    <div>我爱学习，学习使我快乐！</div>
  </body>
</html>

使用 Web 字体后在浏览器中运行的效果图为：在这里插入图片描述
再来看看没有使用之前是什么样子的：
在这里插入图片描述
注：现在网上有很多免费可以使用的 web 字体，大家可以自行百度搜索下载使用在自己的网页当中。比如：Google Web Fonts。

三、CSS 样式化区块

1.元素分类

在 HTML 中的标签元素大体被分为三类：块级元素、行内元素、行内块元素。

常用的块级元素：

<div>
  <p></p>
  <h1>
    ...
    <h6>
      <ol>
        <ul>
          <table>
            <address>
              <blockquote>
                <form></form>
              </blockquote>
            </address>
          </table>
        </ul>
      </ol>
    </h6>
  </h1>
</div>

常见的行内元素：

<a>
  <span>
    <br />
    <i>
      <em>
        <strong> <label></label></strong></em></i></span
></a>

常见的行内块元素：

<img /> <input />

块级元素

块级元素，顾名思义，该元素呈现“块”状，所以它有自己的宽度和高度，也就是可以自定义 width 和 height，除此之外，块级元素独自占据一行高度（float 浮动除外），一般可以作为其他容器使用，可容纳块级元素和行内元素。

块级元素有以下特点：

  • 每个块级元素都从新一行开始，并且其后的元素都另起一行。
  • 元素的高度、宽度、行高以及顶和底边间距都可以设置。
  • 元素宽度在不设置的情况下，是它本身父容器的 100%（和父元素宽度一致）。

请添加图片描述

行内元素

行内元素不可以设置宽（width）和高（height），但可以与其他行内元素位于同一行，行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定，宽度由内容的长度控制。

行内元素有以下特点：

  • 和其他元素在一行上。
  • 元素的高度、宽度、行高以及顶和底边间距都不可以设置。
  • 元素的宽度就是它包含的文字或图片的宽度，不可改变。

请添加图片描述
行内块元素

行内块级元素，它既具有块级元素的特点，也有行内元素的特点，它可以自由设置元素宽度和高度，也可以在一行中放置多个行内块级元素。比如 input、img 就是行内块级元素，它可以设置高宽以及一行多个。

具体特点如下：

  • 和其他元素在一行上。
  • 元素的高度、宽度、行高以及顶和底边间距都可以设置。

2.区块模型

区块模型也就是我们常说的盒子模型，而所谓盒子模型就是把 HTML 页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

盒模型的宽度和高度和我们平常所说的物体的宽度和高度是不一样的。CSS 定义的宽和高，指的是填充以里的内容范围。

因此盒子的宽度=左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距。

每个矩形都由元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。我们用一张图来表示：
在这里插入图片描述

padding（内边距）

padding 内边距位于内容框的外边缘与边界的内边缘之间。padding-top:上内边距，padding-right:右内边距，padding-bottom:下内边距，padding-left:左内边距。

设置内边距的写法：

  • padding:5px 10px 15px 20px;表示上内边距是 5 px，右内边距是 10 px，下内边距是 15 px，左内边距是 20 px。
  • padding:5px 10px 15px;表示上内边距是 5 px，右内边距和左内边距是 10 px，下内边距是 15 px。
  • padding:5px 10px;表示上内边距和下内边距是 5 px，右内边距和左内边距是 10 px。
  • padding:10px;表示所有 4 个内边距都是 10 px。

注：padding 属性接受长度值或百分比值，但不允许使用负值。如果使用百分比值，百分数值是相对于其父元素的 width 计算的。

例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      #box1 {
    
    
        width: 200px;
        height: 200px;
        background-color: red;
        padding: 20px 10px 10px 50px;
      }
      #box2 {
    
    
        width: 200px;
        height: 200px;
        background-color: blue;
      }
    </style>
  </head>

  <body>
    <div id="box1"></div>
    <div id="box2"></div>
  </body>
</html>

在这里插入图片描述
可以看到，同样是设置高宽为 200 像素的盒子，有 padding 的明显要大一些，padding 在边框里面。

border（边框）

元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。你可以设置它的粗细，样式和颜色。

边框语法：

border: border-width||border-style||border-color;

例子：

div {
    
    
  border: 2px solid red;
}

这条代码能给 div 设置边框粗细为 2px、样式为实线、颜色为红色的边框。

注意：border-style（边框样式）的常用样式有：dashed（虚线）、dotted（点线）、solid（实线）.

你可以按照上右下左的格式，分别写出元素的各个边框的属性。

例子：

div {
    
    
  border-style: solid;
  border-width: 15px 5px 15px 5px;
}

也可以简写为：

div {
    
    
  border-style: solid;
  border-width: 15px 5px;
}

注：和前面 padding 的简写方式一样，有遗忘的可以往前面看看哟。

也可以单独设置一个方向的边框：

div {
    
    
  border-top: 1px solid red;
}
/*只给上边框设置一像素的红色实线*/

以此类推：

border-right：右边框
border-left：左边框
border-bottom：下边框

边框的颜色可以使用任何类型的颜色值，例如可以是命名颜色，也可以是十六进制和 RGB 值：

p {
    
    
  border-style: dashed;
  border-color: yellow rgb(25%, 35%, 45%) #909990 red;
}

注：默认的边框颜色是元素本身的前景色。如果没有为边框声明颜色，它将与元素的文本颜色相同。另一方面，如果元素没有任何文本，假设它是一个表格，其中只包含图像，那么该表的边框颜色就是其父元素的文本颜色（因为 color 可以继承）。这个父元素很可能是 body、div 或另一个 table。

margin(外边距)

外边距（margin）代表 CSS 框周围的外部区域，称为外边距。和 padding 类似，也有 margin-top、margin-right、margin-bottom 和 margin-left。写法仿照 padding。

注：与 padding 不同的是 margin 可以是负值。

外边距合并问题：

简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。

外边距合并示例图：
在这里插入图片描述

高级的框操作

溢流:
当你使用绝对的值设置了一个框的大小（如，固定像素的宽/高），允许的大小可能不适合放置内容，这种情况下内容会从盒子溢流。我们使用 overflow 属性来控制这种情况的发生。

常用的值：

  • auto:当内容过多的时候溢流的内容被隐藏，然后出现滚动条，让我们滚动查看所有的内容。
  • hidden: 当内容过多，溢流的内容被隐藏。
  • visible: 当内容过多，溢流的内容被显示在盒子的外边。
    例子：
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      p {
    
    
        width: 500px;
        height: 2.5em;
        padding: 1em 1em 1em 1em;
        border: 1px solid black;
      }

      .one {
    
    
        overflow: auto;
      }

      .two {
    
    
        overflow: hidden;
      }

      .three {
    
    
        overflow: visible;
      }
    </style>
  </head>

  <body>
    <p class="one">
      我爱学习，学习使我快乐！我爱学习，学习使我快乐！
      我爱学习，学习使我快乐！我爱学习，学习使我快乐！
      我爱学习，学习使我快乐！我爱学习，学习使我快乐！
      我爱学习，学习使我快乐！我爱学习，学习使我快乐！
    </p>

    <p class="two">
      我爱学习，学习使我快乐！我爱学习，学习使我快乐！
      我爱学习，学习使我快乐！我爱学习，学习使我快乐！
      我爱学习，学习使我快乐！我爱学习，学习使我快乐！
      我爱学习，学习使我快乐！我爱学习，学习使我快乐！
    </p>

    <p class="three">
      我爱学习，学习使我快乐！我爱学习，学习使我快乐！
      我爱学习，学习使我快乐！我爱学习，学习使我快乐！
      我爱学习，学习使我快乐！我爱学习，学习使我快乐！
      我爱学习，学习使我快乐！我爱学习，学习使我快乐！
    </p>
  </body>
</html>

在浏览器运行效果展示图：
在这里插入图片描述

3.背景

元素的背景是指，在元素内容、内边距和边界下层的区域。而在我们前面学习样式化列表的时候已经接触过 background 属性了。
在这里插入图片描述

  • 背景颜色：通过 background-color 属性设置，首先，大多数元素的背景色是 transparent（透明色），而不是 white（白色），设置了背景颜色后，元素的内容依然是可读的，很多时候，我们需要都需要设置背景色来帮助我们，比如前面介绍样式化列表的 list-style-position 属性 inside 值的效果就使用到了背景色。
    在这里插入图片描述
    注：源码在样式化列表章节，此处的图片是为了演示背景色的作用与重要性。
  • 背景重复：background-repeat 允许您指定背景图像是如何重复的。默认值是 repeat，图像将在整个背景中水平和竖直地重复。但是大多数情况下我们是不需要重复的，因此经常在使用背景图片的时候设置为 no-repeat。此外还有两个值，repeat-x: 图像将在整个背景中水平地重复。repeat-y: 图像会在背景下垂直地重复。
  • 背景位置：background-position 允许我们在背景中任意位置放置背景图像。除了上面图片所给的值，我们还可以自定义值，使用两个通过空格分格的值，指定图像的水平（x）和垂直（y）坐标，图像的左上角为原点（0,0），x 坐标从左到右，y 坐标从上到下。
  • background-image 还有一组可用的值：颜色渐变。通过 linear-gradient() 函数设置，函数至少需要用逗号分隔的三个参数——背景中渐变的方向，开始的颜色和结尾的颜色。

例如：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      .box {
    
    
        width: 100px;
        height: 100px;
        background-image: linear-gradient(to bottom, red, blue);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

运行效果：
在这里插入图片描述
注：这个渐变将从上到下，从顶部的红色开始，然后平稳过渡到底部的蓝色。 渐变的方向可以通过关键字来指定方向 （to bottom，to right， to bottom right 等）或者使用角度值 (0 deg 相当于 to top，90 deg 相当于 to right，直到 360 deg，它再次相当于 to top ）。

4.图片

我们在 HTML 模块中学习了 img 标签来添加图片，现在我们来了解它的一些常用的 CSS 属性。

  • height：定义图片的高度。
  • width：定义图片的宽度。
  • border：定义图片周围的边框。

例子：

<img src="/小牛马.jpg" width="px" height="200px" border="1" />

注：上述例子中图片引用地址为相对地址。

5.表格

我们前面已经学习了如何制作表格，现在我们来讲讲表格的一些样式，让我们的表格更加美观。

  • 表格边框：同样的我们使用 border 属性为表格设置边框。

例子：

table,
th,
td {
    
    
  border: 2px solid red;
}
  • 折叠边框：使用 border-collapse 属性设置是否将表格边框折叠为单一边框。

例子：

table {
    
    
  border-collapse: collapse;
}
  • 表格的宽度和高度：正如你所预料的一样，我们使用 width 和 height 属性设置表格的高度和宽度。

例子：

table {
    
    
  width: 50%;
}

th {
    
    
  height: 50px;
}
  • 表格文本对齐的方式：通过 text-align 属性设置水平对齐方式，取值有 left（左对齐）right（右对齐）和 center（居中对齐），通过 vertical-align 属性 设置垂直对齐方式，取值有：top（顶端对齐）bottom（底部对齐）和 middle（居中对齐）。

例子：

td {
    
    
  height: 50px;
  vertical-align: top;
}
  • 表格内边距：通过为 td 和 th 元素设置 padding 属性，控制表格中内容和边框的距离。

例子：

td {
    
    
  padding: 30px;
}
  • 表格颜色：通过 color 设置表格文本颜色，通过 background-color 设置表格背景颜色。

例子：

table,
td,
th {
    
    
  border: 1px solid blue;
}

th {
    
    
  background-color: red;
  color: yellow;
}
  • 表格标题位置：通过 caption-side 属性设置表格的标题位置，它的取值有：top（默认值。把表格标题定位在表格之上），bottom（把表格标题定位在表格之下）和 inherit（规定应该从父元素继承 caption-side 属性的值）。

表格综合案例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      table,
      td {
    
    
        border: 1px solid blue;
      }

      td {
    
    
        background-color: red;
        color: yellow;
        text-align: left;
        vertical-align: bottom;
        padding: 30px;
      }

      table {
    
    
        width: 200px;
        height: 100px;
        border-collapse: collapse;
      }

      caption {
    
    
        caption-side: bottom;
      }
    </style>
  </head>

  <body>
    <table>
      <caption>
        我是标题
      </caption>
      <tr>
        <td>one</td>
        <td>two</td>
      </tr>
      <tr>
        <td>three</td>
        <td>four</td>
      </tr>
    </table>
  </body>
</html>

在浏览器中的运行效果图为：
在这里插入图片描述

6.轮廓

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

  • outline-color 设置轮廓的颜色。取值和其余颜色的取值一样。
  • outline-style 设置轮廓的样式。

取值如下：
在这里插入图片描述

  • outline-width 设置轮廓的宽度。它的值有：
  1. thin 规定细轮廓。
  2. medium 默认取值规定中等的轮廓。
  3. thick 规定粗的轮廓。
  4. length 允许你自定义轮廓粗细的值。
  5. inherit 规定应该从父元素继承轮廓宽度的设置。
  • outline 上面三个属性的连写。

例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      p {
    
    
        outline: red dotted thick;
        width: 100px;
        height: 50px;
      }
    </style>
  </head>

  <body>
    <p>好嗨哟</p>
  </body>
</html>

在浏览器中运行的效果为：
在这里插入图片描述

7.盒子阴影

通过 box-shadow 属性设置盒子阴影。

box-shadow 有四个值:

  • 第一个值是水平偏移量（水平阴影）：即向右的距离，阴影被从原始的框中偏移(如果值为负的话则为左)。
  • 第二个值是垂直偏移量（垂直阴影）：即阴影从原始盒子中向下偏移的距离(或向上，如果值为负)。
  • 第三个值是模糊半径（影子大小）：即在阴影中应用的模糊度。
  • 第四个值是阴影的基本颜色。你可以使用任何长度和颜色单位来定义这些值。

例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      .shadow {
    
    
        box-shadow: 5px 5px 5px red;
        width: 200px;
        height: 100px;
        background-color: blue;
      }
    </style>
  </head>

  <body>
    <div class="shadow">小牛马</div>
  </body>
</html>

在浏览器中的运行效果为：
请添加图片描述
多个盒子阴影：使用逗号隔开。

例子：

box-shadow: 1px 1px 1px yellow, 2px 2px 1px yellow, 3px 3px 1px blue, 4px 4px
    1px blue, 5px 5px 1px black, 6px 6px 1px black;

使用 inset 关键字，把它放在一个影子声明的开始，使它变成一个内部阴影，而不是一个外部阴影。比如我们为前面的例子加上 inset 关键字，最后的运行效果就变成下面这样了：

请添加图片描述
源码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
        .shadow {
    
    
            box-shadow: inset 5px 5px 5px red;
            width: 200px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="shadow">大牛吗</div>
</body>
</html>

8.圆角边框

使用 border-radius 属性来创建圆角。

例子：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
      .radius {
    
    
        width: 200px;
        height: 200px;
        border: 1px;
        background-color: red;
        border-radius: 50%; /*将正方形变成圆*/
      }
    </style>
  </head>

  <body>
    <div class="radius"></div>
  </body>
</html>

注：border-radius 的值除了用百分号（%）还可以用 length，比如：border-radius:25px;。

效果图：
在这里插入图片描述

9.练习

要求：盒子的宽高设置一个合适的，盒子相对于浏览器水平居中，并且距离顶端设置合适的距离，文字相对于盒子水平垂直居中。文字的颜色和盒子颜色一样，增加一个文字阴影让它显示出来。设置圆角边框，设置一个 1 px 的实线边框，边框颜色比盒子略微深一点。设置盒子阴影，一个外部阴影，一个内部阴影。大致要求达到，其余的值设置可以自行调整，不一定非要与案例一样。完成后的大致效果如下：
在这里插入图片描述
源码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      .box {
    
    
        width: 200px;
        height: 100px;
        color: red;
        background-color: red;
        text-align: center;
        line-height: 100px;
        margin: 100px auto;
        text-shadow: 2px 2px 5px black;
        border-radius: 20px;
        border: 1px solid crimson;
        box-shadow: 2px 2px 5px black, inset 2px 2px 5px black;
      }
    </style>
  </head>
  <body>
    <div class="box">我爱学习，身体棒棒！</div>
  </body>
</html>

四. 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. 规则（1）：行内样式 > 页内样式 > 外部引用样式 > 浏览器默认样式。
  2. 规则（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 个比较典型的特征：

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

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 四个属性的简写模式，四个数值的书写顺序是：左上角、右上角、右下角、左下角。

  1. 当 border-radius 只设置一个值，即将该值应用到元素的四个角上。
  2. 当 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>

在这里插入图片描述
3. 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 是一种色彩标准，是由红®、绿(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 文本是不断行的，在第一个逗号的地方产生了换行，第二行的我爱实验楼楼楼楼楼中间没有半角空格或连字符，所以没有换行产生了溢出，直到感叹号的地方才产生换行。

十.CSS3 动画和过渡

1.渐变

在 CSS3 之前，渐变效果需要图像来完成，这增大了下载时间和带宽的使用。 CSS3 的渐变是由浏览器生成的，所以其更具优势。

CSS3 定义了两种类型的渐变：

  • 线性渐变
  • 径向渐变

渐变属于 image 类型，所以渐变只能在可以使用 image 的地方使用。

线性渐变

渐变至少是一种颜色朝另一种颜色变化，可以让你在两个或多个指定的颜色之间显示平稳的过渡。所以必须至少定义两种颜色节点。同时，可以给出颜色变化的方向，线性渐变的语法如下：

background: linear-gradient(to direction | angle, color-stop1, color-stop2...);

线性渐变 - 从上到下（默认情况下）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      #box1 {
    
    
        width: 300px;
        height: 200px;
        background-color: red; /* 浏览器不支持时显示 */
        background-image: linear-gradient(#e66465, #9198e5);
      }
    </style>
  </head>
  <body>
    <p>从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：</p>

    <div id="box1"></div>
  </body>
</html>

请添加图片描述

线性渐变 - 从左到右

下面的实例演示了从左边开始的线性渐变。起点是红色，慢慢过渡到蓝色：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      #box1 {
    
    
        width: 300px;
        height: 200px;
        background-color: red; /* 浏览器不支持时显示 */
        background-image: linear-gradient(to right, #e66465, #9198e5);
      }
    </style>
  </head>
  <body>
    <p>从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：</p>

    <div id="box1"></div>
  </body>
</html>

请添加图片描述
其实就是加上了 to right 这个值。

线性渐变-对角

可以通过指定水平和垂直的起始位置来制作一个对角渐变。下面的实例演示了从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到黄色：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      #box1 {
    
    
        width: 300px;
        height: 200px;
        background-color: red; /* 浏览器不支持时显示 */
        background-image: linear-gradient(to bottom right, red, yellow);
      }
    </style>
  </head>
  <body>
    <p>从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：</p>

    <div id="box1"></div>
  </body>
</html>

请添加图片描述

径向渐变

径向渐变由它的中心定义。为了创建一个径向渐变，你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

background-image: radial-gradient(
  shape size at position,
  start-color,
  ...,
  last-color
);

径向渐变 - 颜色结点均匀分布（默认情况下）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      #box1 {
    
    
        width: 300px;
        height: 200px;
        background-color: red; /* 浏览器不支持的时候显示 */
        background-image: radial-gradient(
          red,
          yellow,
          blue
        ); /*  标准的语法（必须放在最后）*/
      }
    </style>
  </head>
  <body>
    <p>从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：</p>

    <div id="box1"></div>
  </body>
</html>

请添加图片描述
径向渐变 - 颜色结点不均匀分布

<style>
  #box1 {
    
    
    width: 300px;
    height: 200px;
    background-color: red; /* 浏览器不支持的时候显示 */
    background-image: radial-gradient(red 25%, yellow 35%, pink 60%);
  }
</style>

请添加图片描述
设置形状

<style>
  #box1 {
    
    
    width: 300px;
    height: 200px;
    background-color: red; /* 浏览器不支持的时候显示 */
    background-image: radial-gradient(circle, red 25%, yellow 35%, pink 60%);
  }
</style>

请添加图片描述
由于不同的渲染引擎实现渐变的语法不同，这里只针对线性渐变的 W3C 标准语法来分析其用法，其余可以查阅相关资料。

2.过渡

在 CSS3 中，我们如果想要实现一种样式到另一种样式的转变，无需再使用 Flash 动画或者是 JavaScript ，CSS3 为我们提供了过渡的效果。

transition

属性 transition 应用于元素的过渡效果，使用时需要指定希望过渡的属性以及过渡持续的时间。

transition属性对应了四个值：

transition: transition | transition-duration | transition-timing-function |
  transition-delay;
  • transition-property 规定了应用于过渡效果的 CSS 属性的名称，默认值为 all 。
  • transition-duration 规定了过渡持续的时间，默认值为 0s。也就是说，如果不指定过渡时间，那么将不会产生过渡效果。
  • transition-timing-function 规定了过渡效果的时间曲线，如 ease （默认）：慢速开始，中间变快，慢速结束。liner ：匀速运动。
  • transition-delay 规定了过渡效果的延迟时间，默认为 0s 。

transition-timing-function 有一些常用的值：

  • linear:匀速，相当于（cubic-bezier(0,0,1,1)）。
  • ease:慢速开始，然后变快，然后慢速结束，相当于（cubic-bezier(0.25,0.1,0.25,1)）。
  • ease-in:慢速开始，相当于（cubic-bezier(0.42,0,1,1)）。
  • ease-out:慢速结束，相当于（cubic-bezier(0,0,0.58,1)）。
  • ease-in-out:慢速开始，慢速结束，相当于（cubic-bezier(0.42,0,0.58,1)）。
  • cubic-bezier(n,n,n,n):在 cubic-bezier 函数中定义自己的值，取值范围是 0 ~ 1。

当指定多个属性的过渡效果时，用逗号隔开即可：

transition: width 2s ease-in-out, height 2s ease-in-out;

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style type="text/css">
      .div1 {
    
    
        margin: 50px;
        width: 200px;
        height: 200px;
        background-color: lightgreen;
        opacity: 0.5;
        transition: 2s ease-in-out;
        /*transition-property 默认为 all，所以将应用到 width 和 height 上*/
      }
      .div1:hover {
    
    
        width: 400px;
        height: 400px;
        opacity: 1;
      }
      .div2 {
    
    
        margin: 50px;
        width: 200px;
        height: 200px;
        background-color: cyan;
        opacity: 0.5;
        transition: height 2s cubic-bezier(0.25, 0.1, 0.25, 1);
        /*transition-property 只指定了 height，所以 width 的改变不会使用过渡效果;cubic-bezier(0.25,0.1,0.25,1) 相当于 ease，慢速开始，然后变快，慢速结束。*/
      }
      .div2:hover {
    
    
        width: 400px;
        height: 400px;
        opacity: 1;
      }
      .div3 {
    
    
        margin: 50px;
        width: 200px;
        height: 200px;
        background-color: orange;
        opacity: 0.5;
        transition: 2s ease-in-out 2s;
        /*transition-delay 设置为 2s，当鼠标移到该盒子上，过渡效果将会延迟 2s 开始、结束*/
      }
      .div3:hover {
    
    
        width: 400px;
        height: 400px;
        opacity: 1;
      }
      .div4 {
    
    
        margin: 50px;
        width: 200px;
        height: 200px;
        background-color: grey;
        opacity: 0.5;
        transition: ;
        /*所有属性使用默认值，transition-timing-function 的默认值为 0s，所以 div4 无过渡效果*/
      }
      .div4:hover {
    
    
        width: 400px;
        height: 400px;
        opacity: 1;
      }
    </style>
  </head>
  <body>
    <div class="div1">div1 transition: 2s ease-in-out;</div>
    <div class="div2">
      div2 transition: height 2s cubic-bezier(0.25,0.1,0.25,1);
    </div>
    <div class="div3">div3 transition: 2s ease-in-out 2s;</div>
    <div class="div4">div4 transition: ;</div>
  </body>
</html>

将鼠标挪动到矩形上观察效果。

可以发现，div1 的持续时间设置为 2s，效果采用 ease-in-out，其余为默认值，所以 opacity、width、height 的改变都会采用过渡效果；div2 中指定了过渡的属性为 height，所以其它两个属性不会使用过渡效果；div3 设置了 transition-delay，过渡效果的开始和结束都会延迟相应的时间；div4 所有的值都使用默认值，包括持续时间 0s，所以 div4 无过渡效果，变化会非常生硬。

自行改变 transition 的值查看效果。

3. 2D 、3D 转换

CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。在前面的章节中我们已经学习了 CSS3 的过渡效果，在本节中，我们将结合过渡功能对 CSS3 的 2D 、3D 转换进行学习。

  • 2D 转换
  • 3D 转换

转换有下列属性：

  • transform: 将 2D 或 3D 转换应用到元素上去
  • transform-origin：可以改变被转换元素的位置
transform-origin: x-axis y-axis z-axis;
/*
x-axis:定义视图在 X 轴的位置，left | center | right | length | %
y-axis:定义视图在 Y 轴的位置，top | center | bottom | length | %
z-axis:定义视图在 Z 轴的位置，length
*/

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style type="text/css">
      .div1 {
    
    
        width: 300px;
        height: 300px;
        margin: 200px;
        border: 2px solid;
        text-align: center;
      }
      .div1 div {
    
    
        width: 300px;
        height: 300px;
        background: lightgreen;
        transform: rotate(45deg);
      }
      .transform-origin div {
    
    
        transform-origin: 10% 10%;
      }
    </style>
  </head>
  <body>
    <div class="div1">
      <div>变换基点在默认位置</div>
    </div>
    <div class="div1 transform-origin">
      <div>变换基点在 10% 10% 位置</div>
    </div>
  </body>
</html>

运行效果图为：

在这里插入图片描述
在这里插入图片描述
可以看到两个变换的基点有了明显的不同，第二个将变换基点设置到 10% 10% 的位置，变换也出现了不同。

  • transform-style：规定被嵌套元素如何在 3D 空间中显示
transform-style: flat | preserved-3d;
/*
flat：子元素将不保留 3D 位置
preserved-3d：子元素将保留 3D 位置
在实现一些 3D 效果的时候，一般都要声明为 preserved-3d
*/

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style type="text/css">
      .div1 {
    
    
        width: 200px;
        height: 200px;
        border: 1px solid #bbb;
        margin: 100px;
        /* 在父元素中设置transform-style: preserve-3d; */
        transform-style: preserve-3d;
        transform: perspective(600px);
      }
      .div1 div {
    
    
        width: 200px;
        height: 200px;
        background: lightgreen;
        transform: rotateX(60deg);
      }
      .div2 {
    
    
        width: 200px;
        height: 200px;
        border: 1px solid #bbb;
        margin: 100px;
        /* 在父元素中设置transform-style: flat; */
        transform-style: flat;
        transform: perspective(600px);
      }
      .div2 div {
    
    
        width: 200px;
        height: 200px;
        background: lightgreen;
        transform: rotateX(60deg);
      }
    </style>
  </head>
  <body>
    <div class="div1">
      <div></div>
    </div>
    <div class="div2">
      <div></div>
    </div>
  </body>
</html>

在这里插入图片描述
可以看到，div1 和 div2 除了 transform-style 属性之外，其它完全相同，一个保留了 3d 效果，一个未保留 3d 效果。

  • perspective：规定 3D 元素的透视效果，与 perspective-origin 结合使用，可以改变 3D 元素的底部位置,在实现一些 3D 效果，这一项是必不可少的。
perspective: number | none;
/*
number：单位 px，元素距离视图的距离
none：默认值，0，无透视
*/

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style type="text/css">
      .div1 {
    
    
        width: 300px;
        height: 300px;
        margin: 50px;
        border: 1px solid #bbb;
      }
      .div1 div {
    
    
        width: 100%;
        height: 100%;
        background: lightgreen;
        transform: perspective(600px) rotateY(45deg);
        /*设置了透视和变换方式*/
      }
    </style>
  </head>
  <body>
    <div class="div1">
      <div></div>
    </div>
  </body>
</html>

行效果图为：
在这里插入图片描述

  • perspective-origin：规定 3D 元素的底部位置
perspective-origin: x-axis y-axis;
/*
x-axis:定义该视图在 X 轴上的位置。默认为 50%。left|center|right|length|%
y-axis:定义该视图在 Y 轴上的位置。默认为 50%。top|center|bottom|length|%
将透视聚集点改变到其他位置。
*/
  • backface-visibility：定义元素在不面对屏幕时是否可见
backface-visibility: visible|hidden;
/*
visible：背面可见
hidden：背面不可见
*/

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style type="text/css">
      div {
    
    
        width: 200px;
        height: 200px;
        background: lightgreen;
        transform: rotateY(180deg);
        /* 将 div 元素都翻转 180deg，翻转到背面 */
      }
      .div1 {
    
    
        backface-visibility: hidden;
      }
      .div2 {
    
    
        backface-visibility: visible;
      }
    </style>
  </head>
  <body>
    <div class="div1">div1 backface-visibility: hidden;</div>
    <div class="div2">div2 backface-visibility: visible;</div>
  </body>
</html>

运行效果图为：
在这里插入图片描述
可以看到，两个 div 块在翻转后都是背面朝向我们，当我们设置 div1 的 backface-visibility: hidden 时，div1 就不可见了，只有 div2 是可见的。

2D 转换
2D 转换有以下几种常用方法：

  • translate(x,y) ：根据原始位置的 x 、y 轴位置，分别偏离 x 、y 的距离。
  • rotate(angle) ：根据给定的 angle 大小，顺时针旋转，如果 angle 为负，则逆时针旋转。
  • scale(x,y) ：根据 x 、y 的值，对应的放大宽度和高度。
  • skew(angle,angle) ：根据给定的两个角度，分别在水平方向和垂直方向倾斜，第二个角度默认为 0 。
  • matrix() ：matrix 变换涉及到了线性代数的知识，在此不作讲述。感兴趣的同学可以自行了解。
<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style type="text/css">
      .div1 {
    
    
        margin: 50px;
        width: 200px;
        height: 200px;
        background-color: lightgreen;
        opacity: 0.5;
        transition: 2s;
      }
      .div1:hover {
    
    
        transform: translate(30px, 40px);
        /*translate(x,y)*/
        opacity: 1;
      }
      .div2 {
    
    
        margin: 50px;
        width: 200px;
        height: 200px;
        background-color: cyan;
        opacity: 0.5;
        transition: 2s;
      }
      .div2:hover {
    
    
        transform: rotate(180deg);
        /*rotate(angle)*/
        opacity: 1;
      }
      .div3 {
    
    
        margin: 50px;
        width: 200px;
        height: 200px;
        background-color: orange;
        opacity: 0.5;
        transition: 2s;
      }
      .div3:hover {
    
    
        transform: skew(20deg, 30deg);
        /*skew(angle,angle)*/
        opacity: 1;
      }
    </style>
  </head>
  <body>
    <div class="div1">div1</div>
    <div class="div2">div2</div>
    <div class="div3">div3</div>
  </body>
</html>

把鼠标移动到矩形上，观察效果。

3D 转换

3D 转换语法与 2D 转换语法较为类似

  • translate3d(x,y,z):定义 3D 转化，给出三个值，分别应用于三个坐标轴上
  • translateX(x):定义 3D 转化，仅用于 X 轴
  • translateY(y):定义 3D 转化，仅用于 Y 轴
  • translateZ(z):定义 3D 转化，仅用于 Z 轴
  • scale3d(x,y,z):定义 3D 缩放转换
  • scaleX(x):定义 3D 缩放转换，仅用于 X 轴
  • scaleY(y):定义 3D 缩放转换，仅用于 Y 轴
  • scaleZ(z):定义 3D 缩放转换，仅用于 Z 轴
  • rotate3d(x,y,z,angle):定义 3D 旋转
  • rotateX(angle):定义沿 X 轴的 3D 旋转
  • rotateY(angle):定义沿 Y 轴的 3D 旋转
  • rotateZ(angle):定义沿 Z 轴的 3D 旋转
  • perspective:定义 3D 转换元素的透视视图
<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style type="text/css">
      .div1 {
    
    
        margin: 50px;
        width: 200px;
        height: 200px;
        background-color: lightgreen;
        opacity: 0.5;
        transition: 2s;
      }
      .div1:hover {
    
    
        /*X 轴旋转*/
        transform: rotateX(180deg);
        opacity: 1;
      }
      .div2 {
    
    
        margin: 50px;
        width: 200px;
        height: 200px;
        background-color: cyan;
        opacity: 0.5;
        transition: 2s;
      }
      .div2:hover {
    
    
        /*Y 轴伸缩*/
        transform: scaleY(2);
        opacity: 1;
      }
      .div3 {
    
    
        margin: 50px;
        width: 200px;
        height: 200px;
        background-color: orange;
        opacity: 0.5;
        transition: 2s;
      }
      .div3:hover {
    
    
        /*X 轴移动*/
        transform: translateX(50%);
        opacity: 1;
      }
    </style>
  </head>
  <body>
    <div class="div1">div1</div>
    <div class="div2">div2</div>
    <div class="div3">div3</div>
  </body>
</html>

把鼠标移动到盒子上，观察效果。

4.动画

动画是使元素从一种样式逐渐变化为另一种样式的效果。在 CSS3 中 ，我们可以创建动画，取代以往的网页动画图象。

@keyframes

在 CSS3 标准下，我们使用 @keyframes 规则来创建动画。我们无需将动画的每一帧都描绘出来，只需要给出变化的关键帧，然后给出变化时间，其余的等待它自动计算完成就可以了。 @keyframes 里描述了动画的关键帧的相关属性，语法如下：

@keyframes 动画名称 {
    
    
  0% {
    
    
    /*css code 描述关键帧属性*/
  }
  25% {
    
    
    /*css code 描述关键帧属性*/
  }
  50% {
    
    
    /*css code 描述关键帧属性*/
  }
  75% {
    
    
    /*css code 描述关键帧属性*/
  }
  100% {
    
    
    /*css code 描述关键帧属性*/
  }
}

动画创建完成后，我们使用 animation 属性将动画绑定到对应的元素上去，并给出运行时间，就完成了一个简单的动画。

<!DOCTYPE html>
<html>
  <head>
    <title>s</title>
    <style type="text/css">
      @keyframes myfirstcartoon {
    
    
        0% {
    
    
          background-color: lightgreen;
        }
        25% {
    
    
          background-color: blue;
        }
        50% {
    
    
          background-color: orange;
        }
        75% {
    
    
          background-color: red;
        }
        100% {
    
    
          background-color: yellow;
        }
      }
      body {
    
    
        animation: myfirstcartoon 5s;
      }
    </style>
  </head>
  <body></body>
</html>

CSS3 动画还有很多有趣的属性：

  • animation:动画属性的简写属性，除了 animation-play-state 属性。
  • animaiton-name：规定 @keyframes 动画的名称。
  • animation-duration：规定动画一个周期的时间，默认为 0。
  • animaiton-timing-function：规定动画的速度曲线。默认为 ease。
  • animaiton-delay：规定动画的播放延迟时间。
    animaiton-iteration-count：规定动画播放次数，默认为 1。取值为 infinite 时，动画被无限次播放。
  • animation-direction：规定动画是否在下一周期逆向播放，默认为 normal。取值为 normal 时，动画正常播放，取值为 alternate 时，动画轮流反向播放。
  • animation-play-state：规定动画是否正在运行或暂停，默认为 running；暂停时为 paused。
  • animation-fill-mode：规定动画在播放之前或之后，其动画效果是否可见。取值为 none 时，不改变默认行为；取值为 forwards 时，在动画完成后，保持最后一个属性；取值为 backwards 时，在动画开始之前应用开始属性值；取值为 both 时，向前向后的模式都将被启用。

我们可以使用 animaiton 来简写动画的这些属性：

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style type="text/css">
      @keyframes myfirstcartoon {
    
    
        0% {
    
    
          background-color: lightgreen;
        }
        25% {
    
    
          background-color: blue;
        }
        50% {
    
    
          background-color: orange;
        }
        75% {
    
    
          background-color: red;
        }
        100% {
    
    
          background-color: yellow;
        }
      }
      body {
    
    
        animation: myfirstcartoon 5s ease-in-out 1s infinite alternate;
        /*上述值分别对应了：name duration timing-function delay iteration-count direction*/
      }
    </style>
  </head>
  <body></body>
</html>

注：创建好的动画需要使用 animation 绑定到一个选择器上，否则动画不会运行；并且，需要给出运行时间，因为时间默认值是 0s ，如果不给出时间，动画将同样不会运行。

十一.CSS3布局

1.Flex 布局

Flex 是 Flexible Box（弹性盒子）的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。

div {
    
    
  display: flex;
}

行内元素也可以使用 Flex 布局

span {
    
    
  display: inline-flex;
}

Webkit 内核的浏览器，必须加上 -webkit 前缀。

div {
    
    
  display: -webkit-flex; /* Safari */
  display: flex;
}

弹性布局是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

2.基本概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称“项目”。
在这里插入图片描述
容器默认存在两根轴：水平的主轴和垂直的交叉轴

容器属性

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

子元素属性

  • flex
  • align-self

3.flex-direction

flex-direction 属性指定了主轴线的方向，子元素默认是按照主轴线排列的，所以 flex-direction 也指定了弹性子元素在弹性容器中的排列方式， 有以下四个值：

  • row ：（默认）横向从左到右排列。
  • row-reverse ：顾名思义，从右向左横向排列，反向。
  • column ： 纵向从上往下排列。
  • column-reverse ： 纵向从下往上排列。

下面使用值 row 操作属性 flex-direction：

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style>
      .container {
    
    
        display: flex;
        flex-direction: row;
        width: 400px;
        height: 450px;
        background-color: green;
      }
      .item {
    
    
        background-color: red;
        width: 100px;
        height: 100px;
        margin: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">item1</div>
      <div class="item">item2</div>
      <div class="item">item3</div>
    </div>
  </body>
</html>

运行的效果图为：
请添加图片描述

如图所示，三个子元素按照值 row 的排列方式，在容器的横向从左到右排列。

当我们修改 flex-direction 为 column ， 在容器的纵向从上往下排列。

4.flex-wrap

弹性盒子默认情况下所有子元素都是排在一行上的，但容器大小有限，很有可能出现子元素被截断的情况，这时候就需要换行，flex-wrap 就是用来操作子元素换行的属性。flex-wrap 有以下三个值：

  • nowrap ：（默认） 不换行。
  • wrap ：换行，第一行排满后自动换到第二行。
  • wrap-reverse ：换行，与 wrap 不同的是如果出现换行，换行后的元素在第一行上方。

下面使用值 wrap 来操作属性 flex-wrap ：

<style>
  .container {
    
    
    display: flex;
    flex-wrap: wrap;
    width: 350px;
    height: 450px;
    background-color: green;
  }
  .item {
    
    
    background-color: red;
    width: 120px;
    height: 100px;
    margin: 20px;
  }
</style>

运行效果图为：
请添加图片描述
当我们的父元素（flex-container）宽度为 35px 时，子元素（flex item）为 120px，父元素的一排排不满三个盒子，那么设置 wrap 属性就能够换行，第一行排满后自动换到第二行。

而如果我们强制不换行，设置 nowrap 属性值：
请添加图片描述
子元素的宽度就会被自动减少，挤在一行。

5.flex-flow

flex-flow 是 flex-direction 和 flex-wrap 的简写形式，默认值为 row nowrap。

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style>
      .container {
    
    
        display: flex;
        flex-flow: row wrap;
        /*从左往右 换行*/
        width: 350px;
        height: 350px;
        background-color: green;
      }
      .item {
    
    
        background-color: red;
        width: 120px;
        height: 100px;
        margin: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">item1</div>
      <div class="item">item2</div>
      <div class="item">item3</div>
    </div>
  </body>
</html>

运行效果图为：
请添加图片描述

6.justify-content

子元素在容器中默认是以左对齐的布局排列在主轴线上的，属性 justify-content 用来调整子元素在主轴线上的对齐方式，它有以下五个值：

  • flex-start ：左对齐
  • flex-end ：右对齐
  • center ：居中
  • space-between ：两端对齐，项目之间的间隔都相等。
  • space-around ：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

在这里插入图片描述
在这里插入图片描述

使用值 space-between 来操作属性 justify-content ：

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style>
      .container {
    
    
        display: flex;
        justify-content: space-around;
        width: 400px;
        height: 250px;
        background-color: green;
      }
      .item {
    
    
        background-color: red;
        width: 100px;
        height: 100px;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">item1</div>
      <div class="item">item2</div>
      <div class="item">item3</div>
    </div>
  </body>
</html>

运行效果图为：
请添加图片描述
容器的宽度为 400px，三个子元素的宽度和加上它们的边框小于 400px，所以不会出现换行。

7.align-items

与主轴垂直的轴我们称它为交叉轴，属性 align-items 用于定义子元素在交叉轴上的排列方式，它有下列五个值：

  • flex-start ：交叉轴的起点对齐。
  • flex-end ：交叉轴的终点对齐。
  • center ：交叉轴的中点对齐。
  • baseline ：项目的第一行文字的基线对齐。
  • stretch ：如果子元素未设置高度或设置为 auto ，子元素将占满整个容器高度。
    在这里插入图片描述
    在这里插入图片描述
    使用值 flex-end 来操作属性 align-items ：
<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style>
      .container {
    
    
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        width: 400px;
        height: 250px;
        background-color: green;
      }
      .item {
    
    
        background-color: red;
        width: 100px;
        height: 100px;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">item1</div>
      <div class="item">item2</div>
      <div class="item">item3</div>
    </div>
  </body>
</html>

运行效果图为：
在这里插入图片描述
注：这里的 flex-direction 设置为 column ，即主轴线的方向是垂直的，即交叉轴的方向是水平的；align-items 设置为 flex-end，即子元素在交叉轴结束位置上的边界对齐，交叉轴的结束位置在右侧，所以三个子元素在右边界上对齐。

8.align-content

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。，align-content 有以下六个值：

  • flex-start ：与交叉轴的起点对齐。
  • flex-end ：与交叉轴的终点对齐。
  • center ：与交叉轴的中点对齐。
  • space-between ：与交叉轴两端对齐，轴线之间的间隔平均分布。
  • space-around ：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
  • stretch：轴线占满整个交叉轴。

下面使用值 center 来操作属性 align-content ：

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style>
      .container {
    
    
        display: flex;
        flex-wrap: wrap;
        align-content: center;
        width: 200px;
        height: 600px;
        background-color: green;
      }
      .item {
    
    
        background-color: red;
        width: 100px;
        height: 100px;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">item1</div>
      <div class="item">item2</div>
      <div class="item">item3</div>
    </div>
  </body>
</html>

运行效果图为：

在这里插入图片描述
注：该处设置 flex-wrap 换行属性为 wrap，允许换行。align-content 属性在容器内不存在换行时不产生效果，所以我们将容器的 width 设置为 200px，一行只能放下一个子元素。align-content：center 表示每一行在交叉轴上居中排列，三个子元素只是在交叉轴上居中排列，因为我们没有设置主轴线的对齐方式，如果我们将 CSS 代码修改为如下所示，其余代码不变，那么子元素的排列效果就会发生变化。

.container {
    
    
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  width: 200px;
  height: 600px;
  background-color: green;
}
.item {
    
    
  background-color: red;
  width: 100px;
  height: 100px;
  margin: 10px;
}

运行效果图为：
在这里插入图片描述
可以看到，三个子元素的排列已经完全居中了。

9.flex

flex 属性实际上是三个属性的简写形式：

flex: flex-grow || flex-shrink || flex-basis;

所以在介绍 flex 之前，先介绍这三个属性各自的特性。

flex-grow

当容器比子元素大很多，子元素的宽高又设置的很小，这个时候即使水平垂直居中，整个布局看起来仍然很奇怪：

在这里插入图片描述
又或者根据实际的需要，子元素需要将容器占满。这个时候，我们就可以使用属性 flex-grow 来操作。 flex-grow 是设置子元素如何分配容器的剩余空间的属性。

假设容器的宽度为 400px，A 元素的宽度为 100px，B 元素的宽度也为 100px。

  • 当 flex-grow 的值为 0 （默认），子元素不会分配剩余空间，所以 A 和 B 的宽度仍然是 100px 。
  • 当 flex-grow 的值为 1 ，子元素平均分配剩余空间，即：剩余宽度为 200px ，A 和 B 各分配得到 100px ，A 和 B 的宽度都变为了 200px 。
  • 当 flex-grow 的值大于 1，则按照各自所占的比例分配剩余空间。例如 A 元素的 flex-grow = 1 ，B 元素的 flex-grow = 2 ，则 A 分配到 1/3 的剩余空间，即 1/3 * 200px ，B 元素同理。
<!DOCTYPE html>
<html>
  <head>
    <title>shiyanlou</title>
    <style>
      .container {
    
    
        display: flex;
        justify-content: center;
        width: 600px;
        height: 200px;
        background-color: green;
      }
      .item {
    
    
        background-color: red;
        width: 100px;
        height: 100px;
        margin: 10px;
      }
      .item1 {
    
    
        flex-grow: 3;
      }
      .item2 {
    
    
        flex-grow: 6;
      }
      .item3 {
    
    
        flex-grow: 1;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item item1">item1</div>
      <div class="item item2">item2</div>
      <div class="item item3">item3</div>
    </div>
  </body>
</html>

运行效果图为：
在这里插入图片描述
三个子元素按照比例分配了剩余的空间，形成了上图的布局。

flex-shrink
与 flex-grow 相反，当容器过小，子元素过大时，属性 flex-shrink 用来缩小子元素。 假设容器的宽度为 300px ，A 元素的宽度为 200px ，B 元素的宽度也为 200px 。

  • 当 flex-shrink 的值为 0 ，子元素不会缩小，可能会导致元素溢出容器。
  • 当 flex-shrink 的值为 1 （默认），子元素会按照同样的比例缩小自身的大小。A 的宽度 = （200-100*（2001/（2001+200*1）））= 150 。B 元素也同理。
  • 当 flex-shrink 的大于 1 ，子元素会按照给定的比例缩小自身的大小。例如 A 的 flex-shrink 设置为 2 ，B 的 flex-shrink 设置为 3 ，则 A 的宽度 = （200-100*（2002/（2002+200*3）））= 160 。B 元素也同理。
<!DOCTYPE html>
<html>
  <head>
    <title>shiyanlou</title>
    <style>
      .container {
    
    
        display: flex;
        justify-content: center;
        width: 300px;
        height: 200px;
        background-color: green;
      }
      .item {
    
    
        background-color: red;
        width: 200px;
        height: 100px;
        margin: 10px;
      }
      .item1 {
    
    
        flex-shrink: 3;
      }
      .item2 {
    
    
        flex-shrink: 6;
      }
      .item3 {
    
    
        flex-shrink: 1;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item item1">item1</div>
      <div class="item item2">item2</div>
      <div class="item item3">item3</div>
    </div>
  </body>
</html>

运行效果图为：
在这里插入图片描述

flex-basis

flex-basis 用于设置子元素的宽度，规定子元素的基准值，如果子元素另外设置了 width ，会被该属性的值覆盖。 flex-basis 有几个特殊的取值，我们介绍其中的 auto 取值（默认）。当 flex-basis 取值为 auto 时，如果子元素的宽度不为 auto ，那么子元素的宽度就设置为自身的宽度；如果子元素的宽度设置为 auto ，那么子元素的宽度就根据子元素的内容来自动布局。

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style>
      .container {
    
    
        display: flex;
        justify-content: center;
        width: 400px;
        height: 200px;
        background-color: green;
      }
      .item {
    
    
        background-color: red;
        flex-basis: auto;
        width: auto;
        height: 100px;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">item1</div>
      <div class="item">item2</div>
      <div class="item">item3</div>
    </div>
  </body>
</html>

运行效果图为：

在这里插入图片描述

10.align-self

属性 align-self 可以使某个子元素的对齐方式与其它的子元素不同，可以覆盖 align-items 的值。align-self 的取值与 align-items 的取值相比只多了一个 auto ，其余均与 align-items 相同。 下面我们操作一下属性 align-self：

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style>
      .container {
    
    
        display: flex;
        align-items: flex-start;
        width: 400px;
        height: 250px;
        background-color: green;
      }
      .item {
    
    
        background-color: red;
        width: 100px;
        height: 100px;
        margin: 10px;
      }
      .item1 {
    
    
        align-self: inherit;
      }
      .item2 {
    
    
        align-self: flex-end;
      }
      .item3 {
    
    
        align-self: inherit;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item item1">item1</div>
      <div class="item item2">item2</div>
      <div class="item item3">item3</div>
    </div>
  </body>
</html>

运行效果图为：
在这里插入图片描述

11.多媒体查询

媒体类型

CSS3 的多媒体查询继承了 CSS2 的多媒体类型的所有思想，取代了查找设备的类型，CSS3 根据设置自适应显示，CSS3 有以下几种多媒体类型：

  • all ：用于所有的多媒体类型设备。
  • print ：用于打印机。
  • screen ：用于电脑屏幕、智能手机、平板等。
  • speech ：用于屏幕阅读器。

@media 的语法为：

@media not|only mediatype and (expressions) {
    
    
  /*css code here*/
}

下面操作一下 @media：

<!DOCTYPE html>
<html>
  <head>
    <title>shiyanlou</title>
    <style type="text/css">
      @media screen and (min-width: 480px) {
    
    
        body {
    
    
          background-color: red;
        }
      } /*窗口尺寸大于480px，背景颜色为红色*/
      @media screen and (min-width: 720px) {
    
    
        body {
    
    
          background-color: lightgreen;
        }
      } /*窗口尺寸大于720px，背景颜色为绿色*/
    </style>
  </head>
  <body></body>
</html>

调整浏览器的窗口大小，观察背景颜色的变化。

媒体查询使用方法

媒体查询能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的渲染效果。媒体查询有其自己的使用规则。具体来说，媒体查询的使用方法如下。

@media 媒体类型and （媒体特性）{
    
    你的样式}

使用媒体查询必须要使用 @media 开头，然后指定媒体类型（也可以称为设备类型），随后是指定媒体特性（也可以称之为设备特性）。媒体特性的书写方式和样式的书写方式非常相似，主要分为两个部分，第一个部分指的是媒体特性，第二部分为媒体特性所指定的值，而且这两个部分之间使用冒号分隔。

媒体特性是通过 min/max 来表示大于等于或小于做为逻辑判断，接下来一起来看看媒体查询在实际项目中常用的方式。

1.最大宽度 max-width

max-width 是媒体特性中最常用的一个特性，其意思是指媒体类型小于或等于指定的宽度时，样式生效

@media screen and (max-width: 400px) {
    
    
  .box {
    
    
    display: none;
  }
}

上面表示的是：当屏幕小于或等于 400px 时,页面中的 .box 都将被隐藏。

2.最小宽度 min-width

min-width 与 max-width 相反，指的是媒体类型大于或等于指定宽度时，样式生效。

@media screen and (min-width: 1000px) {
    
    
  .box {
    
    
    width: 400px;
  }
}

上面表示的是：当屏幕大于或等于 1000px 时，容器 .box 的宽度为 980px。

3.多个媒体特性使用

媒体查询可以使用关键词 and 将多个媒体特性结合在一起。也就是说，一个媒体查询中可以包含 0 到多个表达式，表达式又可以包含 0 到多个关键字，以及一种媒体类型。

@media screen and (min-width: 700px) and (max-width: 1000px) {
    
    
  .box {
    
    
    width: 500px;
  }
}

当屏幕在 700px~1000px 之间时，容器 .box 的宽度为 500px。

4.not 关键词

使用关键词 not 是用来排除某种制定的媒体类型，也就是用来排除符合表达式的设备。换句话说，not 关键词表示对后面的表达式执行取反操作。

@media not print and (max-width: 1200px) {
    
    
  .box {
    
    
    width: 500px;
  }
}

在除打印设备和设备宽度小于 1200px 下所有设备中，容器 .box 的宽度为 500px。

12.用户界面

相比 CSS2 ，CSS3 增加了一些新的特性来调整元素尺寸、框尺寸和外边框。

  • resize
  • box-sizing
  • outline-offset

resize

属性 resize 允许用户调整元素的尺寸，但是需要将元素的 overflow 属性设置为 auto 、hidden 或 scroll，resize 属性才能生效。

resize 有以下四个值：

  • none ：用户无法调整元素尺寸。
  • both ：用户可以调整元素的高度和宽度。
  • horizontal ：用户可以调整元素的宽度。
  • vertical ：用户可以调整元素的高度。

4下面使用值 both 操作属性 resize：

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style type="text/css">
      div {
    
    
        overflow: auto; /* auto 、hidden or scroll*/
        border: 2px solid;
        width: 300px;
        height: 250px;
        resize: both;
      }
    </style>
  </head>
  <body>
    <div>
      <p>用户可以调整该元素的大小</p>
    </div>
  </body>
</html>

运行效果图为：
在这里插入图片描述

box-sizing

属性 box-sizing 和盒子模型有关，它允许用户以特定的方式定义匹配某个区域的特定元素。

box-sizing 有以下三个值：

  • content-box ：（默认）设置属性为该值时，设定的高度和宽度值只应用到 content 内容上，不包括 padding 和 border。
  • border-box ：设置属性为该值时，设定的高度和宽度应用到 content + padding + border 上，也就是说如果要得到 >* content 的宽高需要减去 padding 和 border。
    inherit ：继承父元素的 box-sizing 取值。

下面对比一下 content-box 和 border-box：

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style type="text/css">
      .container {
    
    
        width: 660px; /* width = item1.width + 2 * item1.border + item2.width */
        height: 310px; /* height = item1.height + 2 * item1.border */
        display: flex;
        flex-flow: row wrap;
        border: 2px solid;
      }
      .content-box {
    
    
        box-sizing: content-box;
        border: 30px solid yellow;
        width: 300px;
        height: 250px;
      }
      .border-box {
    
    
        box-sizing: border-box;
        border: 30px solid blue;
        margin-top: 30px;
        width: 300px;
        height: 250px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="content-box">item1</div>
      <div class="border-box">item2</div>
    </div>
  </body>
</html>

运行效果图为：
在这里插入图片描述
item1 和 item2 的边框都设置为 30px，宽高都设置成相同数值。按照 box-sizing 的属性规定，item1 的 box-sizing 为 content-box，item1 最终的宽高应该为设置的宽高加上边框和填充的大小，填充默认为 0，则 item1 最终的宽高应该为 360px 310px。item2 的 box-sizing 为 border-box，item2 最终的宽高就等于设置的宽高 300px 250px。运行后可以发现，item2 content 高加 padding 高加 border 高等于 item1 content 高，符合我们的预期。如果还有些疑惑，可以利用 container 的宽度计算一下 item1 和 item2 的宽度，会发现结果如上述对 box-sizing 属性描述的一样。

outline-offset

属性 outline-offset 对轮廓进行偏移，并在边框边缘进行绘制，轮廓不会占用空间，并且不一定是矩形。 下面操作 outline-offset 属性：

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

运行效果图为：
在这里插入图片描述

十二.CSS3 选择器

1.常用选择器

CSS 的常用选择器包括了通配符选择器、元素选择器、类选择器等。

CSS3 中新增了一个常用选择器：

  • 通用兄弟元素选择器（E~F）

E 和 F 属于同一父元素之内，并且 F 在 E 之后，通用兄弟选择器会选择符合这样排列的所有的 F 元素。

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style type="text/css">
      .test ~ p {
    
    
        background: red;
      }
    </style>
  </head>
  <body>
    <div>
      <p>1</p>
      <p class="test">2</p>
      <p>3</p>
      <p>4</p>
      <p>5</p>
      <p>6</p>
      <p>7</p>
    </div>
    <p>8 out of div</p>
  </body>
</html>

在浏览器中运行效果图为：
在这里插入图片描述
可以看到，选择器

.test ~ p {
    
    
  background: red;
}

选择了 p.test 元素后的所有兄弟元素 <p> ,由于 <p>8 out of div </p> 和前七个 <p> 不是兄弟元素，所以未被选中。

2.属性选择器

E[attr^=“value”]

它与 E[attr=“value”]很类似，只不过多了一个 ^ ，该选择器选择属性名为 attr ，属性值以 value 开头的元素。

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style type="text/css">
      a[title^='test'] {
    
    
        background: red;
      }
    </style>
  </head>
  <body>
    <a href="https://www.lanqiao.cn" title="test">title="test"</a><br />
    <a href="https://www.lanqiao.cn" title="testaaa">title="testaaa"</a><br />
    <a href="https://www.lanqiao.cn" title="aaatest">title="aaatest"</a><br />
    <a href="https://www.lanqiao.cn" title="aaaaa">title="aaaaa"</a><br />
  </body>
</html>

运行效果图为：
在这里插入图片描述
可以看到前两个 <a> 标签的 title 都是以 test 开头，它们都被选择器选中了。

E[attr$=“value”]

该选择器选择属性名为 attr，属性值以 value 结尾的元素。

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style type="text/css">
      a[title$='test'] {
    
    
        background: red;
      }
    </style>
  </head>
  <body>
    <a href="https://www.lanqiao.cn" title="test">title="test"</a><br />
    <a href="https://www.lanqiao.cn" title="testaaa">title="testaaa"</a><br />
    <a href="https://www.lanqiao.cn" title="aaatest">title="aaatest"</a><br />
    <a href="https://www.lanqiao.cn" title="aaaaa">title="aaaaa"</a><br />
  </body>
</html>

运行效果图为：
在这里插入图片描述
可以看到第一个和第三个 <a> 标签的 title 都是以 test 结尾，它们都被选择器选中了。

E[attr=“value”]

该选择器选择属性名为 attr，属性值包含 value 的元素。

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style type="text/css">
      a[title*='test'] {
    
    
        background: red;
      }
    </style>
  </head>
  <body>
    <a href="https://www.lanqiao.cn" title="test">title="test"</a><br />
    <a href="https://www.lanqiao.cn" title="testaaa">title="testaaa"</a><br />
    <a href="https://www.lanqiao.cn" title="aaatest">title="aaatest"</a><br />
    <a href="https://www.lanqiao.cn" title="aaaaa">title="aaaaa"</a><br />
  </body>
</html>

运行效果图为：
在这里插入图片描述
可以看到前三个 <a> 标签的 title 都包含 test ，它们都被选择器选中了。

3.伪类选择器

E:root
该选择器选择文档的根节点，效果和设置 html 相同

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style type="text/css">
      :root {
    
    
        background: lightgreen;
      }
      /*
    与下列样式效果相同
    html{
    
    
        background: lightgreen;
    }
    */
    </style>
  </head>
  <body></body>
</html>

运行效果图为：
在这里插入图片描述

E:nth-child(n)
该选择器选择 E 元素父元素的第 n 个子元素。n 有两种取值：

  1. n 取值为整数
<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style type="text/css">
      p:nth-child(3) {
    
    
        background-color: red;
      }
    </style>
  </head>
  <body>
    <p>1</p>
    <a href="">2</a>
    <p>3</p>
    <p>4</p>
  </body>
</html>

运行效果图为：
在这里插入图片描述
选择器选取了 <p> 的父元素的第三个子元素。

注：这些子元素不一定是同种类型，如上述例子中，父元素的第二个子元素是 <a> ,它与其它 <p> 是兄弟元素。另外，当该选择器取整数时，只能取正整数。

  1. n 取值为表达式
    当取值为表达式时，变量只能使用 n，并且 n 从 0 开始依次加一，即取值为表达式时，选择器选择多个值，[n=0,1,2,3…]。当计算结果小于等于 0 或 大于子元素总数时，不选取元素。
<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style type="text/css">
      p:nth-child(2n + 1) {
    
    
        background-color: red;
      }
    </style>
  </head>
  <body>
    <p>1</p>
    <a href="">2</a>
    <p>3</p>
    <p>4</p>
  </body>
</html>

运行效果图为：
在这里插入图片描述
表达式为 2n-1，[n=0,1,2,3…]，计算结果为 nth-child(1)，nth-child(3)…，所以该选择器选择了第一个和第三个元素。

注：使用表达式时，CSS3 提供了两个特殊值：odd 和 even。odd 相当于 2n+1，even 相当于 2n。

E:nth-last-child(n)
与 E:nth-child(n) 相比多了一个 last，其实该选择器与前者十分相似，只不过前者是从前往后计数第 n 个，该选择器是从最后一个往前计数。

<!DOCTYPE html>
<html>
  <head>
    <title>=</title>
    <style type="text/css">
      p:nth-last-child(2n + 1) {
    
    
        background-color: red;
      }
    </style>
  </head>
  <body>
    <p>1</p>
    <p>2</p>
    <a href="">3</a>
    <p>4</p>
    <p>5</p>
    <p>6</p>
  </body>
</html>

运行效果图为：
在这里插入图片描述
可以看到，从最后一个元素往前计数，第一个、第三个、第五个元素都被选择器选中。

E:nth-of-type(n)
该选择器与 E:nth-child(n) 语法相同，在选择的元素上有些区别。该元素选择的是与 E 相同类型的兄弟元素.
例子：

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style type="text/css">
      p:nth-of-type(2n + 1) {
    
    
        background-color: red;
      }
    </style>
  </head>
  <body>
    <p>1th of ele,1th of p</p>
    <p>2th of ele,2th of p</p>
    <a href="https://www.lanqiao.cn">3th of ele,1th of a</a>
    <p>4th of ele,3th of p</p>
    <p>5th of ele,4th of p</p>
    <p>6th of ele,5th of p</p>
  </body>
</html>

运行效果图为：
在这里插入图片描述
该选择器选择的是与 p 类型相同的兄元素，表达式为 2n+1，即选择奇数项元素，可以看到第一个第三个第五个 p 元素都被选中了。

E:nth-last-of-type(n)
该选择器与之前的 E:nth-last-child(n) 相类似，它与上一个选择器 E:nth-of-type(n) 选择元素的方式相同，只不过计数是从最后一个符合条件的兄弟元素开始往前计数。

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style type="text/css">
      p:nth-last-of-type(2n + 1) {
    
    
        background-color: red;
      }
    </style>
  </head>
  <body>
    <p>1th of ele,1th of p</p>
    <p>2th of ele,2th of p</p>
    <a href="https://www.lanqiao.cn">3th of ele,1th of a</a>
    <p>4th of ele,3th of p</p>
    <p>5th of ele,4th of p</p>
    <p>6th of ele,5th of p</p>
    <p>7th of ele,6th of p</p>
  </body>
</html>

运行效果图为：
在这里插入图片描述

E:last-child
该选择器选择 E 元素的父元素的最后一个子元素：

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style type="text/css">
      p:last-child {
    
    
        background: red;
      }
    </style>
  </head>
  <body>
    <p>wo</p>
    <p>shi</p>
    <p>xiao</p>
    <p>niu</p>
    <p>ma</p>
  </body>
</html>

注：该选择器需要满足父元素的最后一个元素和 E 才会选取，否则不会选取.

E:first-of-type
该选择器选择 E 元素父元素的子元素的第一个与 E 元素类型一致的元素。

E:last-of-type
该选择器选择 E 元素父元素的子元素的最后一个与 E 元素类型一致的元素。

E:only-child
该元素选择的是 E 是其父元素唯一的子元素.

E:only-of-type
该选择器选择的是 E 是其父元素唯一的子元素类型

E:empty
该选择器选择的是空元素。

E:target
该选择器选择的是一个 id 与 当前 url 匹配的元素

E:not(s)
该选择器匹配不符合参数选择器 s 描述的元素。

E:enabled & E:disabled
该选择器匹配的是元素的可用和禁用状态.

E:checked
该选择器一般用于 radio-button 或 checkbox，选择它们的 checked 状态.

总结

我敲！七万多字，后头不想写栗子了，阔以去菜鸟教程或者W3C找案例嗷

猜你喜欢

转载自blog.csdn.net/weixin_44009656/article/details/124521278
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
循环神经网络（rnn）讲解
Tigao教程四：单独的关节运动
金蝶K3WISE15.0-注册套打教程
如何在Mac上配置Kubernetes
Android应用结束自身进程的方法
SpringMVC学习 十三 拦截器栈
中国驻洛杉矶总领馆举行新春招待会
HttpClient get post 发送
11 - three.js 笔记 - 绘制三维字体模型
Mysql递归获取某个父节点下面的所有子节点和子节点上的所有父节点
每日归档
更多
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022