首页 > 博客列表 > CSS伪类选择器，字体图标，盒模型及常用布局单位

博主信息

博文 5

粉丝 0

访问量 3473

专题推荐

更多>

伪类选择器

伪类选择器的类型
- 结构伪类：根据元素位置获取元素
  如以下代码所示
```
<!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>
```
  效果为
  
  代码中用到的:nth-of-type(5)就是伪类选择器，用来选择list类里第五个子元素
  结构伪类选择器的计算
  :nth-of-type(an+b)中，a控制选择个数及相隔数，b控制偏移量，n是线性增长的
  例如:nth-of-type(5)就是a=0，b=5，故而单选第五个元素
  例如:nth-of-type(n+3)，就是选择第三个元素及以后的元素
  再例如:nth-of-type(2n)就是选择2，4，6…等偶数元素
- 状态伪类：根据元素状态来获取元素
  如
  :focus input:focus 匹配获得焦点的 <input> 元素
  :hover a:hover 匹配鼠标悬停其上的元素

字体图标

字体图标来源有不少，如阿里巴巴矢量图标库、Bootstrap图标库和awesome图标库等

引用方式

在线引入
通过link标签引入该图标库的url来实现引用
如bootstrap的引用
`<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
`
本地引入
- 通过npm安装，只需在npm中输入指令即可安装
  如bootstrap的npm安装
  npm i bootstrap-icons
- 通过下载zip压缩包解压到项目文件夹中，别忘了在所需页面中引用

盒模型

盒模型的五种属性

width(宽度),heigh(高度),border边框,padding(内边框,内边距),margin(外边框,外边距)
演示如下

<!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>

我们可以看到设置高度200px与宽度200px是里面粉色部分的宽高，实际宽高是200+20*2+10*2=260px,这不利于我们设计页面时的计算

使用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>

该属性会自动压缩内容部分的宽高，来保证整体宽高是准确的

布局单位

绝对单位
- px：一个像素单位
- in：1in=96px
相对单位
- em：始终与上级元素或父元素的font-size相同
- rem：始终与HTML标签的font-size相同
- vh：将视口高宽分为100份, 1vh = 1/100
- vw: 将视口宽度分为100份, 1vw = 1/100

批改老师：

PHPz

批改状态：合格

老师批语：

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

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

0条评论

作者最新博文

初识前端Emmet与Html

2021-12-22 22:29:00

伪类选择器

伪类选择器的类型

结构伪类：根据元素位置获取元素

结构伪类选择器的计算

状态伪类：根据元素状态来获取元素

如

字体图标

引用方式

在线引入

本地引入

盒模型

盒模型的五种属性

使用box-sizing: border-box;属性可以准确生成200*200的盒模型

布局单位

绝对单位

相对单位