CSS知识点

最新推荐文章于 2024-05-27 00:00:00 发布
最新推荐文章于 2024-05-27 00:00:00 发布
阅读量342 收藏 1
点赞数 1
分类专栏： 蓝桥杯web组 前端学习 文章标签： css 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55054681/article/details/128376717
版权

目录

1.考点

2.css基础语法

2.1.选择器

标签选择器

类选择器

id 选择器

选择器的优先级

!important 的介绍

后代选择器

群组选择器

2.2.背景样式

2.3.文本属性

2.4.字体属性

2.5.链接中的伪类

2.6.列表样式

3.盒子模型

3.1.border 属性

3.2.padding 属性

3.3.margin 属性

 4.display属性

4.1.block 属性值

 4.2.inline 属性值

4.3.inline-block 属性值

4.4.none 属性值

5.浮动与定位

5.1.浮动

5.2.定位

6.CSS3新特性

6.1.CSS3 新增选择器

6.1.1.新增属性选择器

6.1.2.子元素伪类选择器

6.1.3.UI 伪类选择器

6.2.文本阴影

6.3.文本溢出

6.4.圆角边框

6.5.盒子阴影

6.6.背景图像尺寸

6.7.多图背景

6.8.渐变属性

6.8.1.线性渐变

 6.8.2.径向渐变

6.9.元素转换

6.9.1.旋转函数

6.9.2.移动函数

6.9.3.缩放函数

 6.10.过渡

6.11.动画

7.弹性盒子

7.1.flex-direction 属性

 

 7.2. flex-wrap 属性

7.3.align-items 属性

7.4.align-content 属性的使用

8.@media 媒体查询

8.1.@media 语法

8.2.使用 @media 实现网页变色龙

1.考点

 

2.css基础语法

知识点

  • 选择器
  • 背景样式
  • 文本属性
  • 字体属性
  • 链接中的伪类
  • 列表样式

2.1.选择器

CSS 中有以下三种基本选择器：

  • 标签选择器
  • 类选择器
  • id 选择器

标签选择器

如果需要对页面中的某一类标签统一设定样式时，应该使用标签选择器，标签选择器的关键字以标签的名字命名。

其语法格式为：

标签名 {
  属性名: 属性值;
}

类选择器

在定义类选择器时，需要用点号和类名来定义，而在使用该类选择器时，需要在使用该类选择器的元素标签中，增加 class="类名"的属性（不包括点号），表示该标签使用了指定的类选择器。

例如：蓝桥云课的一段代码。

其语法格式为：

.类名 {
  属性名: 属性值;
}

 

id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

在定义 id 选择器时，需要用 “#” 号和 id 名来定义选择器，而在使用该 id 选择器时，需要在 HTML 标签元素中，增加 id="id 名"的属性（不包括 “#” 号），指定这个 HTML 元素的 id，这个 id 在 HTML 文档中是唯一的。

它的使用与类选择器类似，语法格式如下：

#id 选择器名 {
  属性: 属性值;
}

选择器的优先级

在 HTML 中选择器的优先级为：id 选择器 > 类选择器 > 标签选择器。

!important 的介绍

当你在样式声明中加入 !important 规则时，它会改变样式声明的优先级。

后代选择器

后代选择器是选择标签内部中某一标签的所有元素，其包括子元素及其他后代元素。

在使用后代选择器时，父标签名和后代标签名必须用空格隔开，这样才能识别是某个标签内部的后代元素。

我们来举个例子！😉

新建一个 index5.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #paragraph p {
        color: lightskyblue;
      }
    </style>
  </head>
  <body>
    <div id="paragraph">
      <p>这是一个段落</p>
    </div>
  </body>
</html>

点击预览页面，实验效果如下：

在上面代码中，使用 #paragraph p 可以获取到 class 名为 paragraph 的 div 元素中的子元素 p 标签，我们给该标签中的文字内容设置了字体颜色。

 

群组选择器

群组选择器是用于同时对几个选择器进行相同的样式设置。

在使用群组选择器时，两个选择器之间必须要用英文逗号隔开。

新建一个 index6.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div,
      span {
        color: lightskyblue;
      }
    </style>
  </head>
  <body>
    <div>段落一</div>
    <span>段落二</span>
  </body>
</html>

点击预览页面，实验效果如下：

在上面代码中，使用 div,span 给 div 标签和 span 标签设置了相同的字体颜色。

2.2.背景样式

背景样式属性用于定义 HTML 元素的背景色、背景图片，同时还可以进行背景定位、背景图片重复、背景图片固定。

在本节实验中会学到以下几种背景属性：

  • background-color
  • background-image
  • background-size
  • background-position
  • background-repeat

background-color 属性可以给指定标签元素设置背景色。

background-image 属性可以把图像插入背景。

background-size 属性可以给背景图设置大小。

通过 background-position 属性，可以改变图像在背景中的位置。

background-repeat 属性是用来设置背景图像是否平铺。

下表列出了 background-repeat 属性的一些可取值以及每个可取值的含义。

可 取 值描 述
repeat背景图像将在垂直方向和水平方向重复（默认值）
repeat-x背景图像将在水平方向重复
repeat-y背景图像将在垂直方向重复
no-repeat背景图像将仅显示一次

我们规定应该从父元素继承 background-repeat 属性的设置。

2.3.文本属性

文本属性用于定义文本的样式，通过文本属性，可以改变文本的颜色、字间距、对齐方式、文本修饰和文本缩进等。常用文本属性如下表所示：

属 性可 取 值描 述
line-heightnormal、number、length、%设置行高
text-indentlength、%设置文本缩进
text-alignleft、right、center、justify、start、end设置对齐方式
letter-spacingnormal、length设置字符间距
text-decorationline、color、style、thickness设置文本修饰
white-spacenormal、pre、nowrap、pre-wrap、pre-line、break-spaces规定如何处理空白
line-breakauto、loose、normal、strict、anywhere、unset处理如何断开带有标点符号的文本的行

这里只给大家介绍两个最常用的文本属性 line-height 和 text-decoration。

line-height 的使用

line-height 用于设置多行元素的空间量，可取值具体说明如下：

  • normal：取决于用户端。
  • number：数字乘以元素的字体大小。
  • length：指定长度用于计算高度。
  • %：计算值是给定的百分比值乘以元素计算出的字体大小。

text-decoration 的使用

text-decoration 属性用于设置文本的装饰线，例如给文本加下划线、中划线、波浪线等。可取值具体说明如下：

  • text-decoration-line 设置线的位置，可取值包含：underline（下划线）、overline（上划线）、line-through（中划线）。
  • text-decoration-color 设置线的颜色。
  • text-decoration-style 设置线的样式，可取值包含：wavy（波浪线）、solid（实线）、dashed（虚线）。
  • text-decoration-thickness 设置线的粗细。

2.4.字体属性

字体属性用于定义字体的类型、字号大小、加粗、斜体等方面样式。常用的字体属性如下表所示：

