前端学习day08-CSS-结构伪类-图形-字体-字体图标-元素定位

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

一.结构伪类

1.1. nth-child

• nth-child(2)
• nth-child(2n+1)
• nth-child(-n+5)

1.2. nth-last-child/nth-of-type/nth-last-of-type

1.3.其他结构伪类

• first-child
• 相对比较重要的两个伪类

:root => html
:empty => 小程序

1.4. 否定伪类

:not(简单选择器)

二.额外知识补充

2.1. border的图形

• 三角形
• 旋转

2.2. 网络字体

• 拿到字体
• @font-face
• 使用它
• 兼容性

2.3. 字体图标

• 阿里icon选择图标
• 下载代码
• 在项目中使用

<i>字符实体</i>
<i class="iconfont icon-video"></i>

补充:如果有新的图标

• 使用最新下载的字体

2.4. 精灵图 CSS Sprite

将多个图标放到一张图片

使用图片

• width/height
• background-position

2.5. cursor

cursor:pointer

三.元素定位(布局)

3.1. 对标准流的理解

3.2. 元素的定位

常见的值:

• static
• relative
• absolute
• fixed
• sticky

3.3. 相对定位

• relative

  • 想对自己原来的位置(标准流中的位置)
  • left/right/top/bottom

• 小案例

  • 3的2次方+3的平分=17

• img居中显示案例(梦幻西游案例)

  • 背景图片也可以完成

3.4. 固定定位

• fixed

  • 相对视口(可视区域viewport)
  • 不会随着内容的滚动而滚动

• 练习