4.4、结构伪类|web字体图标|border图形|精灵图

4.4、结构为类,定位,web字体图标,border图形,精灵图,cursor

一、结构伪类（8个）公式n = 0 开始计算

1.1、nth-child() even odd

概述：只计算父元素的第几个子元素 ,不管是否是同种类型,也不会排除干扰项.

选中元素子元素集合，根据公式筛选

公式：n 代表0~。。。

1n：1x1=1 代表第一个，1X0=0所以无效，同理2n：1X2=2 2x2=4 一直到元素的最后

效果：1n每1个选一个，2n每两个选一个

2n+1：2x0+1=1, 1x2+1=3 ，2x2+1=5 所以是第1，3，5个…元素选中一直到最后一个元素

效果：在第1个开始每两个选中一个

-n+3: 0+3=3 ,-1+3=2, -2+3=1 所以选中的是1 2 3 位置的元素

效果：-n+3：-n+多少，就是前多少个元素

注意：

    <style>
    /* 1、要是想要选中span的话
      这样写就代表ul下面的所有子元素前3个
    .box-ul>:nth-child(-n+3){
        color: brown;
    }
    */
    /* 1、要是想要选中第3个li的话，改用.box-ul>:nth-of-type
    .box-ul li:nth-child(-n+3){
        color: brown;
    }
     */
    .box-ul li:nth-child(-n+3){
        color: brown;
    }
  </style>
</head>
<body>
   <ul class="box-ul">
     <li>这里是li1</li>
     <li>这里是li2</li>
     <!-- 这里不会选中span，因为不是li元素 -->
     <span>span</span>
     <!-- 也不会选中这个li 因为不是第三个 -->
     <li>这里是li3</li>
     <li>这里是li4</li>
     <li>这里是li5</li>
     <li>这里是li6</li>
     <li>这里是li7</li>
     <li>这里是li8</li>
   </ul>
</body>

1.2、nth-last-child()

概述：和nth-child同理只不过是从最后面开始

1.3、nth-of-type()

概述：只会选中同种类型的元素,会排除所有的干扰项

  <style>
    .box-ul li:nth-of-type(-n+3){
        color: brown;
    }
  </style>
</head>
<body>
   <ul class="box-ul">
     <li>这里是li1</li>
     <li>这里是li2</li>
     <span>span</span>
     <!-- 会选中这个li 因为是同类型的第3个 -->
     <li>这里是li3</li>
     <li>这里是li4</li>
     <li>这里是li5</li>
     <li>这里是li6</li>
     <li>这里是li7</li>
     <li>这里是li8</li>
   </ul>
</body>

1.4、nth-of-last-type()

概述：和nth-of-type()同理，不过是在最后面开始的

1.5、first-child()、last-child()

first-child() 等同 nth-child(1)

last-child() 等同 nth-last-child(1)

  <style>
      /* ul所有下一级所有子元素集合中，第一个子元素设置样式*/
    .box-ul>:first-child{
      width: 100px;
      height: 100px;
      background-color: #333;
    }
      /* ul 中的 li元素集合中，倒数第一个子元素设置样式*/
    .box-ul li:last-child{
      margin: 10px;
      padding: 10px;
      background-color: #f00;
    }
  </style>
</head>
<body>
  <ul class="box-ul">
    <li>测试其他结构伪类</li>
    <li>测试其他结构伪类</li>
    <li>测试其他结构伪类</li>
    <li>测试其他结构伪类</li>
    <li>测试其他结构伪类</li>
    <li>测试其他结构伪类</li>
    <li>测试其他结构伪类</li>
    <li>测试其他结构伪类</li>
  </ul>
</body>

1.6、only-child()：当元素只有一个子元素的时候

  <style>
    .box > :only-child{
      color: bisque;
    }
  </style>
</head>
<body>
  <div class="box">
    <div>这里是div1</div>
  </div>
  <div class="box">
    <div>这里是div1</div>
    <span>这里是span</span>
  </div>
</body>

1.7、only-of-type()：同类元素只有一个的子元素

二、补充伪类

2.1、否定伪类

<style>
    /* .box 的后代元素 没有.wyn这个class的元素 */
   .box :not(.wyn){
      color: aqua;
    }
  </style>
</head>
<body>
  <div class="box">
    <div>测试否定伪类1</div>
    <div class="wyn">测试否定伪类2</div>
    <div>测试否定伪类3</div>
    <div>测试否定伪类4</div>
    <div>测试否定伪类5</div>
    <div>测试否定伪类6</div>
  </div>