属 性可 取 值描 述
fontfont-style、font-variant、font-weight、font-size（或 line-height）、font-family在一个声明中设置所有的字体属性
font-family字体名称、inherit设置字体类型
font-sizexx-small、x-small、small、medium（默认）、large、x-large、xx-large smaller、larger length、%、inherit设置字体大小
font-weightnormal（默认）、bold、bolder、lighter、inherit 100、200…900（400=normal，700=bold）设置字体粗细
font-stylenormal、italic、oblique、inherit设置字体风格

2.5.链接中的伪类

何为伪类呢？🤔

在 CSS 中，伪类是添加到选择器的关键字，给指定元素设置一些特殊状态，我们以 : 开头。

链接有以下四个状态。这四种状态也称之为超链接的伪类。

状态效果
a:link普通的、未被访问的链接。
a:hover鼠标指针位于链接的上方。
a:active链接被单击的时刻。
a:visited用户已访问的链接。

针对超链接的上述四种状态设置样式规则，能起到美化超链接的作用。例如，为了完成下对超链接的显示要求，编写的 CSS 样式代码如下。

状 态颜 色背 景 色文 本 修 饰
未访问蓝色无无下画线
鼠标移到黑色#DDDDDD下画线
正单击红色#AAAAAA删除线
已访问绿色无无下画线

对于超链接的伪类，我们推荐的使用顺序是：:link - :visited - :hover - :active。

我们来举个例子吧！😉

新建一个 index14.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        text-decoration: none;
      }
      a:link {
        color: red;
      }
      a:visited {
        color: blue;
      }
      a:hover {
        color: green;
      }
      a:active {
        color: yellow;
      }
    </style>
  </head>
  <body>
    <a href="#">这是一个链接</a>
  </body>
</html>

开启 8080 端口，打开 Web 服务，效果如下：

同学们可能很疑惑，我们为什么要按照这样的顺序来使用呢？🤔 我们调整一下这几个伪类的顺序，看看会发生什么。

我们把 a:link 放到最后，效果如下。

从图中我们可以发现其中的样式属性都被覆盖了。

我们把 a:hover 放到 a:active 之后，效果如下。

从图中我们可以发现 a:active 的属性样式被覆盖了。

通过上面的例子我们可以知道链接伪类的使用顺序是很重要的。

2.6.列表样式

属 性可 取 值描 述
list-stylelist-style-type、list-style-position、list-style-image在一个声明中设置所有的列表属性
list-style-imageURL、none设置图像为列表项标志
list-style-positioninside、outside、inherit设置列表中列表项标志的位置
list-style-typedisc（默认）、circle、square、decimal 等设置列表项标志的类型

我们来举个例子吧！😉

使用以下命令获取需要的 gif 动图。

wget https://labfile.oss.aliyuncs.com/courses/2841/list.gif

新建一个 index15.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      ul {
        list-style-position: inside;
        list-style-image: url(list.gif);
      }
    </style>
  </head>
  <body>
    <ul>
      <li>喵</li>
    </ul>
  </body>
</html>

点击预览页面，实验效果如下：

3.盒子模型

盒子模型就是用来装 HTML 元素的盒子，它用于描述一个装有 HTML 元素的矩形盒子。该模型包括边框（border）、内边距（padding）、内容（content）、外边距（margin）、宽和高等属性，下图显示了盒模型的结构。

各部分的功能如下表：

区域功能
内容区内容区在模型的中心包含了盒子内的信息也就是 HTML 元素。这些元素可以是文本、图片等。
内边距内边距是内容区和边框之间的空间，可以被看作是内容区的背景区域。
边框边框用于标识盒子的边界，介于内边距和外边距之间。
外边距外边距位于边框外部，是边框与周围之间的空间。

知识点

  • padding
  • margin
  • border

3.1.border 属性

border 属性用于设置元素的边框属性，其用法如下所示：

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

属性值说明如下：

  • border-width：是边框宽度，宽度一般用数值即可。
  • border-style：是边框线的样式，一般有 solid（实线）、dotted（圆点）、dashed（虚线）、double（双横线）。
  • border-color：是边框线的颜色。

border、border-width、border-style、border-color 都是复合属性，我们也可以单独设置某条边框的样式。

例如，border-color 可以写成：

border-top-color: 上边框颜色;
border-right-color: 右边框颜色;
border-bottom-color: 下边框颜色;
border-left-color: 左边框颜色;

 

 

3.2.padding 属性

padding 属性是一个复合属性，代表我们盒子模型中的填充，也就是内容区域外部的空白区域。

其使用格式如下所示：

padding: 上右下左;

padding-top: 顶部填充值;
padding-left: 左边填充值;
padding-right: 右边填充值;
padding-bottom: 底部填充值;

3.3.margin 属性

margin 属性是用来设置元素的外边距的。

其使用格式如下：

margin: 上边距 右边距 下边距 左边距;

也可以省略写。

当左右边距值相同时，写法如下：

margin: 上边距 左右边距 下边距;

当上下边距值相同，左右边距值相同时，写法如下：

margin: 上下边距 左右边距;

当上下左右边距值均相同时，写法如下：

margin: 属性值;

 4.display属性

display 属性可以用来设置元素在页面上的排列方式，也可用来隐藏元素。

display 属性值的说明如下表所示。

属性值说明
block元素以块级方式展示。
inline元素以内联方式展示。
inline-block元素以内联块的方式展示。
none隐藏元素。

4.1.block 属性值

block 属性值可以让行内元素以块级元素的方式显示在页面上。

其使用格式如下：

display: block;

还记得前面学过的行内元素的概念吗？😜 行内元素就是可以和其他元素同处一行的元素，例如 span 标签元素。

举个例子～ 👻

新建一个 index.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      span {
        display: block;
      }
    </style>
  </head>
  <body>
    <span>蓝桥</span><span>云课</span>
  </body>
</html>

点击预览，效果如下：

可以看到，原本 span 标签是行内元素，却因为设置 display: block; 导致「蓝桥」与「云课」分开了。

 

 4.2.inline 属性值

inline 属性值可以让像 div 这样的霸道块，接纳其他元素来自己的地盘。

其使用格式如下：

display: inline;

举个例子～ 👻

新建一个 index1.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        display: inline;
      }
    </style>
  </head>
  <body>
    <div>蓝桥</div>
    <div>云课</div>
  </body>
</html>

看，原本霸道的大块头，也被 display 属性给治服了，「蓝桥」与「云课」又在一起了。

4.3.inline-block 属性值

我们的块内元素和行内元素有其独特的优势，在某些情况下，我们想让一个元素既具有块内元素的特点，又具备行内元素的特点。这就要请出 inline-block 属性值来施展这个魔法了。

其使用格式如下：

display: inline-block;

那么到底在哪些情况下可以用到这个属性呢？

