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

css伪类选择器，字体图标，盒模型及自适应布局

程序员文章站 2022-04-08 18:23:29
...

一、css伪类选择器

  • 1、伪类分类：

    • 结构伪类：跟进元素位置获取元素
    • 状态伪类：跟进状态来获取元素

  • 2、常用伪类选择器
    nth-of-type()正数
    nth-last-of-type() 倒数

  • 3、nth-of-type(an+b)使用
    a：系数，取值范围[0,1,2,3,4,…]
    n：权数，取值范围[0,1,2,3,4,…]
    b：偏移量，从0开始计算。
    注意：计算出来的索引必须有效，不可以越界。
    选择元素的2中情况：

    • 匹配单个元素：a=0;
      li>:nth-of-type(0n+3) 相当于：li>:nth-of-type(3),只匹配第三条元素；
    • 匹配一组元素：
      当a=1，b=3时，li>:nth-of-type(1n+3)，匹配。
      n:从0开始取，n+3匹配的全过程：
      1、n=0：an+b=3，选择第3条元素。
      2、n=1：an+b=4，选择第4条元素。
      3、n=2：an+b=5，选择第5条元素。
      4、n=3：an+b=6，选择第6条元素。
      5、n=4：an+b=7，选择第7条元素。
      6、n=5：an+b=8，选择第8条元素。
      7、n=6：an+b=9，索引越界，匹配失败，结束计算。
      n+3=>[3，4，5，6，7，8]，匹配到6个。
      

    1.    <ul class="list">
      2. 

    2.     <li>item1</li>
      3. 

    3.     <li>item2</li>
      4. 

    4.     <li>item3</li>
      5. 

    5.     <li>item4</li>
      6. 

    6.     <li>item5</li>
      7. 

    7.     <li>item6</li>
      8. 

    8.     <li>item7</li>
      9. 

    9.     <li>item8</li>
      10. 

    10.   </ul>
      11. 

    11.   <style>
      12. 

    12.     .list > :nth-of-type(n+3) {
      13. 

    13.       background-color: red;
      14. 

    14.     }
      15. 

    15.   </style>
      16.

    css伪类选择器，字体图标，盒模型及自适应布局

      

    1.    <style>
      2. 

    2.     .list > :nth-of-type(n) {
      3. 

    3.       background-color: red;
      4. 

    4.     }
      5. 

    5.   </style>
      6.

    css伪类选择器，字体图标，盒模型及自适应布局
    当a=2,b=0时，li>:nth-of-type(2n),匹配所有偶数元素。
    奇偶也可以用下面方式表示：2n:even,2n+1:odd

      

    1.    <style>
      2. 

    2.     .list > :nth-of-type(2n) {
      3. 

    3.       background-color: red;
      4. 

    4.     }
      5. 

    5.   </style>
      6.

    css伪类选择器，字体图标，盒模型及自适应布局
    当a=2,b=1时，li>:nth-of-type(2n+1)，匹配所有奇数元素。

      

    1.    <style>
      2. 

    2.     .list > :nth-of-type(2n+1) {
      3. 

    3.       background-color: red;
      4. 

    4.     }
      5. 

    5.   </style>
      6.

    css伪类选择器，字体图标，盒模型及自适应布局
    当a=-1时，当前偏移量反向取。

      

    1.    <style>
      2. 

    2.     .list > :nth-of-type(-n+3) {
      3. 

    3.       background-color: red;
      4. 

    4.     }
      5. 

    5.   </style>
      6.

    css伪类选择器，字体图标，盒模型及自适应布局

伪类选择器 示例 作用
:first-of-type li:first-of-type 选择作为其父的首个 <li> 元素的每个 <li> 元素。
:last-of-type li:last-of-type 选择作为其父的最后一个 <li> 元素的每个 <li> 元素。
:nth-of-type(n) li:nth-of-type(2) 选择作为其父的第二个<li>元素的每一个<li>元素
:nth-last-of-type(n) li:nth-last-of-type(2)) 倒数选择作为父的第二个<li>元素的每一个<li>元素
:hover a:hover 选择鼠标悬停其上的链接
:active a:active 选择活动的链接
:checked input:checked 选择每个被选择的<input>元素
:disabled input:disabled 选择每个被禁用的<input>元素
:focus input:focus 选择获得焦点的<input>元素