</body>

2.2、:root根元素，HTML元素

   :root{
      width: 100px;
      height: 100px;
      background-color: #fff;
    }

直接用就可以了，后面还可以设置变量后面在补充

2.3、:empty 代表里面完全空白的元素，配合before来使用

mdn: CSS 伪类代表没有子元素的元素。子元素只可以是元素节点或文本（包括空格）。注释或处理指令都不会产生影响。

   solt:empty:before{
      content: "李四"
    }
/**
  注意这里：这个div里面不能有空格否则不会生效
    例：
       <div class="embox">
       </div>
**/
  <div class="embox"></div>

2.4、:checked input多选框或者单选的时候被选中的元素

写动画配合 label 标签使用

二、border图形

◼ border主要是用来给盒子增加边框的, 但是在开发中我们也可以利用边框的特性来实现一些形状

例如：🔺

css样式

box-sizing: border-box;
      /* 设置好边框颜色之后旋转 */
transform-origin: center 25%;
transform: rotate(180deg);

◼ 所以利用border或者CSS的特性我们可以做出很多图形: border的css图形网站：https://css-tricks.com/the-shapes-of-css/#top-of-site

    .box{
      box-sizing: border-box;
      width: 100px;
      height: 100px;
        /*重点：css是层叠样式表，一定要border属性在上面，border-top咋下面，
        transparent设置边框颜色透明
      border: 50px solid transparent;
      border-top: 50px solid  bisque;
      /*
        用动画调整中心点之后在进行旋转
      transform-origin: center 25%;
      transform: rotate(180deg); */

      /*
        错误：只是设置上边框的颜色会显示矩形并不是三角型了
         border-top: 50px solid  bisque;
        */


    }

三、web网络字体

3.1、概述：网络字体 web Fonts

当给网页设置网络子体的时候，

我们需要提供一个或多个字体种类名称，浏览器会在列表中搜寻，直到找到它所运行的系统上可用的字体。这就是所谓的Web-safe 字体;

对于传统的web开发人员来说，字体选择是有限的

这种默认可选的字体并不能进行一些定制化的需求，那么我们是否依然可以在网页中使用这些字体呢? 使用Web Fonts即可.

3.2、使用web Fonts

第一步：在字体天下网站下载一个字体
https://www.fonts.net.cn/fonts-zh-1.html
默认下载下来的是ttf文件；

第二步：使用字体；

  <style>
    @font-face {
      /*1、这里设置字体的名字*/
      font-family: "wyn";
      /*2、将ttf文件放到项目目录当中，在这里引用*/
      src: url(./font/GongFanMianFeiTi2.0\(GengDuoZiTiBaiDuSouShiJueFang\)-2.ttf);
    }
      /*3、设置字体*/
    body{
      font-family: "wyn";
    }
  </style>

3.3、web Fonts的兼容性

知识概述：

我们刚才使用的字体文件是 .ttf, 它是TrueType字体.
- 在开发中某些浏览器可能不支持该字体, 所以为了浏览器的兼容性问题, 我们需要有对应其他格式的字体;
TrueType字体：拓展名是 .ttf
- OpenType/TrueType字体：拓展名是 .ttf、.otf，建立在TrueType字体之上
- Embedded OpenType字体：拓展名是 .eot，OpenType字体的压缩版
- SVG字体：拓展名是 .svg、 .svgz
- WOFF表示Web Open Font Format web开放字体：拓展名是 .woff，建立在TrueType字体之上
这里我们提供一个网站来生产对应的字体文件:
- https://font.qqe2.com/# 暂时可用

web fonts兼容性写法：