比如，我们用 a 标签来实现导航的时候，a 标签虽然可以让元素在一行显示，但若我们想给每个 a 标签加上高和宽时发现没有任何效果。这时候用上 display: inline-block，它就具备块的特性了。

我们来看个例子～ 👻

新建一个 index2.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      a {
        text-decoration: none;
        background-color: rgb(95, 118, 160);
        display: inline-block;
        width: 70px;
        height: 30px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <a href="#">首页</a>
    <a href="#">分类</a>
    <a href="#">展示</a>
    <a href="#">更多</a>
  </body>
</html>

点击预览，效果如下：

4.4.none 属性值

none 属性值可以用来隐藏页面上的元素。

使用格式如下：

display: none;

举个例子～ 💪

新建一个 index3.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        display: none;
      }
    </style>
  </head>
  <body>
    <div>哈哈，看不见我🤫</div>
  </body>
</html>

点击预览，可以发现页面上空空的。

5.浮动与定位

知识点

  • float
  • position

5.1.浮动

我们使用 float 属性指定元素沿其容器的左侧或右侧放置，浮动布局常见取值如下：

  • left（左浮动）
  • right（右浮动）

5.2.定位

我们使用 position 属性来对元素的位置进行控制，定位布局可以分为以下四种：

  • 静态定位（inherit）
  • 相对定位（relative）相对定位是该元素的位置相对于它原始的位置来计算的。
  • 绝对定位（absolute）绝对定位，能把元素精确地放在任意位置。
  • 固定定位（fixed）fixed 属性值用于固定定位，被固定的元素不会随着滚动条的拖动而改变位置。

6.CSS3新特性

  • CSS3 新增选择器
  • 文本阴影
  • 文本溢出
  • 圆角边框
  • 盒子阴影
  • 背景属性
  • 渐变属性
  • 元素转换
  • 过渡属性
  • 动画

6.1.CSS3 新增选择器

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

6.1.1.新增属性选择器

属性选择器就是通过正则的方式去匹配指定属性的元素，为其设置样式。

在 CSS3 中新增了三种属性选择器，如下所示：

选择器描述
E[attr^=“xx”]选择元素 E，其中 E 元素的 attr 属性是以 xx 开头的任何字符。
E[attr$=“xx”]选择元素 E，其中 E 元素的 attr 属性是以 xx 结尾的任何字符。
E[attr*=“xx”]选择元素 E，其中 E 元素的 attr 属性是包含 xx 的任何字符。

我们来举个例子吧！😉

新建一个 index.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      a[href^="#"] {
        color: rgb(179, 255, 0);
      }
      a[href$="org"] {
        color: rgb(195, 0, 255);
      }
      a[href*="un"] {
        background-color: rgb(0, 255, 149);
        color: white;
      }
    </style>
  </head>
  <body>
    <ul>
      <li><a href="#">本地链接</a></li>
      <li><a href="https://www.lanqiao.cn">蓝桥云课</a></li>
      <li><a href="https://developer.mozilla.org">MDN</a></li>
      <li><a href="https://unsplash.com">Unsplash</a></li>
    </ul>
  </body>
</html>

预览页面，效果如下：

  • 在上面代码中，我们使用 a[href^="#"] 去匹配 a 标签中 href 属性值以 # 开头的元素。
  • 使用 a[href$="org"] 去匹配 a 标签中 href 属性值以 org 结尾的元素。
  • 使用 a[href*="un"] 去匹配 a 标签中 href 属性值包含 un 的元素。

6.1.2.子元素伪类选择器

子元素伪类选择器就是选择某元素的子元素的一种选择器。

在 CSS3 中，有以下几种子元素伪类选择器：

选择器描述
E:first-child选择元素 E 的第一个子元素。
E:last-child选择元素 E 的最后一个子元素。
E:nth-child(n)选择元素 E 的第 n 个子元素，n 有三种取值，数字、odd 和 even。注意第一个子元素的下标是 1。
E:only-child选择元素 E 下唯一的子元素。
E:first-of-type选择父元素下第一个 E 类型的子元素。
E:last-of-type选择父元素下最后一个 E 类型的子元素。
E:nth-of-type(n)选择父元素下第 n 个 E 类型的子元素，n 有三种取值，数字、odd 和 even。
E:only-of-type选择父元素唯一的 E 类型的子元素。
E:nth-last-child(n)选择所有 E 元素倒数的第 n 个子元素。
E:nth-last-of-type(n)选择所有 E 元素倒数的第 n 个为 E 的子元素。

6.1.3.UI 伪类选择器

UI 伪类选择器是通过元素的状态来选择的一种选择器。

在 CSS3 中有以下几种 UI 伪类选择器。

选择器描述
:focus给获取焦点的元素设置样式。
::selection给页面中被选中的文本内容设置样式。
:checked给被选中的单选框或者复选框设置样式。
:enabled给可用的表单设置样式。
:disabled给不可用的表单设置样式。
:read-only给只读表单设置样式。
:read-write给可读写的表单元素设置样式。
:valid验证有效。
:invalid验证无效。

属性有效性验证

页面上有一个邮箱输入框，当你的输入满足邮箱格式时，输入框的背景颜色为绿色；当你的输入不满足要求，背景颜色为红色。

新建一个 index2.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /*格式错误*/
      input:invalid {
        background-color: red;
      }
      /*格式正确*/
      input:valid {
        background-color: green;
      }
    </style>
  </head>
  <body>
    电子邮箱：<input type="email" />
  </body>
</html>

预览页面，效果如下：

获得焦点验证

页面上有一个姓名输入框和一个密码输入框，当聚焦输入框时，输入框的背景颜色会发生改变，

新建一个 index3.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      input:focus {
        background-color: rgb(255, 153, 0);
      }
    </style>
  </head>
  <body>
    姓名：<input type="text" /><br />
    密码：<input type="password" />
  </body>
</html>

预览页面，效果如下：

 

6.2.文本阴影

某些时候我们想让字体看起来更立体，更具艺术性，让人眼前一亮，可以给文字使用文本阴影属性。

在 CSS3 中，我们使用 text-shadow 属性来给文本内容添加阴影的效果。

文本阴影的语法格式如下：

text-shadow: x-offset y-offset blur color;

  • x-offset 是沿 x 轴方向的偏移距离，允许负值，必须参数。
  • y-offset 是沿 y 轴方向的偏移距离，允许负值，必须参数。
  • blur 是阴影的模糊程度，可选参数。
  • color 是阴影的颜色，可选参数。

我们来举个例子吧！

新建一个 index4.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        font-size: 50px;
        color: rgb(0, 153, 255);
        text-shadow: 4px 4px 3px rgb(0, 255, 179);
      }
    </style>
  </head>
  <body>
    <div>蓝桥云课</div>
  </body>
</html>

预览页面，效果如下：

  • 页面上有个包含「蓝桥云课」文字内容的 div 标签，我们使用 font-size 属性设置字体大小为 50px。
  • 使用 color 属性设置字体颜色。
  • 使用 text-shadow 属性添加文本阴影效果。

