首页 > 博客列表 > css中的伪类选择器,字体图标与盒模以及常用单位px,em,rem,vh,vm

博主信息

博文 30

粉丝 1

访问量 23657

专题推荐

更多>

伪类选择器

伪类选择器类型

结构伪类:根据元素位置获取元素
状态伪类:根据状态来获取元素
结构伪类选择器
该类选择器根据元素位置来获取元素例如下列代码中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul class="list">
        <li class="first">Item1</li>
        <li>Item2</li>
        <li>Item3</li>
        <li>Item4</li>
        <li>Item5</li>
        <li>Item6</li>
        <li>Item7</li>
        <li>Item8</li>
    </ul>
    <style>
      .list > :nth-of-type(5) {
          background-color: blue;
      }
    </style>
</body>
</html>

上述代码中.list > :nth-of-type(5),使用伪类选择器选择了,第五个列表元素,执行代码结果如下:

伪类选择器1

伪类选择器nth-of-type(an+b)，该选择器会对传入的参数进行计算,根据计算结果进行元素选择,当a为0时,选择单个,但a>0时,选择多个，上述代码中nth-of-type(5)，a为0,b=5,所以选择了第五个元素。
当a>0时,伪类选择器伪类选择器将n依次从0开始递增到超出范围,根据计算结果选择元素,例如下列代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
        <ul class="list">
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
            <li>item4</li>
            <li>item5</li>
            <li>item6</li>
            <li>item7</li>
            <li>item8</li>
            <li>item9</li>
        </ul>
        <style>
            .list :nth-of-type(n+3) {
                background-color: red;
            }
        </style>
</body>
</html>

上述代码中,伪类选择器nth-of-type(n+3),选择了第3个元素开始的所有元素,下面用表格来演示计算过程:

n	n+3	计算结果
0	3	选择第3个元素
1	4	选择第4个元素
2	5	选择第5个元素
3	6	选择第6个元素
4	7	选择第7个元素
5	8	选择第8个元素
9	9	无第9元素,结束

该代码执行结果如下:
伪类选择器2

字体图标

引入字体图标

打开网页输入iconfont.cn阿里字体图标库,选择自己想要的图标，加入购物车
新建项目,将购物车的字体图标导入项目
将字体图标下载至本地
将字体图标导入你需要使用的项目中
开始使用字体图标

Unicode 引用

Unicode 是字体在网页端最原始的应用方式，特点是：

支持按字体的方式去动态调整图标大小，颜色等等。
默认情况下不支持多色，直接添加多色图标会自动去色。

Unicode 使用步骤如下：

1.拷贝项目下面生成的 @font-face代码如下

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1640351169736') format('woff2'),
       url('iconfont.woff?t=1640351169736') format('woff'),
       url('iconfont.ttf?t=1640351169736') format('truetype');
}

2.定义使用 iconfont 的样式

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

3.挑选相应图标并获取字体编码，应用于页面
<span class="iconfont">3</span>

font-class 引用

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

与 Unicode 使用方式相比，具有如下特点：

相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。

使用步骤如下：

1.引入项目下面生成的 fontclass 代码：
<link rel="stylesheet" href="./iconfont.css">
2.挑选相应图标并获取类名，应用于页面：
<span class="iconfont icon-xxx"></span>
3.使用font-class方式引入一个购物车字体图标示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font_icon/iconfont.css">
</head>
<body>
    <span class="iconfont icon-gouwuchekong"></span>
</body>
</html>

Symbol 引用

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

支持多色图标了，不再受单色限制。
通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
兼容性较差，支持 IE9+，及现代浏览器。
浏览器渲染 SVG 的性能一般，还不如 png。

使用步骤如下：

1.引入项目下面生成的 symbol 代码：
<script src="./iconfont.js"></script>
2.加入通用 CSS 代码（引入一次就行）：

<style>
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

3.挑选相应图标并获取类名，应用于页面：

<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-xxx"></use>
</svg>

-4.使用Symbol方式,引入一个购物车字体图标示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./font_icon/iconfont.js"></script>
</head>
<body>
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-gouwuchekong"></use>
      </svg>
</body>
</html>

盒模型

盒模型常用属性

width(宽度),heigh(高度),border边框,padding(内边框,内边距),margin(外边框,外边距)
下列代码将展示盒模型的5种属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box"></div>
    <style>
       .box {
        width: 200px;
        height: 200px;
        background-color: violet;
        border: 10px dashed currentColor;
        background-clip: content-box;
        padding: 20px;
       }
    </style>
</body>
</html>

执行代码后,结果如下:
合模型2

下图表示上述代码盒模型的计算方式
盒模型3
上述代码虽然定义盒模型,宽,高为200200，但是实际上生成了260260的盒模型,使用box-sizing: border-box;属性可以准确生成200*200的盒模型,看如下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box"></div>
    <style>
       .box {
        width: 200px;
        height: 200px;
        background-color: violet;
        border: 10px dashed currentColor;
        background-clip: content-box;
        padding: 20px;
        box-sizing: border-box;
       }
    </style>
</body>
</html>

执行如下代码后结果:
盒模型4
使用box-sizing: border-box属性后计算方式如下图:
盒模型5
实际生成了200*200的盒模型

常用单位

绝对单位

px表示像素, 1in = 96px
相对单位
em,rem, vh, vw为相对单位
em：受到当前元素font-size属性的影响,默认html的font-size属性为16px,在不指定font-size的情况下，1em=16px,永远和当前或父级的font-size进行绑定
rem：只与html元素的font-size属性相关联,与当前元素的font-size属性无关,永远和html(根元素)中的font-size绑定
vh：将视口高宽分为100份, 1vh = 1/100
vw: 将视口宽度分为100份, 1vw = 1/100

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

浅谈HTML开发基础

2021-12-22 17:30:06