结构伪类-字体图标-Sprite图-元素定位

• 结构伪类
  • nth-child
    • 是父元素的第一个子元素
    • 示例：nth-child（数字）

      

    • nth-child（2n/2n+1）奇偶变色

      

    • 四个一组，实现不同的颜色

      

    • 同时使前五个元素字体改变 nth-child（-n+5）

      

  • nth-last-child
    • nth-last-child( ):与nth-child类似，但nth-last-child( )是从最后一个子元素从后往前数。

      

  • nth-of-type
    • 只计算同种类型的元素

      

  • nth-last-of-type
    • 同类型从后往前计数
• border图形
  • 用boder画出对应图形：图形参考网站：CSS-Tricks - Tips, Tricks, and Techniques on using Cascading Style Sheets.

    

• web 网络字体
  • web fonts 工作原理
    • 先在浏览器中设置某个字体，，根据该字体去操作系统中进行寻找，若找到，可以在网页中显示
    • 若在操作系统找不到，可通过@font-face { url（）} 去获取在服务器端部署的字体资源，浏览器会将服务器中的字体资源下载到本地，进行显示，等下次浏览器需要显示该字体时，会直接在本地对比下载好的字体资源，继而解析显示文本。
    • 面临困难：
      • 1. fonts获取到想要的字体
      • 2. 在css中使用字体
      • 3. 所有资源一起部署到服务器中
  • 示例：使用@font-face

    

  • 自己练习时字体网站：字体天下-提供各类字体的免费下载和在线预览服务（字体天下）
  • web fonts 兼容性写法（多个字体的写法）

    

  • 字体图标
    • 把字体设置成图片（优点：缩放不失真，可切换颜色，占据空间小）
    • 在开发时引入字体图标：iconfont 阿里巴巴矢量图标库

      

• 精灵图CSS Sprite
  • CSS Sprite是一种CSS图像合成技术，将各种小图片合并到一张图片上，然后利用CSS的背景定义来显示对应图片的部分
  • 使用CSS Sprite优点：减少网页http请求数量，加快网页响应速度，减轻服务器压力，减小图片总大小，解决命名问题
  • 页面上插入图片方法总结：

    

  • 精灵图实现：查找精灵图地址网站Sprite Cow - Generate CSS for sprite sheets

    

• Cursor 设置光标的样式
  • 可以设置鼠标指针在元素上显示的样式
  • 示例：

    

• CSS元素定位
  • 标准流（normal-flow）
    • 默认情况，元素都是按照normal-flow标准流 进行排布
    • 从左到右，从上到下
    • 默认情况下，互相不存在层叠现象
    • 诸如此类：

      

    • margin-padding位置调整
      • 缺点：会影响别的元素，不便于实现元素层叠的效果
      • 可以通过设置position属性脱离标准流，单独对此进行设置
  • 认识元素的定位（使用position元素）
    • 定位从正常的文档流布局中取出元素，使之有不同的行为。
    • eg：元素层叠，让元素固定在当前视口的某一位置
    • position常见取值：
      • static：默认值
        • 元素按照normal-flow（标准流）布局
        • left，right，bottom，top没有作用
      • relative：相对定位（一般用于元素微调）
        • 元素按照normal-flow（标准流）布局
        • 可以通过left，right，bottom，top进行调整布局
        • 定位的参照物是该元素原来的位置：

          

        • 应用场景：在不影响其他元素的前提下，对当前元素位置进行微调

          

        • 实现元素的微调：

          

        • 用margin-left设置图片可根据浏览器缩放实现居中：（较难，但灵活）

          

        • 设置图片可根据浏览器缩放实现居中（简单，但具有局限性）

          

      • absolute：绝对定位
        • 元素脱离normal-flow（标准流）布局
        • 可以通过left，right，bottom，top进行调整布局
        • 定位的参照对象是最邻近的定位祖先元素，如果找不到这样的元素，参照对象是视口
        • 示例：设置最邻近祖先的定位元素：

          

      • fixed：固定定位
        • 元素脱离normal-flow（标准流）布局
        • 可以通过left，right，bottom，top进行调整布局
        • 定位参照对象是视口（视口是用户可以看得见的区域）
        • 当画布滚动，固定不动
        • 示例：

          

        • fixed：固定定位 案例：

          

      • sticky：粘性定位
        • 可以看作是相对定位和固定（绝对）定位的结合体
        • 它允许被定位的元素表现的像相对定位一样，直到它滚动到某个阈值点
        • 当达到这个阈值点时，就会变成固定（绝对）定位
        • sticky是相对于最近的滚动祖先包含的滚动视口的
        • 示例：

          

      • 将position设置为absolute/fixed元素的特点（一）
        • 可以随意设置宽高
        • 宽高默认由内容决定
        • 不再受标准流的约束
        • 不再给父元素汇报宽高数据
          • 当元素设置为position: absolute时，父元素的背景色不会显示，需给父元素设置宽高，才能显示。

            

        • 脱标元素内部还是按照标准流布局的
      • 将position设置为absolute/fixed元素的特点（二）
        • margin: 0 auto; 可使得黄色块级元素居中

          

        • 若将定位元素设置成absolute，黄色盒子不设置宽度，且left和right为0，则宽度可以占满黑色盒子。

          

        • 垂直居中（绝对定位）：从水平方向和垂直方向分别看出，若将right,left,top,bottom分别设置为0，再将margin设置为auto，则黄色盒子居中。如下两图所示。
        • 绝对定位元素：position为absolute或者fixed的元素
        • 对于绝对定位元素来说：
          • 定位参照对象的宽度= left + right + margin-left + margin-right + 绝对定位元素的实际占用值
          • 定位参照对象的高度= top + bottom + margin-top + margin-bottom + 绝对定位元素的实际占用值
          • 若希望绝度元素的宽高和定位参照对象一样(占比为100%)，可以给绝对定位元素设置以下属性： left:0, right:0, top:0, bottom:0, margin:0
          • 若希望绝度元素在定位参照对象中居中显示，可以给绝对定位元素设置以下属性： left:0, right:0, top:0, bottom:0, margin:auto ，另外，还要设置具体的宽高（宽高 < 定位参照对象的宽高 ）
          • 示例：

            

            

          • auto：默认交给浏览器处理（不一定是居中）
            • eg：width：auto
            • 1. 行内非替换元素 -width：包裹内容
            • 2. 块级元素 -width：包含块的宽度
            • 3. 绝对定位元素-width：包裹内容
      • position常见元素取值的区别：