如果我们具备很强的兼容性, 那么可以如下格式编写:
这被称为”bulletproof @font-face syntax（刀枪不入的@font-face语法）
- 这是 Paul Irish早期的一篇文章提及后@font-face开始流行起来 (Bulletproof @font-face Syntax)。
src用于指定字体资源
- url指定资源的路径
- format用于帮助浏览器快速识别字体的格式;

    @font-face {
      font-family: "why";
      src: url("./fonts02/AaQingHuanYuanTi.eot"); /* IE9 */
      src: url("./fonts02/AaQingHuanYuanTi.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
      url("./fonts02/AaQingHuanYuanTi.woff") format("woff"), /* chrome、firefox */
      url("./fonts02/AaQingHuanYuanTi.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
      url("./fonts02/AaQingHuanYuanTi.svg#uxfonteditor") format("svg"); /* iOS 4.1- */
      font-style: normal;
      font-weight: 400;
    }

四、字体图标

4.1、了解字体图标

字体图标：字体直接设计成图标的样子，这个就叫做字体图标。

字体图标的好处：
- 放大不会失真
- 可以任意切换颜色
- 用到很多个图标时，文件相对图片较小
字体图标的使用：
- 登录阿里icons（https://www.iconfont.cn/）
- 下载代码，并且拷贝到项目中

4.2、使用字体图标

1.在阿里icons中选中需要的图标添加购物车

下载代码之后生成css和ttf文件…

/*生成的文件目录*/
    demo.css
    iconfont.css
    iconfont.js
  iconfont.json
    iconfont.ttf

方法一、字符实体的方式

  <style>
    @font-face {
  /* 1、设置字体名称 */
      font-family: "iconfont";
  /* 2、引入ttf字体文件使用 */
      src: url(./font-icon/iconfont.ttf);
    }
    .iconfont{
  /* 3、使用设置的字体 */
      font: 16px "iconfont";
      font-style: normal;
    }
  </style>
<--4、字符实体代码在阿里购物车界面复制代码*、-->
    <--或者在demo_index.html查看、-->

   <i class="iconfont">&#xe60c;</i>

方法二、iconfont.css

  <!-- 引入iconfont.css -->
  <link rel="stylesheet" href="./font-icon/iconfont.css">
  <!-- 2、同上面一样，引入iconfont.css中的class属性 -->
  <i class="iconfont icon-a-huaban2fuben11"></i>

方法三、使用symol

https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8d11a391&helptype=code
帮助》代码应用

五、css精灵图

5.1、什么是精灵图

只选中图片很小的一部分来做为背景进行展示

通常使用背景:
- 1.设置对应元素的宽度和高度
- 2.设置精灵图作为背景图片
- 3.调整背景图片的位置来展示
使用精灵图的好处

一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。

因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称css Sprites、CSS雪碧)。只请求一次图片
注意：可以根据盒子大小自动调整大小的图片只有背景，字体图标，和svg
Section titled “注意：可以根据盒子大小自动调整大小的图片只有背景，字体图标，和svg”

5.2、使用精灵图

1.先获取精灵图的位置和大小： http://www.spritecow.com/

2.使用

/*在spritecow。com获取图片样式进行使用*/
.sprite {
  background: url('imgs/topbar_sprite.png') no-repeat 0 -19px;
  width: 33px;
  height: 33px;
}

六、cursor属性

poiner:手
text：一条竖线，鼠标指针挪动到文本输入框上面默认就是这个样式
default：箭头
auto：自动
none: 没有任何指针

七、定位

7.1、标准流（normal flow）

默认情况下，元素都是按照normal flow（标准流、常规流、正常流、文档流【document flow】）进行排布

从左到右、从上到下按顺序摆放好
默认情况下，互相之间不存在层叠现象
在标准流中，可以使用margin、padding对元素进行定位
- 其中margin还可以设置负数
比较明显的缺点是
- 设置一个元素的margin或者padding，通常会影响到标准流中其他元素的定位效果
- 不便于实现元素层叠的效果

7.2、认识元素定位

定位允许您从正常的文档流布局中取出元素，并使它们具有不同的行为;

例如放在另一个元素的上面;

或者始终保持在浏览器视窗内的同一位置

7.3、认识position属性

static: 默认值, 静态定位

元素按照normal flow布局,left 、right、top、bottom没有任何作用
relative：相对定位
元素按照normal flow布局,可以通过left、right、top、bottom进行定位
- 定位参照对象是元素自己原来的位置
- 在不影响其他元素位置的前提下，对当前元素位置进行微调
absolute：绝对定位
元素脱离normal flow（脱离标准流、脱标）,可以通过left、right、top、bottom进行定位
- 定位参照对象是最邻近的定位祖先元素
- 如果找不到这样的祖先元素，参照对象是视口
fixed：固定定位
元素脱离normal flow（脱离标准流、脱标）,可以通过left、right、top、bottom进行定位
- 定位参照对象是视口（viewport）
- 当画布滚动时，固定不动
sticky：粘性定位

目前只有ie不支持，相对于父级元素，滚顶到指定位置的时候进行固定，一定要设置t/b/r/l的值，否则无效
```
    [for = inp] {
      position: sticky;
      top: 0;
    }
```

7.3.1、画布和视口

画布：用于渲染文档的区域，文档内容超出视口范围，可以通过滚动查看
视口: 文档的可视区域
宽高对比: 画布 >= 视口