6.3.文本溢出

text-overflow 属性可以设置超长文本省略显示，其语法如下所示：

text-overflow: clip|ellipsis;

其属性值的含义如下所示：

属性值描述
clip修剪文本。
ellipsis显示省略符号来代表被修剪的文本。

举个例子～ 👻

新建一个 index5.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      p {
        border: 1px solid blue;
        width: 100px;
        height: 50px;
        overflow: hidden; /*隐藏超出文本*/
        white-space: nowrap; /*强制单行显示*/
      }
      .poem1 {
        text-overflow: clip;
      }
      .poem2 {
        text-overflow: ellipsis;
      }
    </style>
  </head>
  <body>
    <p class="poem1">木落雁南度，北风江上寒。我家襄水曲，遥隔楚云端。</p>
    <p class="poem2">乡泪客中尽，孤帆天际看。迷津欲有问，平海夕漫漫。</p>
  </body>
</html>

预览页面，效果如下：

  • 在代码中，我们在 p 标签里分别放了一段诗，使用标签选择器给两个 p 标签定义了相同的样式。
  • 使用 text-overflow: clip 给 class=poem1 的 p 标签设置文本溢出时，修剪溢出的文本。
  • 使用 text-overflow: ellipsis 给 class=poem2 的 p 标签设置用省略号代替溢出的文本。

6.4.圆角边框

在 CSS3 中，使用 border-radius 属性来设置圆角边框。

border-radius 属性的值表示圆角的直径，可以设置四个值，其值的顺序为：左上角，右上角，右下角，左下角。

其语法格式为：

border-radius: 取值;

我们也可以分开设置四个角的属性值，语法如下所示：

border-top-left-radius: 取值;
border-top-right-radius: 取值;
border-bottom-right-radius: 取值;
border-bottom-left-radius: 取值;

6.5.盒子阴影

box-shadow 属性可以用来设置一个或多个下拉阴影的框，视觉效果就像是盒子有了阴影一样。

其语法格式为：

box-shadow: h-shadow v-shadow blur spread color inset;

其属性值的意义如下所示：

值说明
h-shadow必选，水平阴影的位置，允许负值。
v-shadow必选，垂直阴影的位置，允许负值。
blur可选，模糊距离。
spread可选，阴影的大小。
color可选，阴影的颜色。
inset可选，将外部阴影改为内部阴影。

举个例子来看看吧～ 😉

新建一个 index7.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 200px;
        height: 100px;
        text-align: center;
        background-color: green;
        box-shadow: 10px 10px 5px #26ad8c;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

预览页面，效果如下：

6.6.背景图像尺寸

background-size 属性可以用来控制背景图像的显示大小。语法如下：

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

值描述
length设置背景图片高度和宽度。第一个值设置宽度，第二个值设置高度。如果只给出一个值，第二个是设置为 auto（自动）。
percentage将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置高度。如果只给出一个值，第二个是设置为"auto（自动）" 。
cover此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

 

6.7.多图背景

在 CSS3 中，background-image 属性的属性值可以包含多个图片的地址。语法如下：

/*图片地址*/
background-image: url(), url(), ..., url();

若想让图片放在我们想要的位置，可以使用 background-position 属性设置图片显示的位置。语法如下：

/*图片显示的位置*/
background-position: position1, position2, ..., positionN;

若想要设置图片是否重复显示在页面上，我们可以添加 background-repeat 属性。语法如下：

/*图片是否重复*/
background-repeat: repeat1, repeat2, ..., repeatN;

举个例子来看看吧～ 😉

使用以下命令获取所需的图片。

wget https://labfile.oss.aliyuncs.com/courses/3429/icons8-rat-96.png

wget https://labfile.oss.aliyuncs.com/courses/3429/nemuel.jpg

新建一个 index10.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #content1 {
        /*小图片来自 icons*/
        background-image: url("icons8-rat-96.png"), url("nemuel.jpg");
        background-position: right bottom, left top; /*相对于父元素大小，老鼠图片右下角显示，大背景图片在左上角显示*/
        background-repeat: no-repeat, no-repeat; /*两张图片不重复*/
        padding: 15px;
        width: 400px;
        height: 260px;
      }
    </style>
  </head>
  <body>
    <div id="content1"></div>
  </body>
</html>

点击预览页面，效果如下：

 

6.8.渐变属性

有时候我们会看到一些好看的渐变色，在 CSS3 中也为我们提供了渐变色属性，用来设置背景的渐变色。有两种不同的渐变方式：

  • 线性渐变
  • 径向渐变

 

6.8.1.线性渐变

线性渐变是向下、向上、向左、向右、对角方向的颜色渐变。

其语法格式为：

background-image: linear-gradient(side-or-corner|angle, linear-color-stop);

参数说明如下：

  • side-or-corner 是描述渐变线的起始位置，它包含两个关键词：第一个指出水平位置 left or right，第二个指出垂直位置 top or bottom。
  • angle 是用角度值来指定渐变的方向。
  • linear-color-stop 是设置渐变的颜色值。

举个例子～ 😉

