首页 > 博客列表 > css伪类选择器详解,如何引入阿里矢量字体图标库,盒模型及常用单位简介

博主信息

博文 13

粉丝 0

访问量 9893

专题推荐

更多>

css 伪类选择器详解，如何引入字体图标库，盒模型

伪类的定义

伪	类
表示假的	class 级权重

伪类的类型

伪类的类型	作用
结构伪类	根据位置获取元素
状态伪类	根据状态获取元素

结构伪类

常用的语法

结构伪类语法	代码	用法
取指定位置的元素	`:nth-of-type()`	直接在“()”内填写要取第几个元素
倒着取指定位置的元素	`:nth-last-of-type()`	直接在“()”内填写要取倒数第几个元素
取第一个	`first-of-type`	取第一个元素
取倒数第一个	`last-of-type`	取倒数第一个元素

伪类选择器的参数

nth-of-type(an+b)

参数	规则
a 系数	[0,1,2,3…]
n 权数	[0,1,2,3…]
b 偏移量	从 0 开始

注:计算出来的索引必须是有效，从 1 开始

选择元素只有两种情况： 1.选择一个 2.选择一组
匹配单个元素 a=0
匹配多个元素 a>=1

匹配单个元素代码示例(a=0)

<!DOCTYPE html>
<html lang="zh-CN">
  <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>伪类选择器匹配单个元素(a=0)</title>
    <style>
      /* 注：因为我们要取单个元素，所以a=0，n为从0开始自动计算，b为我们要找的元素的偏移量。
      我们要取的是ul下的第三个li所以偏移量b=3。
      匹配过程：a=0，n=【0,1,2,3...直到索引结束】，b=3
      a*n=0，b=3，an+b=3，因为0乘任何数都等一零，所以当a=0时只会索引一次 */
      .list > li:nth-of-type(0n + 3) {
        background-color: coral;
      }
    </style>
  </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>
    </ul>
  </body>
</html>

匹配多个元素代码示例(a=1)

<!DOCTYPE html>
<html lang="zh-CN">
  <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>伪类选择器匹配单个元素(a=0)</title>
    <style>
      /* 注：因为我们要取多个元素，所以a=1，n为从0开始自动计算，b为我们要找的元素的偏移量。
       我们要取的是ul下的第三个包括下面的所有li元素，所以偏移量b=3。
       匹配过程：a=1，n=【0,1,2,3...直到索引结束】，b=3
      第一遍索引：1*0+3=0+3=3
      第二遍索引：1*1+3=1+3=4
      第三遍索引：1*2+3=2+3=5
      第四遍索引：1*3+3=3+3=6
      第五遍索引：1*4+3=4+3=7
      第六遍索引：1*5+3=5+3=8
      第七遍索引：1*6+3=6+3=9！索引到这里索引的到第九个元素，代码里没有第九个li，所以索引超纲自动停止，索引结束 */
      .list > li:nth-of-type(1n + 3) {
        background-color: coral;
      }
    </style>
  </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>
    </ul>
  </body>
</html>

如果我们想要向上取参数参数为：(-1n+b)
如果我们要取偶数参数为：(2n),但是这里我们有更简洁的方式，参数只需要填 even;
如果我们要取奇数参数为：(2n+1),但是这里我们有更简洁的方式，参数只需要填 odd;

表单伪类

状态伪类

代码	作用
disabled	禁用状态
enabled	启用状态
checked	选中状态
hover	鼠标悬停状态
focus	获取焦点状态

