欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

CSS伪类选择器,字体图标,盒模型及常用布局单位

程序员文章站 2022-05-16 20:53:47
...

伪类选择器

  • 伪类选择器的类型

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

      如以下代码所示
      1. <!DOCTYPE html>
      2. <html lang="en">
      3. <head>
      4. <meta charset="UTF-8">
      5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
      6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
      7. <title>Document</title>
      8. </head>
      9. <body>
      10. <ul class="list">
      11. <li class="first">Item1</li>
      12. <li>Item2</li>
      13. <li>Item3</li>
      14. <li>Item4</li>
      15. <li>Item5</li>
      16. <li>Item6</li>
      17. <li>Item7</li>
      18. <li>Item8</li>
      19. </ul>
      20. <style>
      21. .list > :nth-of-type(5) {
      22. background-color: blue;
      23. }
      24. </style>
      25. </body>
      26. </html>
      效果为
      CSS伪类选择器,字体图标,盒模型及常用布局单位
      代码中用到的: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(外边框,外边距)
演示如下

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. </head>
  9. <body>
  10. <div class="box"></div>
  11. <style>
  12. .box {
  13. width: 200px;
  14. height: 200px;
  15. background-color: violet;
  16. border: 10px dashed currentColor;
  17. background-clip: content-box;
  18. padding: 20px;
  19. }
  20. </style>
  21. </body>
  22. </html>

CSS伪类选择器,字体图标,盒模型及常用布局单位
CSS伪类选择器,字体图标,盒模型及常用布局单位
我们可以看到设置高度200px与宽度200px是里面粉色部分的宽高,实际宽高是200+20*2+10*2=260px,这不利于我们设计页面时的计算

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>Document</title>
  8. </head>
  9. <body>
  10. <div class="box"></div>
  11. <style>
  12. .box {
  13. width: 200px;
  14. height: 200px;
  15. background-color: violet;
  16. border: 10px dashed currentColor;
  17. background-clip: content-box;
  18. padding: 20px;
  19. box-sizing: border-box;
  20. }
  21. </style>
  22. </body>
  23. </html>

CSS伪类选择器,字体图标,盒模型及常用布局单位
该属性会自动压缩内容部分的宽高,来保证整体宽高是准确的

布局单位

  • 绝对单位

    • px:一个像素单位
    • in:1in=96px
  • 相对单位

    • em:始终与上级元素或父元素的font-size相同
    • rem:始终与HTML标签的font-size相同
    • vh:将视口高宽分为100份, 1vh = 1/100
    • vw: 将视口宽度分为100份, 1vw = 1/100