新建一个 index11.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #linear {
        display: flex;
      }
      /*从上到下线性渐变*/
      .gradient1 {
        width: 100px;
        height: 100px;
        background-image: linear-gradient(#ff577f, #c6c9ff);
      }
      /*从左到右线性渐变*/
      .gradient2 {
        margin-left: 10px;
        width: 100px;
        height: 100px;
        background-image: linear-gradient(to right, #ff9d72, #c6c9ff);
      }
      /*从左上角到右下角的渐变*/
      .gradient3 {
        margin-left: 10px;
        width: 100px;
        height: 100px;
        background-image: linear-gradient(to bottom right, #8ad7c1, #c6c9ff);
      }
      /*定义角度的渐变*/
      .gradient4 {
        margin-left: 10px;
        width: 100px;
        height: 100px;
        background-image: linear-gradient(50deg, #bc6ff1, #ffd5cd);
      }
    </style>
  </head>
  <body>
    <div id="linear">
      <div class="gradient1"></div>
      <div class="gradient2"></div>
      <div class="gradient3"></div>
      <div class="gradient4"></div>
    </div>
  </body>
</html>

点击预览页面，实验效果如下：

 

重复性线性渐变

重复性线性渐变是用重复的线性渐变组成的 <image>，它与线性渐变的区别在于，它会在所有方向上重复渐变来覆盖整个元素。

其语法格式为：

background-image: repeating-linear-gradient(side-or-corner|angle, color-stop);

参数说明如下：

  • side-or-corner 是描述渐变线的起始位置，它包含 to 和两个关键词：第一个指出水平位置 left or right，第二个指出垂直位置 top or bottom。
  • angle 是用角度值来指定渐变的方向。
  • color-stop 是由一个 <color> 组成，并且跟随一个可选的终点位置。

我们来举个例子吧～

新建一个 index12.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 200px;
        height: 200px;
        display: inline-block;
        margin-left: 20px;
        margin-top: 20px;
      }
      .item1 {
        background-image: repeating-linear-gradient(
          45deg,
          #8843f8 0%,
          #ef2f88 5%,
          #f47340 10%,
          #f9d371 15%
        );
      }
      .item2 {
        background-image: repeating-linear-gradient(
          to left top,
          #8843f8 0%,
          #ef2f88 5%,
          #f47340 10%,
          #f9d371 15%
        );
      }
    </style>
  </head>
  <body>
    <div class="item1"></div>
    <div class="item2"></div>
  </body>
</html>

点击预览页面，实验效果如下：

 6.8.2.径向渐变

径向渐变是由元素中间定义的渐变。

其语法格式为：

background-image: radial-gradient(shape, color-stop);

参数说明如下：

  • shape 设置渐变的形状，其取值有 circle（圆形） 和 ellipse（椭圆）。
  • color-stop 设置某个确定位置的颜色值。

举个例子～ 😉

新建一个 index13.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #radial {
        display: flex;
      }
      /*均匀分布径向渐变*/
      .gradient1 {
        width: 100px;
        height: 100px;
        background-image: radial-gradient(#ff577f, #c6c9ff, #8ad7c1);
      }
      /*不均匀渐变*/
      .gradient2 {
        margin-left: 10px;
        width: 100px;
        height: 100px;
        background-image: radial-gradient(#8bcdcd 5%, #ff9d72, #c6c9ff);
      }
      /*椭圆形渐变*/
      .gradient3 {
        margin-left: 10px;
        width: 100px;
        height: 100px;
        background-image: radial-gradient(ellipse, #8ad7c1, #c6c9ff, #fce2ce);
      }
      /*圆形渐变*/
      .gradient4 {
        margin-left: 10px;
        width: 100px;
        height: 100px;
        background-image: radial-gradient(circle, #bc6ff1, #ffd5cd, #b6eb7a);
      }
    </style>
  </head>
  <body>
    <div id="radial">
      <div class="gradient1"></div>
      <div class="gradient2"></div>
      <div class="gradient3"></div>
      <div class="gradient4"></div>
    </div>
  </body>
</html>

点击预览页面，实验效果如下：

重复性径向渐变的使用

重复性径向渐变是用重复性的径向渐变组成的图像。它与径向渐变的区别在于，它会从原点开始重复径向渐变来覆盖整个元素。

其语法格式为：

background: repeating-radial-gradient(extent-keyword, color-stop);

参数说明如下：

  • extent-keyword 是描述边缘轮廓的具体位置，关键字常量如下所示：

  • color-stop 是某个确定位置的固定颜色值。

下面，我们来举个例子吧～

新建一个 index14.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 200px;
        height: 200px;
        display: inline-block;
        margin-left: 20px;
        margin-top: 20px;
      }
      .gradient1 {
        background: repeating-radial-gradient(
          closest-corner,
          #8843f8 0%,
          #ef2f88 5%,
          #f47340 10%,
          #f9d371 15%
        );
      }
      .gradient2 {
        background: repeating-radial-gradient(
          farthest-side,
          #8843f8,
          #ef2f88,
          #f47340,
          #f9d371
        );
      }
    </style>
  </head>
  <body>
    <div class="gradient1"></div>
    <div class="gradient2"></div>
  </body>
</html>

点击预览页面，实验效果如下：

6.9.元素转换

transform 是元素转换属性，其属性值为转换函数，使用该属性可以让元素向指定方向移动、缩放大小、旋转等变化。

在我们的实验中，会学到以下三种转换函数：

  • 旋转函数（rotate）
  • 移动函数（translate）
  • 缩放函数（scale）

6.9.1.旋转函数

在 CSS3 中，使用 rotate 函数能够让指定的元素对象绕原点旋转，主要在二维空间内进行操作。

其语法格式如下所示：

transform: rotate(角度); /*元素按照指定角度旋转*/

 

这里的角度可以是正值也可以是负值。正负值意味着什么呢？🤔

同学们可能已经猜到了，正负值意味着不同的旋转方向，规定参数为正时，顺时针旋转；参数为负时，逆时针旋转。

举个例子～ 😉

新建一个 index15.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 50px;
        height: 50px;
        margin: 20px;
        display: inline-block;
        background-color: chartreuse;
      }
      /*向右旋转 60 度*/
      .c1 {
        background-color: #ffe6e6;
        transform: rotate(60deg);
      }
      /*向左旋转 60 度*/
      .c2 {
        background-color: #a7c5eb;
        transform: rotate(-60deg);
      }
    </style>
  </head>
  <body>
    <div class="c1"></div>
    <div></div>
    <div class="c2"></div>
  </body>
</html>

点击预览页面，实验效果如下：

rotateX 和 rotateY 的使用

除了使用 rotate 函数绕原点来旋转指定元素外，我们还可以围绕指定轴来旋转元素。

rotateX 函数可以让指定元素围绕横坐标（X 轴）旋转。其使用格式如下所示：

transform: rotateX(角度);

rotateY 函数可以让指定元素围绕纵坐标（Y 轴）旋转。其使用格式如下所示：

transform: rotateY(角度);

接下来我们举个例子吧！👻

新建一个 index16.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .c1 {
        transform: rotateX(70deg);
      }
      .c2 {
        transform: rotateX(180deg);
      }
      .c3 {
        transform: rotateY(45deg);
      }
      .c4 {
        transform: rotateY(180deg);
      }
    </style>
  </head>
  <body>
    <div>
      <img
        src="https://labfile.oss.aliyuncs.com/courses/3773/icons8-animal-64.png"
      />
      <img
        src="https://labfile.oss.aliyuncs.com/courses/3773/icons8-animal-64.png"
        class="c1"
      />
      <img
        src="https://labfile.oss.aliyuncs.com/courses/3773/icons8-animal-64.png"
        class="c2"
      />
    </div>
    <div>
      <img
        src="https://labfile.oss.aliyuncs.com/courses/3773/icons8-animal-85.png"
      />
      <img
        src="https://labfile.oss.aliyuncs.com/courses/3773/icons8-animal-85.png"
        class="c3"
      />
      <img
        src="https://labfile.oss.aliyuncs.com/courses/3773/icons8-animal-85.png"
        class="c4"
      />
    </div>
  </body>
</html>

点击预览页面，实验效果如下：

同学们对上面的结果可能很疑惑，想象不出具体是怎么旋转的，下面我用动图来给大家展示一下旋转过程。

沿 X 轴旋转 180deg 的过程如下所示：

沿 Y 轴旋转 180deg 的过程如下所示：

6.9.2.移动函数

translate() 函数能够重新定位元素坐标，该函数包含两个参数值，分别用来定位 X 轴和 Y 轴的新坐标。

其语法格式为：

transform: translate(移动值); /*元素按照指定值沿着 X 轴和 Y 轴移动*/
transform: translateX(移动值); /*元素按照指定值沿着 X 轴移动*/
transform: translateY(移动值); /*元素按照指定值沿着 Y 轴移动*/

6.9.3.缩放函数

scale() 函数能够缩放元素大小，该函数包含两个参数，分别用来定义宽和高的缩放比例。

其语法格式为：

transform: scale(缩放值); /*元素按照指定值沿着 X 轴和 Y 轴缩放*/
transform: scaleX(缩放值); /*元素按照指定值沿着 X 轴缩放*/
transform: scaleY(缩放值); /*元素按照指定值沿着 Y 轴缩放*/

 6.10.过渡

CSS3 过渡是元素从一种样式逐渐过渡到另一种样式。

其语法如下所示：

transition: 指定属性 持续时间 速度曲线 开始时间;

它是一个复合属性，我们也可以如下分开使用这几个属性。

transition-property: 属性值; /*指定属性名*/
transition-duration: 属性值; /*完成过渡这一过程的时间*/
transition-timing-function: 属性值; /*速度曲线*/
transition-delay: 属性值; /*过渡的开始时间*/

举个例子～ 😉

新建一个 index19.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        margin-top: 40px;
        margin-left: 40px;
        width: 50px;
        height: 50px;
        background-color: #51adcf;
        /*ease-in-out 慢速开始慢速结束*/
        transition: transform 1s ease-in-out;
      }
      div:nth-child(2) {
        transform: rotate(-60deg);
      }
      div:hover {
        transform: scale(2);
      }
    </style>
  </head>
  <body>
    <div></div>
    <div></div>
  </body>
</html>

点击预览页面，实验效果如下：

代码说明如下：

  • 在 div:hover 中，使用 transform: scale(2) 设置当鼠标放在 div 元素上时，元素会放大 1 倍。
  • 在 div:nth-child(2) 中，使用 div:nth-child(2) 设置第二个元素逆时针旋转 60deg。
  • 使用 transition 属性实现过渡的效果，其中 ease-in-out 是 transition-timing-function 属性的属性值。

接下来给大家介绍一下 transition-timing-function 属性的取值吧！

transition-timing-function 属性

transition-timing-function 属性用来设置过渡效果从开始到结束的时间曲线，它有很多可用属性值，常用属性值如下表所示。

属性值说明
ease规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
linear规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,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)）。
steps(int,start 或者 end)steps() 有两个参数，第一个为步长，其值必须为整数，第二个值为可选值，它有两个取值，分别是 start 和 end。
step-start相当于 steps(1, start)。
step-end相当于 steps(1, end)。
cubic-bezier(n,n,n,n)规定在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
initial规定使用默认值。
inherit规定从父元素继承该属性值。

transition-timing-function 属性有这么多的属性值，我们用 steps 来练习一下吧～ 🤪

新建一个 index20.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 50px;
        height: 50px;
        margin: 50px;
        background-color: cornflowerblue;
        transition: transform 4s steps(4);
      }
      div:hover {
        transform: scale(2);
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

点击预览页面，实验效果如下：

在上面代码中，用 steps 的方式将 div 元素分成四步，使元素的面积逐渐变成原来的 2 倍，当鼠标从元素上移开，又会以四步的形式将元素还原成原有的大小。

   

6.11.动画

@keyframes 被称为关键帧，它能够设置一些元素的样式，让该元素可以从原来的样式渐渐过渡到新的样式中。其语法格式如下所示：

@keyframes 动画名
{
    0% {样式属性：属性值;}
    25% {样式属性：属性值;}
    50% {样式属性：属性值;}
    100% {样式属性：属性值;}
}

这里的百分比是用来规定动画发生变化的时间的，0% 代表动画的开始，100% 代表动画的结束，中间的可以自定义。

将 @keyframes 创建的动画绑定到选择器上，通过 animation 属性就能实现动画效果了，其语法格式为：

animation: 动画名 完成动画的周期 是否重复;

animation 属性是一个复合属性，它的子属性如下所示。

属性描述
animation-name规定 @keyframes 动画的名称。
animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function规定动画的速度曲线。默认是 "ease"。
animation-fill-mode规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-delay规定动画何时开始。默认是 0。
animation-iteration-count规定动画被播放的次数。默认是 1。
animation-direction规定动画是否在下一周期逆向地播放。默认是 "normal"。

举个例子～ 😉

新建一个 index21.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .circle {
        width: 60px;
        height: 60px;
        border-radius: 100%;
        background-color: #ffd8a6;
        animation-name: action;
        animation-duration: 9s;
        animation-iteration-count: 10;
      }
      @keyframes action {
        0% {
          margin-left: 400px;
        }
        25% {
          background-color: #dd7631;
        }
        50% {
          border-radius: 10%;
        }
        100% {
          margin: 100px;
        }
      }
    </style>
  </head>
  <body>
    <div class="circle"></div>
  </body>
</html>

点击预览页面，实验效果如下：

7.弹性盒子

知识点

  • flex-direction
  • flex-wrap
  • align-items
  • align-content
  • flex-direction 属性，它指定了弹性子元素在父容器中的排列方向和顺序。
  • flex-wrap 属性，它指定了弹性盒子的子元素换行方式。
  • align-items 属性，它设置或检索弹性盒子元素在轴上对齐方式。
  • align-content 属性，它是用于控制多行的对齐方式。

flext

在 CSS3 中给 display 属性增加了新的属性值 flex，如果一个元素被设置 display:flex，说明该元素为弹性布局，也就是个弹性盒子。

flex 主要由两个轴来控制布局，如下图所示。

上图说明如下：

  • main axis 是主轴，该轴的开始为 main start，结束为 main end。
  • cross axis 是交叉轴，该轴的开始为 cross start，结束为 cross end。
  • flex item 是 flex 容器中的元素。

在这个弹性盒子中，提供了一些属性来操作这些元素，这里我会给大家介绍几种常见的属性。

接下来我们一一来学习吧～～

7.1.flex-direction 属性

flex-direction 属性指定了弹性子元素在父容器中的排列方向和顺序。

其语法格式为：

flex-direction: row | row-reverse | column | column-reverse;

其属性值的意义如下所示：

属性值描述
row横向从左到右排列（左对齐），默认的排列方式。
row-reverse反转横向排列（右对齐），从后往前排，最后一项排在最前面。
column纵向排列
column-reverse反转纵向排列，从后往前排，最后一项排在最上面。

举个例子～ 😉

新建一个 index.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .content1 {
        width: 200px;
        height: 200px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-direction: row; /*默认值，行对齐，主轴起点与终点相同*/
      }
      .content2 {
        width: 200px;
        height: 200px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-direction: row-reverse; /*行对齐，主轴起点与终点相反*/
      }
      .content3 {
        width: 200px;
        height: 200px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-direction: column; /*列对齐，主轴起点与终点相同*/
      }
      .content4 {
        width: 200px;
        height: 200px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-direction: column-reverse; /*列对齐，主轴起点与终点相反*/
      }
      .box {
        width: 50px;
        height: 50px;
        color: black;
      }
    </style>
  </head>
  <body>
    <div class="content1">
      <div class="box" style="background-color:#FFE5B9;">A</div>
      <div class="box" style="background-color:#EFF8FF;">B</div>
      <div class="box" style="background-color:#C9CBFF;">C</div>
    </div>
    <div class="content2">
      <div class="box" style="background-color:#FFE5B9;">A</div>
      <div class="box" style="background-color:#EFF8FF;">B</div>
      <div class="box" style="background-color:#C9CBFF;">C</div>
    </div>
    <div class="content3">
      <div class="box" style="background-color:#FFE5B9;">A</div>
      <div class="box" style="background-color:#EFF8FF;">B</div>
      <div class="box" style="background-color:#C9CBFF;">C</div>
    </div>
    <div class="content4">
      <div class="box" style="background-color:#FFE5B9;">A</div>
      <div class="box" style="background-color:#EFF8FF;">B</div>
      <div class="box" style="background-color:#C9CBFF;">C</div>
    </div>
  </body>
</html>

点击预览页面，效果如下。

 

 7.2. flex-wrap 属性

flex-wrap 属性用于指定弹性盒子的子元素换行方式。

其语法格式为：

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

 

其属性值的意义如下所示：

属性值描述
nowrap默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。
wrap弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行。
wrap-reverse反转 wrap 排列。

举个例子～ 😉

新建一个 index1.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        color: black;
      }

      #content {
        width: 240px;
        height: 300px;
        background-color: white;
        display: flex;
        flex-wrap: wrap-reverse;
      }
      .item1 {
        background-color: #ffe5b9;
      }
      .item2 {
        background-color: #eff8ff;
      }
      .item3 {
        background-color: #c9cbff;
      }
    </style>
  </head>
  <body>
    <div id="content">
      <div class="item1">1</div>
      <div class="item2">2</div>
      <div class="item3">3</div>
    </div>
  </body>
