Community Learn Tools Library Leisure
search
English
Home > List of blog posts > css伪类选择器，字体图标，盒模型及自适应布局
Blogger Information
Blog 8
fans 0
comment 0
visits 5792
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
css伪类选择器，字体图标，盒模型及自适应布局
星辰的博客
Original
502 people have browsed it

一、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.     <li>item1</li>
    3.     <li>item2</li>
    4.     <li>item3</li>
    5.     <li>item4</li>
    6.     <li>item5</li>
    7.     <li>item6</li>
    8.     <li>item7</li>
    9.     <li>item8</li>
    10.   </ul>
    11.   <style>
    12.     .list > :nth-of-type(n+3) {
    13.       background-color: red;
    14.     }
    15.   </style>

    1.    <style>
    2.     .list > :nth-of-type(n) {
    3.       background-color: red;
    4.     }
    5.   </style>


    当a=2,b=0时，li>:nth-of-type(2n),匹配所有偶数元素。
    奇偶也可以用下面方式表示：2n:even,2n+1:odd

    1.    <style>
    2.     .list > :nth-of-type(2n) {
    3.       background-color: red;
    4.     }
    5.   </style>


    当a=2,b=1时，li>:nth-of-type(2n+1)，匹配所有奇数元素。

    1.    <style>
    2.     .list > :nth-of-type(2n+1) {
    3.       background-color: red;
    4.     }
    5.   </style>


    当a=-1时，当前偏移量反向取。

    1.    <style>
    2.     .list > :nth-of-type(-n+3) {
    3.       background-color: red;
    4.     }
    5.   </style>

伪类选择器 示例 作用
: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. <link rel="stylesheet" href="./1224/font_icon/iconfont.css" />
    3. </head>
    4. <body>
    5.   <p>
    6.     <span class="iconfont icon-shouye"></span>
    7.   </p>
    8.   <p>
    9.     <span class="iconfont icon-shuaxin"></span>
    10.   </p>
    11.   <p>
    12.     <span class="iconfont icon-sousuo"></span>
    13.   </p>
    14.   <style>
    15.     .iconfont {
    16.       font-size: 24px;
    17.       color: red;
    18.     }
    19.   </style>

三、盒模型

  • 盒模型的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.   <br />
    3.   <div class="box2"></div>
    4.   <style>
    5.     .box1 {
    6.       width: 200px;
    7.       height: 200px;
    8.       border: 10px dashed red;
    9.       background-color: aqua;
    10.       padding: 20px;
    11.       background-clip: content-box;
    12.     }
    13.     .box2 {
    14.       width: 200px;
    15.       height: 200px;
    16.       border: 10px dashed red;
    17.       background-color: aqua;
    18.       padding: 20px;
    19.       background-clip: content-box;
    20.       box-sizing: border-box;
    21.   </style>

  • 样式重置的简单方案：

    1.   <style>
    2.     * {
    3.       padding: 0;
    4.       margin: 0;
    5.       box-sizing: border-box;
    6.     }
    7.   </style>

四、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.   <br />
    3.   <div class="box2"></div>
    5.   <style>
    6.     html {
    7.       font-size: 10px;
    8.     }
    9.     .box1 {
    10.       font-size: 20px;
    11.       width: 20em;
    12.       height: 20em;
    13.       background-color: aqua;
    14.     }
    15.     .box2 {
    16.       width: 20rem;
    17.       height: 20rem;
    18.       background-color: aqua;
    19.     }
    20.   </style>

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post