前端系统复习-html和css（八）

知识不过脑子
250 阅读10分钟

一. 结构伪类

1.1. nth-child

◼ :nth-child(1)

  • 是父元素中的第1个子元素

◼ :nth-child(2n)

  • n代表任意正整数和0 

  • 是父元素中的第偶数个子元素（第2、4、6、8......个）

  • 跟:nth-child(even)同义

◼ :nth-child(2n + 1)

  • n代表任意正整数和0 

  • 是父元素中的第奇数个子元素（第1、3、5、7......个）

  • 跟:nth-child(odd)同义

◼ nth-child(-n + 2)

  • 代表前2个子元素

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

:nth-last-child()的语法跟:nth-child()类似，不同点是 :nth-last-child()从最后一个子元素开始往前计数

  • :nth-last-child(1)，代表倒数第一个子元素

  • :nth-last-child(-n + 2)，代表最后2个子元素

◼ :nth-of-type()用法跟:nth-child()类似

  • 不同点是:nth-of-type()计数时只计算同种类型的元素

◼ :nth-last-of-type()用法跟:nth-of-type()类似

  • 不同点是:nth-last-of-type()从最后一个这种类型的子元素开始往前计数

1.3. 其他结构伪类

first-child

相对比较重要的两个伪类:

  • :first-child，等同于:nth-child(1)

  • :last-child，等同于:nth-last-child(1)

  • :first-of-type，等同于:nth-of-type(1)

  • :last-of-type，等同于:nth-last-of-type(1)

  • :only-child，是父元素中唯一的子元素

  • :only-of-type，是父元素中唯一的这种类型的子元素

◼ 下面的伪类偶尔会使用: 

  • :root，根元素，就是HTML元素

  • :empty代表里面完全空白的元素

1.4. 否定伪类

:not()的格式是:not(x)

  • x是一个简单选择器

  • 元素选择器、通用选择器、属性选择器、类选择器、id选择器、伪类（除否定伪类）

  • :not(x)表示除x以外的元素

二. 额外知识补充

2.1. border的图形

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

假如我们将border宽度设置成50会是什么效果呢? 

  • 如果我们进一步, 将另外三边的颜色去除呢? 

  • 如果我们将这个盒子旋转呢?

假如我们将border宽度设置成50会是什么效果呢? 

所以利用border或者CSS的特性我们可以做出很多图形: 

css-tricks.com/the-shapes-…

2.2. 网络字体

认识Web字体：

在之前我们有设置过页面使用的字体: font-family

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

  • 这样的方式完全没有问题，但是对于传统的web开发人员来说，字体选择是有限的; 

这就是所谓的 Web-safe 字体; 

  • 并且这种默认可选的字体并不能进行一些定制化的需求; 

◼ 比如下面的字体样式, 系统的字体肯定是不能实现的

◼ 那么我们是否依然可以在网页中使用这些字体呢? 使用Web Fonts即可.

Web fonts的工作原理：

首先, 我们需要通过一些渠道获取到希望使用的字体(不是开发来做的事情):

  • 对于某些收费的字体, 我们需要获取到对应的授权; 

  • 对于某些公司定制的字体, 需要设计人员来设计; 

  • 对于某些免费的字体, 我们需要获取到对应的字体文件; 

◼ 其次, 在我们的CSS代码当中使用该字体(重要):

  • 具体的过程看后面的操作流程; 

◼ 最后, 在部署静态资源时, 将HTML/CSS/JavaScript/Font一起部署在静态服务器中; 

◼ 用户的角度: 

  • 浏览器一个网页时, 因为代码中有引入字体文件, 字体文件会被一起下载下来; 

  • 浏览器会根据使用的字体在下载的字体文件中查找、解析、使用对应的字体； 

  • 在浏览器中使用对应的字体显示内容；

使用：

第一步：在字体天下网站下载一个字体

◼ 第二步：使用字体；

◼ 使用过程如下：

1.将字体放到对应的目录中 

2.通过@font-face来引入字体, 并且设置格式

3.使用字体

◼ 注意: @font-face 用于加载一个自定义的字体;

image.png

兼容性： 我们刚才使用的字体文件是 .ttf, 它是TrueType字体. 

在开发中某些浏览器可能不支持该字体, 所以为了浏览器的兼容性问题, 我们需要有对应其他格式的字体; 

◼ TrueType字体：拓展名是 .ttf

  • OpenType/TrueType字体：拓展名是 .ttf、.otf，

建立在TrueType字体之上

  • Embedded OpenType字体：拓展名是 .eot，

OpenType字体的压缩版

  • SVG字体：拓展名是 .svg、 .svgz

  • WOFF表示Web Open Font Format web开放字体：

拓展名是 .woff，建立在TrueType字体之上

◼ 这里我们提供一个网站来生产对应的字体文件: 

web fonts兼容性写法：

如果我们具备很强的兼容性, 那么可以如下格式编写:

image.png

这被称为"bulletproof @font-face syntax（刀枪不入的@font-face语法）“:

这是 Paul Irish早期的一篇文章提及后@font-face开始流行起来 (Bulletproof @font-face Syntax)。 

◼ src用于指定字体资源

  • url指定资源的路径

  • format用于帮助浏览器快速识别字体的格式

2.3. 字体图标

思考：字体可以设计成各式各样的形状，那么能不能把字体直接设计成图标的样子呢？

当然可以，这个就叫做字体图标。 