</html>

点击预览页面，查看效果如下：

7.3.align-items 属性

align-items 属性是用来设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

其语法格式为：

align-items: flex-start | flex-end | center | baseline | stretch;

其属性值的意义如下所示：

属性值描述
flex-start弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center弹性盒子元素在该行的侧轴（纵轴）上居中放置。
baseline如弹性盒子元素的行内轴与侧轴为同一条，则该值与 flex-start 等效。其它情况下，该值将参与基线对齐。
stretch如果指定侧轴大小的属性值为 auto，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照 min/max-width/height 属性的限制。

举个例子～ 😉

新建一个 index2.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 100px;
        color: black;
      }

      #content {
        width: 240px;
        height: 300px;
        background-color: white;
        display: flex;
        align-items: stretch;
      }
      .item1 {
        background-color: #ffe5b9;
      }
      .item2 {
        background-color: #eff8ff;
      }
      .item3 {
        background-color: #c9cbff;
      }
    </style>
  </head>
  <body>
    <div id="content">
      <div class="item1">1</div>
      <div class="item2">2</div>
      <div class="item3">3</div>
    </div>
  </body>
</html>

点击预览页面，查看效果如下。

 

7.4.align-content 属性的使用

align-content 属性可以用于控制多行的对齐方式，如果只有一行则不会起作用。