二、字体图标

  • 1、选择字体图标，建议选择阿里官方的图标库，免费且颜值高，网址：https://iconfont.cn/
  • 2、选择并下载自己所需图标，添加至项目目录。也可以使用在线地址，直接引入项目。
  • 3、按照演示说明，项目中引入图标。
      

    1. <head>
      2. 

    2. <link rel="stylesheet" href="./1224/font_icon/iconfont.css" />
      3. 

    3. </head>
      4. 

    4. <body>
      5. 

    5.   <p>
      6. 

    6.     <span class="iconfont icon-shouye"></span>
      7. 

    7.   </p>
      8. 

    8.   <p>
      9. 

    9.     <span class="iconfont icon-shuaxin"></span>
      10. 

    10.   </p>
      11. 

    11.   <p>
      12. 

    12.     <span class="iconfont icon-sousuo"></span>
      13. 

    13.   </p>
      14. 

    14.   <style>
      15. 

    15.     .iconfont {
      16. 

    16.       font-size: 24px;
      17. 

    17.       color: red;
      18. 

    18.     }
      19. 

    19.   </style>
      20.
    css伪类选择器，字体图标，盒模型及自适应布局

三、盒模型

  • 盒模型的5个属性：
    1、widte：宽度
    2、height：高度
    3、border：边框
    4、padding：内边距,透明，只有宽度，用法：padding:上 右 下 左
    5、margin：外边距 margin:上 右 下 左
  • padding/margin语法
    四值语法：上 右 下 左
    三值语法：上 左右 下
    双值语法：上下 左右
    单值语法：四个方向都一样。

  • box-sizing:border-box；用来改变盒子大小的计算方式，使用户设置的width,height就是盒子的实际大小，方便计算和布局。

      

    1. <div class="box1"></div>
      2. 

    2.   <br />
      3. 

    3.   <div class="box2"></div>
      4. 

    4.   <style>
      5. 

    5.     .box1 {
      6. 

    6.       width: 200px;
      7. 

    7.       height: 200px;
      8. 

    8.       border: 10px dashed red;
      9. 

    9.       background-color: aqua;
      10. 

    10.       padding: 20px;
      11. 

    11.       background-clip: content-box;
      12. 

    12.     }
      13. 

    13.     .box2 {
      14. 

    14.       width: 200px;
      15. 

    15.       height: 200px;
      16. 

    16.       border: 10px dashed red;
      17. 

    17.       background-color: aqua;
      18. 

    18.       padding: 20px;
      19. 

    19.       background-clip: content-box;
      20. 

    20.       box-sizing: border-box;
      21. 

    21.   </style>
      22.

    css伪类选择器，字体图标，盒模型及自适应布局

  • 样式重置的简单方案：

      

    1.   <style>
      2. 

    2.     * {
      3. 

    3.       padding: 0;
      4. 

    4.       margin: 0;
      5. 

    5.       box-sizing: border-box;
      6. 

    6.     }
      7. 

    7.   </style>
      8.

四、em,rem的区别

  • 常用单位：px;em,rem,vh,vw等
  • 绝对单位，px：和设备相关，1英寸=96px;
  • 相对单位：em,rem vh，vw
  • em:em=一个字号大小，即父级font-size。永远和当前或者父级的font-size进行绑定。可以动态调整元素大小。

  • rem:永远和html中的font-size进行绑定。不受当前字号及父级字号大小影响。

      

    1.   <div class="box1"></div>
      2. 

    2.   <br />
      3. 

    3.   <div class="box2"></div>
      4. 

      5. 

    5.   <style>
      6. 

    6.     html {
      7. 

    7.       font-size: 10px;
      8. 

    8.     }
      9. 

    9.     .box1 {
      10. 

    10.       font-size: 20px;
      11. 

    11.       width: 20em;
      12. 

    12.       height: 20em;
      13. 

    13.       background-color: aqua;
      14. 

    14.     }
      15. 

    15.     .box2 {
      16. 

    16.       width: 20rem;
      17. 

    17.       height: 20rem;
      18. 

    18.       background-color: aqua;
      19. 

    19.     }
      20. 

    20.   </style>
      21.

    css伪类选择器，字体图标，盒模型及自适应布局

上一篇： 微信h5和ppt的区别

下一篇： Emmet-前端开发神器

推荐阅读