以下时代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
  <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>状态选择器</title>
    <style>
      /* 所有开放的input的属性 */
      input:enabled {
        /* 背景色：绿 */
        background-color: green;
        border: 3px dotted green;
      }
      /* 所有未开放的input的属性 */
      input:disabled {
        /* 背景色：红 */
        background-color: red;
        /* 边框尺寸3px 虚线 绿色 */
        border: 3px dotted green;
      }
      /* 当男被选中后后面的label内的内容变为蓝色 */
      #male:checked + * {
        /* 文本色：蓝 */
        color: blue;
      }
      /* 当女被选中后后面label内的内容变为红色 */
      #female:checked + * {
        /* 文本色：红 */
        color: red;
      }
      /* input获取焦点时的样式 */
      input:focus {
        /* 背景色：royalblue */
        background-color: royalblue;
      }
      button {
        /* 高100 */
        width: 100px;
        /* 宽30 */
        height: 30px;
        /* 边框：无 */
        border: none;
        /* 轮廓线：无 */
        outline: none;
        /* 背景色：红 */
        background-color: red;
        /* 文本色：白 */
        color: white;
      }
      /* 鼠标悬停hover样式 */
      button:hover {
        background-color: seagreen;
        color: black;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div>
      <label for="username">username:</label>
      <input type="text" name="username" id="username" value="admin" disabled />
    </div>
    <div>
      <label for="">password:</label>
      <input type="password" name="password" id="password" />
    </div>
    <div>
      <input type="radio" name="gender" id="male" value="0" />
      <label for="male">男</label>
      <input type="radio" name="gender" id="female" value="1" />
      <label for="female">女</label>
      <p><button type="submit">提交</button></p>
    </div>
  </body>
</html>

开发小技巧-引用字体图标库

什么是字体图标？
图标样式的字体，本质上仍然是字体/文本
阿里矢量图标库
如何引用图标库？

1.使用 link 标签链接到图标库
<link rel="stylesheet" href="./图标库文件地址/" />

2.使用图标库(class 里填写相对应的图标名称即可)
<span class="iconfont WIFI icon-WIFI"></span>
完整引入演示代码如下

<!DOCTYPE html>
<html lang="zh-CN">
  <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" />
    <!-- 引入字体图标库css文件 -->
    <link rel="stylesheet" href="./font_icon/iconfont.css" />
    <title>引入字体图标库</title>
    <style>
      /* 设置字体图标的样式：大小，颜色； */
      div.iconfont.qrcode.icon-qrcode {
        font-size: 100px;
        color: red;
      }
    </style>
  </head>
  <body>
    <!-- 使用字体图标 -->
    <div class="iconfont qrcode icon-qrcode"></div>
  </body>
</html>

盒模型

盒模型的常用属性

序号	代码	作用	备注
1	`width`	宽
2	`height`	高
3	`border`	边框	可视化属性，有多种样式，`solid`实线，`dashed`虚线
4	`pandding`	内边距
5	`margin`	外边距

1.通常情况下我们给一个元素边框和背景色，背景色会融入到边框内，这时我们只需要给该元素一个样式就可以了。背景色裁切：background-clip: content-box;这个代码的意思是内容在盒子中心。
2.通常我们在布局中给的width和height都是希望这是盒子的大小，但是通常会因为边框，内边距和外边距等等的因素出现撑大了盒子的宽和高，所以这里我们要用到一个代码 box-sizing:border-box,此时的width和height设置的宽高就是我们盒子计算的宽高，不会因为盒子的其他元素改变盒子的尺寸。

padding 语法

类型	语法	解释
单值语法	`padding:20px`	上下左右四个值都是 20px
双值语法	`padding:20px 30px`	左右 20px 上下 30px
三值语法	`padding:20px 30px 20px`	左 20px 上下 30px 右 20px
四值语法	`padding:30px 20px 30px 20px`	顺时针语法：上 30px 右 20px 下 30px 左 20px

以下是代码详情示例以及解析

<!DOCTYPE html>
<html lang="zh-CN">
  <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>盒模型</title>
    <style>
      /* 初始化所有元素的内边距和外边距，并且设置盒子的大小不受内外边距和边框的影响，只由width和height决定大小 */
      * {
        /* 内边距padding */
        padding: 0px;
        /* 外边距margin */
        margin: 0px;
        /* 设置元素大小只能由width和height决定 */
        box-sizing: border-box;
        /* 边框=1px 实现边框 红色 */
        outline: 1px solid red;
      }
      /* 盒模型常用属性
        1.width
        2.height
        3.border
        4.padding
        5.margin */
      /* 这里是class=box的div标签的样式声明 */
      .box {
        /* 宽：200px */
        width: 200px;
        /* 高：200px */
        height: 200px;
        /* 边框：10px 虚线 红色（已被下方的边框声明覆盖） */
        border: 10px dashed red;
        /* 背景色：黑色 */
        background-color: black;
        /* 背景裁切：在盒子内 */
        background-clip: content-box;
        /* 内边距：20px（因为.box的权重为（0,1,0） 所以覆盖了全局设置的padding） */
        padding: 20px;
        /* 外边距：20px */
        margin: 20px-;
        /* 这里我们在全局设置中设置了box-sizing：border-box，所以元素的宽度为左右border（边框的大小）+左右padding（内边距的大小）+width=10(左边框)+20(左padding)+140(元素内容部分的宽度)+10(右边框)+20(右padding)=200 */
        /* 元素的宽度为上下border（边框的大小）+上下padding（内边距的大小）+height=20(上边框)+20(上padding)+120(元素内容部分的高度)+20(下边框)+20(下padding)=200 */
        /* 设置元素大小只能由width和height决定(由于上方全局设置已经设置过了，这里省略也可以) */
        box-sizing: border-box;
        /* 为了记忆padding的四值语法，我们这里的边框单独设置也采用了上右下左的顺序 */
        /* 单独设置边框上方：20px 实线  红色         */
        border-top: 20px solid red;
        /* 单独设置边框右方：10px 虚线 蓝色 */
        border-right: 10px dashed blue;
        /* 单独设置边框下方：20px 实线 红色*/
        border-bottom: 20px solid red;
        /* 单独设置边框左方：10px 虚线 蓝色 */
        border-left: 10px dashed blue;
      }
      /* 这里是class=box1的div标签的样式声明 */
      /* 这个样式声明主要是为了测试上面的全局声明，看下是否生效，元素的大小是否只由width和height来决定而不是会收到padding(内边距)和margin(外边距)的影响 */
      .box1 {
        /* 宽：300px */
        width: 300px;
        /* 高：300px */
        height: 300px;
        /* 内边距：100px */
        padding: 100px-;
        /* 外边距：100px */
        margin: 100px-;
      }
    </style>
  </head>
  <body>
    <!-- 这里是class=box的div标签 -->
    <div class="box"></div>
    <!-- 这里是class=box1的div标签 -->
    <div class="box1">aaaaa</div>
  </body>
</html>

常用单位

常用单位的种类

序号	单位类型	符号
1	绝对单位	px(像素)： 1lin(英寸)=96px
2	相对单位	em：永远和当前或父级的 font-size(字号)进行绑定
3	相对单位	rem:永远和 html(根元素)中的 font-size 进行绑定
4	相对单位	vw:常用在响应式布局（多在移动端）,指把视口宽度分为 100 份，1vw=1/100
5	相对单位	vh:常用在响应式布局（多在移动端）,指把视口高度分为 100 份，1vh=1/100

以下是 px，em，rem，vw，vh 代码的示例

<!DOCTYPE html>
<html lang="zh-CN">
  <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>常用单位</title>
    <style>
      * {
        padding: 0px;
        margin: 0px;
        box-sizing: border-box;
      }
      html {
        /* 这里我们给html（根元素）设置一个统一的字号：10px */
        font-size: 10px;
      }
      .box {
        /* 这里我们给div.box一个单独的字号 */
        font-size: 20px;
        /* 宽=5em=5*20px=100px */
        width: 5em;
        /* 高=10rem=10*10px=100px */
        height: 10rem;
        border: 1px solid red;
        background-color: black;
        background-clip: content-box;
      }
      .box {
        /* 这里我们把视窗宽度分为100份，100vw=100%宽度 */
        width: 100vw;
        /* 这里我们把视窗高度分为100份，10vh=10%高度 */
        height: 10vh;
      }
    </style>
  </head>
  <body>
    <div class="box">aaaaa</div>
  </body>
</html>

批改老师：

PHPz

批改状态：合格

老师批语：

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

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

0条评论

作者最新博文

Ement常用语法、元素的四类属性、一些常用的布局标签

2021-12-22 23:36:10