其语法格式为：

align-content: flex-start | flex-end | center | space-between | space-around |
  stretch;

其属性值的意义为：

属性值描述
stretch默认。各行将会伸展以占用剩余的空间。
flex-start各行向弹性盒容器的起始位置堆叠。
flex-end各行向弹性盒容器的结束位置堆叠。
center各行向弹性盒容器的中间位置堆叠。
space-between各行在弹性盒容器中平均分布。
space-around各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。

举个例子～ 😉

新建一个 index3.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 60px;
        color: black;
      }
      #content {
        width: 300px;
        height: 300px;
        background-color: antiquewhite;
        display: flex;
        flex-wrap: wrap;
        align-content: stretch;
      }
      .left {
        background-color: gray;
      }
      .center {
        background-color: silver;
      }
      .right {
        background-color: darkgray;
      }
    </style>
  </head>
  <body>
    <div id="content">
      <div class="left">div1块</div>
      <div class="center">div2块</div>
      <div class="right">div3块</div>
      <div class="left">div4块</div>
      <div class="center">div5块</div>
      <div class="right">div6块</div>
      <div class="left">div7块</div>
      <div class="center">div8块</div>
      <div class="right">div9块</div>
      <div class="left">div10块</div>
      <div class="center">div11块</div>
      <div class="right">div12块</div>
    </div>
  </body>
</html>

点击预览，效果如下。

8.@media 媒体查询

8.1.@media 语法

@media 可以直接写在 CSS 样式中，或者可以针对不同的媒体设备，从外部链入不同的 stylesheets（外部样式表）。接下来，一起看下两种情况的使用语法：

1. 直接写在 CSS 样式中

定义语法如下：

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

一个完整的媒体查询由以下五部分组成：

  • 必须是以 @media 开头 。
  • 使用 mediatype 指定媒体（设备）类型 。
  • 使用 and | not | only 逻辑操作符构建复杂的媒体查询 。
  • 使用 media feature 指定媒体特性 。
  • CSS-Code 位置是要设置的 CSS 样式。

mediatype （媒体类型）取值范围如下：

值描述
all适用于所有设备
print用于打印机和打印预览
screen用于电脑屏幕，平板电脑，智能手机等
speech用于屏幕阅读器等发声设备

被废弃的媒体类型： CSS2.1 和 Media Queries 3 定义了一些额外的媒体类型( tty, tv, projection, handheld, braille, embossed, 以及 aural )，但是它们在 Media Queries 4 中已经被废弃，并且不应该被使用。aural 类型被替换为具有相似效果的 speech 。

逻辑操作符取值范围如下：

值描述
and用于将多个媒体查询规则组合成单条媒体查询，当每个查询规则都为真时则该条媒体查询为真
not用来排除某种设备
only用以指定某特定媒体设备

media feature （媒体特性）常用取值如下：

值描述
max-width定义输出设备中的页面最大可见区域宽度
max-height定义输出设备中的页面最大可见区域高度
min-width定义输出设备中的页面最小可见区域宽度
min-height定义输出设备中的页面最小可见区域高度
orientation视口（viewport）的旋转方向。portrait ：表示 viewport 处于纵向，即高度大于等于宽度 ； landscape ：表示 viewport 处于横向，即宽度大于高度

如果你还想了解更多完整 media feature 取值，请访问：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Media_Queries/Using_media_queries。

2. 针对不同的媒体设备，从外部链入不同的 stylesheets（外部样式表）

用 media 属性为 <link> 指定特定的媒体类型。定义语法如下：

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystyle.css">

其中，mediatype、逻辑操作符、media feature 的取值与第一种直接写在 CSS 样式中的取值相同，这里不再进行赘述。