◼ 字体图标的好处：

  • 放大不会失真

  • 可以任意切换颜色

  • 用到很多个图标时，文件相对图片较小

◼ 字体图标的使用：

◼ 将字体文件和默认的css文件导入到项目中

使用： 字体图标的使用步骤: 

◼ 第一步: 通过link引入iconfont.css文件

◼ 第二步: 使用字体图标

◼ 使用字体图标常见的有两种方式: 

  • 方式一: 通过对应字体图标的Unicode来显示代码; 

  • 方式二: 利用已经编写好的class, 直接使用即可;

image.png

2.4. CSS Sprite

什么是CSS Sprite？

- 是一种CSS图像合成技术，将各种小图片合并到一张图片上，然后利用CSS的背景定位来显示对应的图片部分

  • 有人翻译为：CSS雪碧、CSS精灵

◼ 使用CSS Sprite的好处

  • 减少网页的http请求数量，加快网页响应速度，减轻服务器压力

  • 减小图片总大小

  • 解决了图片命名的困扰，只需要针对一张集合的图片命名

◼ Sprite图片制作（雪碧图、精灵图）

使用： 精灵图如何使用呢? 

  • 精灵图的原理是通过只显示图片的很小一部分来展示的; 

  • 通常使用背景: 

✓ 1.设置对应元素的宽度和高度

✓ 2.设置精灵图作为背景图片

✓ 3.调整背景图片的位置来展示

如何获取精灵图的位置？

 www.spritecow.com/

image.png

2.5. cursor

cursor可以设置鼠标指针（光标）在元素上面时的显示样式

◼ cursor常见的设值有

  • auto：浏览器根据上下文决定指针的显示样式，比如根据文本和非文本切换指针样式

  • default：由操作系统决定，一般就是一个小箭头

  • pointer：一只小手，鼠标指针挪动到链接上面默认就是这个样式

  • text：一条竖线，鼠标指针挪动到文本输入框上面默认就是这个样式

  • none：没有任何指针显示在元素上面

三. 元素定位(布局)

3.1. 对标准流的理解

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

  • 从左到右、从上到下按顺序摆放好
  • 默认情况下，互相之间不存在层叠现象

image.png

margin-padding位置调整:

  • 在标准流中，可以使用margin、padding对元素进行定位
    • 其中margin还可以设置负数
  • 比较明显的缺点是 设置一个元素的margin或者padding，通常会影响到标准流中其他元素的定位效果

不便于实现元素层叠的效果

3.2. 元素的定位

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

例如放在另一个元素的上面;  或者始终保持在浏览器视窗内的同一位置;

常见的值:

  • static:默认值, 静态定位
  • relative:相对定位
  • absolute:绝对定位
  • fixed:固定定位
  • sticky:粘性定位

3.3. 相对定位

  • relative
    • 相对自己原来的位置(标准流中的位置)
    • left/right/top/bottom 相对定位的应用场景
  •  在不影响其他元素位置的前提下，对当前元素位置进行微调

3.4. 固定定位（sticky）

元素脱离normal flow（脱离标准流、脱标） ◼ 可以通过left、right、top、bottom进行定位

◼ 定位参照对象是视口（viewport） 

◼ 当画布滚动时，固定不动

画布 和 视口

视口（Viewport） 

  • 文档的可视区域

  • 如图红框所示

◼ 画布（Canvas） 

  • 用于渲染文档的区域

  • 文档内容超出视口范围，可以通过滚动查看

  • 如图黑框所示

◼ 宽高对比

画布 >= 视口

image.png

定位元素的特点:

可以随意设置宽高

◼ 宽高默认由内容决定

◼ 不再受标准流的约束

  • 不再严格按照从上到下、从左到右排布

  • 不再严格区分块级、行内级，块级、行内级的很多特性都会消失

◼ 不再给父元素汇报宽高数据

◼ 脱标元素内部默认还是按照标准流布局

绝对定位 - absolute

元素脱离normal flow（脱离标准流、脱标）

◼ 可以通过left、right、top、bottom进行定位

  • 定位参照对象是最邻近的定位祖先元素

  • 如果找不到这样的祖先元素，参照对象是视口

◼ 定位元素（positioned element） 

  • position值不为static的元素

  • 也就是position值为relative、absolute、fixed的元素

1.2. position设置absolute/fixed特性

1.都是脱离标准流

2.可以任何设置宽度和高度

3.默认宽度高度是包裹内容

4.不再给父级元素汇报宽度和高度

5.自己内部依然按照标准流布局

6.公式

  • 包含块的width = left + right + margin-left + margin-right + width
    • left0 right0 margin 0 auto width: 200px -> 水平居中
    • left 0 right 0 margin 0 -> 宽度沾满包含块的宽度
  • 垂直方向也是一样
    • 俺也一样

1.4. 粘性定位 sticky

  • 基本演练

    • 默认相对定位
    • top: 0 -> 固定(绝对)

  • top/bottom/left/right -> 最近的滚动视口

1.5. position多个值总结

1.6. z-index

  • 只对定位元素有效
  • 兄弟比较

二. 浮动

2.1. 认识浮动

float

  • none
  • left
  • right

2.2. 浮动规则

  • 规则一: 向左浮动或者向右浮动
  • 规则二: 不能超出包含块;
  • 规则三: 浮动元素不能层叠
  • 规则四: 浮动元素会将行内级元素内容推出
    • 图文环绕效果
  • 规则五: 浮动只能左右浮动, 不能超出本行的高度
avatar
文章
阅读
粉丝