二者区别在于，第一种写在 CSS 样式中是当条件成立后，执行 CSS Code , 第二种则是条件成立后，加载对应的外部样式表。

 

8.2.使用 @media 实现网页变色龙

学习了 @media 的语法后，一起动手操练一下，使用 @media 实现网页变色龙，让你的网页在不同的屏幕尺寸下显示不同的颜色。

首先，打开你们的线上环境，新建一个 index.html 文件，然后使用快捷键生成模版。

在 index.html 文件中写入以下内容：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      @media screen and (max-width: 500px) {
        body {
          background-color: red;
        }
      }
      @media screen and (min-width: 800px) {
        body {
          background-color: green;
        }
      }
      @media screen and (min-width: 1024px) {
        body {
          background-color: blue;
        }
      }
    </style>
  </head>
  <body></body>
</html>

上述代码做了如下操作：

  • 定义媒体查询规则，当设备类型为 screen 并且设备中的页面最大可见区域宽度为 500px 的时候，页面背景颜色为红色。
  • 定义媒体查询规则，当设备类型为 screen 并且设备中的页面最小可见区域宽度为 800px 的时候，页面背景颜色为绿色。
  • 定义媒体查询规则，当设备类型为 screen 并且设备中的页面最小可见区域宽度为 1024px 的时候，页面背景颜色为蓝色。

启动 8080 端口，打开 Web 服务，在浏览器中访问即可看到如下效果。

手动缩小浏览器宽度，当宽度大于 800px 且小于 1024px 时，页面显示绿色。

继续缩小浏览器宽度，当宽度小于 500px 时，页面显示红色。

波克比~
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS知识点总结
weixin_48494427的博客
03-16 2018
CSS知识点总结
HTML CSS 知识点总结
weixin_61000863的博客
06-23 855
html css基础知识总结
HTML和CSS知识点总结（包括H5和C3)
qq_42349528的博客
07-28 7257
HTML和CSS知识点总结 1.常用的HTML标签 标题标签 <h1></h1>~<h6></h6> 段落标签<p></p>和换行标签<br/> 文本格式化标签 加粗<strong></strong>和<b></b> 倾斜和<i></i> 删除线<del></del>和<s&gt
CSS基本知识点总结
qq_40046544的博客
07-29 9171
CSS指的是层叠样式表（CascadingStyleSheets）CSS描述了如何在屏幕、纸张或其他媒体上显示HTML元素CSS节省了大量工作。它可以同时控制多张网页布局。盒子的概念页面中的每一个标签都可以看做是一个盒子；通过盒子的视角，可以更方便的进行布局浏览器在渲染网页时会将网页中的元素看做是一个个的矩形区域，我们也形象称之为盒子盒子模型内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成。...
css知识点总结1
Yydsaoligei的博客
08-23 2537
css相关知识点 引入css样式的三种方式 选择器之基本选择器 选择器之组合选择器 选择器之属性选择器 css选择器之分组于嵌套 伪类选择器 伪元素选择器 css选择器优先级 css字体样式 css背景属性 css边框属性 css的display隐藏属性
保姆级教程 CSS 知识点梳理大全，超详细！！！
热门推荐
道阻且长，行则将至。
10-08 1万+
CSS入门，看这一篇就够了，超详细！！！ 一、前端三层 二、CSS的书写位置 (一)、内嵌式 内嵌式，顾名思义，内嵌在.html文件中 在<head></head>标签中，书写 <style></style>标签对，里面书写CSS语句。 (二)、外链式 可以将CSS单独存为.css文件，然后用link标签引入它 外链式的优点：多个HTML文件，可以共用一个CSS样式表文件 (三)、 导入式 导入式是最不常见的样式表导入方法,使用导
css知识点汇总(包括css思维导图，文章最后)
weixin_44641804的博客
09-01 3098
目录 一、css三种引入方式 1.内部样式表-----head标签内部的style 2.内联样式----在标签里写style（开发时不要使用） 3.外链式---- ----推荐使用 二、css选择器有哪几种？ （1）id选择器 （2）class选择器 （3）标签选择器 （4）伪类选择器 a标签 (5)派生选择器-----隔离作用域-------（常用） (6)后代选择器 · 样式写法: ·选择器优先级: 三、行标签和快标签 (1)如何把行标签转化成块标签: (2)块转行.
CSS知识点总结思维导图（个人总结）
w1405720461的博客
06-12 1049
CSS学习总结
CSS 核心知识点总结
最新发布
大剑师兰特的GIS世界
05-27 1952
CSS（Cascading Style Sheets，层叠样式表）是用于描述网页文档如何呈现给用户的样式语言。它与HTML一起构成了网页设计的基础。以下是CSS的一些核心知识点归纳总结
CSS基础知识总结
Lotus_fragrance的博客
04-29 3098
一、基础认识 css的中文又叫做：层叠样式表。 语法：选择器 + {属性名： 属性值}、 css引入方式：1.内嵌式，写在style标签中。通常放在head中。2.行内式：写在style标签中，写在标签中。3.外联式：单独写一个css文件，通过link把该文件引入。 二、选择器 选择器 在html中写法 在css中写法 标签选择器 就是标签本身 div{ } 类选择器 class= "banner" .banner { }.
html+css知识点总结
06-24
html+css知识点总结
Css知识点归纳
04-16
Css知识点归纳总结，方便做笔记复习。 Css知识点归纳总结，方便做笔记复习 Css知识点归纳总结，方便做笔记复习 Css知识点归纳总结，方便做笔记复习 Css知识点归纳总结，方便做笔记复习
CSS知识点.xmind
08-30
里面整理了css样式,用思维导图的形式展示了,对学习css的同学们来说更清晰,css知识点整理,欢迎大家来收藏
CSS知识点汇总.xmind
04-16
CSS
CSS知识点汇总.docx
09-01
CSS 知识点汇总 CSS（Cascading Style Sheets）是一种用于描述 HTML 或 XML 文档样式的标记语言。它可以控制文档的布局、颜色、字体、间距等样式。下面是 CSS 知识点汇总： CSS 单位 在 CSS 中，单位是指用来度量...
css 知识点
08-13
NULL 博文链接：https://936606539.iteye.com/blog/2299674
ＣＳＳ知识点总结（脑图）
12-05
从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。 随着HTML的成长，为了满足页面设计者的要求，HTML添加...于是CSS便诞生了。
csscss知识点总结
12-30
讲解一些刚入门的有关css的知识点，有助于我们能更容易的学懂css语言，例如表单制作，框架等等。
html和css知识点总结.docx
04-03
本文档是对html和css的一些重要知识点的总结（0积分即可下载）
关于html和 Css知识点
07-17
以下是一些常见的CSS知识点： 1. CSS选择器：用于选择要应用样式的HTML元素。常见的选择器包括类选择器（`.class`）、ID选择器（`#id`）、元素选择器（`element`）等。 2. 样式属性：CSS使用样式属性来定义元素的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值