五、字体图标和网络字体,精灵图及定位和浮动的深入学习

Lyk 2022/5/5 HTMLCSS文本超出显示省略号网络字体的使用字体图标精灵图定位position浮动float

# 1、边框的形状及文字超出显示省略号补充

# 1.1.border边框实现形状

border主要是用来给盒子增加边框的, 但是在开发中我们也可以利用边框的特性来实现一些形状。
具体我们可以参照该链接了解：利用border及CSS特性做图形 (opens new window)

# 1.2.文字超出显示省略号

单行文本超出显示省略号

/* 文字太多，实现单行超出，省略号显示的方法
注意:两行，三行甚至多行超出等...省略号的实现方法需要用其他技术实现(下面有补充) */

/* 文字单行显示 */
white-space: nowrap;
/* 超出的字体进行裁剪 */
overflow: hidden;
/* 文字超出省略号 */
text-overflow: ellipsis;

1
2
3
4
5
6
7
8
9
10

单行或多行文本超出显示省略号

/* 一行或多行文本超出用省略号显示
具体想要多少行,设置-webkit-line-clamp的值即可 */
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;

1
2
3
4
5
6

# 2、Web fonts(网络字体)的了解与使用

# 2.1.认识Web fonts

在之前我们有设置过页面使用的字体: font-family
- 我们需要提供一个或多个字体种类名称，浏览器会在列表中搜寻，直到找到它所运行的系统上可用的字体。
- 这样的方式完全没有问题，但是对于传统的web开发人员来说，字体选择是有限的;
- 这就是所谓的 Web-safe 字体;
- 并且这种默认可选的字体并不能进行一些定制化的需求;
- 有一些字体样式, 系统的字体肯定是不能实现的
那么我们是否依然可以在网页中使用这些字体呢? 使用Web Fonts即可

# 2.2.使用Web Fonts

获取网络字体文件方法及使用：
- 第一步：在字体天下网站下载一个字体: 下载网络字体 (opens new window);
  
  默认下载下来的是ttf文件；
- 第二步：使用字体；使用过程如下：
  - 1.将字体放到对应的目录中
  - 2.通过@font-face来引入字体, 并且设置格式
  - 3.使用字体

@font-face {
  font-family:'font-kky'; /* 给引入的网络字体命名 */
  src:url(./fonts/AaJianHaoTi-2.ttf);/* 这里写你下载下来的网络字体的具体路径 */
}
body {
  font-family:'font-kky'; /* 使用下载下来并引入使用的网络字体 */
}

1
2
3
4
5
6
7

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

# 2.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字体之上
该网站用来生产对应的字体文件(即如上各种拓展名的网络字体文件): 生产对应网络字体文件 (opens new window) 暂时可用

# 2.4.web fonts兼容性写法

如果我们具备很强的兼容性, 那么可以如下格式编写:
具体如下兼容性格式写法不用记,具体步骤如下:
1. 我们先下载好网络字体.ttf文件下载网络字体 (opens new window);
2. 再进入生产对应网络字体文件 (opens new window)
3. 将下载下来的网络字体.ttf文件进行导入,导入成功后;下载.zip压缩文件
4. 然后解压该压缩文件,里面有css文件及网络字体的各种拓展名文件,下面的兼容性写法CSS文件中就有哦

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

body {
  font-family: 'fonteditor';
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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

这是 Paul Irish早期的一篇文章提及后@font-face开始流行起来 (Bulletproof @font-face Syntax) (opens new window)。
src用于指定字体资源
- url指定资源的路径
- format用于帮助浏览器快速识别字体的格式;

# 3、字体图标的了解及使用

# 3.1.字体图标的了解

字体可以设计成各式各样的形状，那么能不能把字体直接设计成图标的样子呢？：当然可以，这个就叫做字体图标。
字体图标的好处：
- 放大不会失真
- 可以任意切换颜色
- 用到很多个图标时，文件相对图片较小
字体图标的使用：
- 登录阿里icons 下载字体图标 (opens new window)
- 下载代码，并且拷贝到项目中
将字体文件和默认的css文件导入到项目中

# 3.2.字体图标的使用

字体图标的使用步骤:
- 第一步: 通过link引入iconfont.css文件
- 第二步: 使用字体图标
使用字体图标常见的有两种方式:
- 方式一: 通过对应字体图标的Unicode来显示代码;
- 方式二: 利用已经编写好的class, 直接使用即可;

<i class="iconfont">&#xe6f6;</i>
<i class="iconfont icon-music"></i>

1
2

# 4、精灵(雪碧)图 CSS Sprite

# 4.1.认识精灵图

什么是CSS Sprite
- 是一种CSS图像合成技术，将各种小图片合并到一张图片上，然后利用CSS的背景定位来显示对应的图片部分
- 有人翻译为：CSS雪碧、CSS精灵
使用CSS Sprite的好处
- 减少网页的http请求数量，加快网页响应速度，减轻服务器压力
- 减小图片总大小
- 解决了图片命名的困扰，只需要针对一张集合的图片命名
Sprite图片制作（雪碧图、精灵图）
- 方法1：Photoshop, 设计人员提供
- 方法2：自己制作：精灵(雪碧)图的制作 (opens new window)

# 4.2.精灵图的使用

精灵图的原理是通过只显示图片的很小一部分来展示的;
通常使用背景:
1. 设置对应元素的宽度和高度
2. 设置精灵图作为背景图片：background-image: url();
3. 调整背景图片的位置来展示：background-position: x y;
如何获取精灵图的位置获取精灵图上某一个图片的位置 (opens new window)

# 5、cusor属性

cursor可以设置鼠标指针（光标）在元素上面时的显示样式
cursor常见的设值有
- auto：浏览器根据上下文决定指针的显示样式，比如根据文本和非文本切换指针样式
- default：由操作系统决定，一般就是一个小箭头
- pointer：一只小手，鼠标指针挪动到链接上面默认就是这个样式
- text：一条竖线，鼠标指针挪动到文本输入框上面默认就是这个样式
- none：没有任何指针显示在元素上面

# 6、CSS定位：position属性

# 6.1.标准流(Normal Flow)及margin-padding位置调整

默认情况下，元素都是按照normal flow（标准流、常规流、正常流、文档流【document flow】）进行排布
- 从左到右、从上到下按顺序摆放好
- 默认情况下，互相之间不存在层叠现象
在标准流中，可以使用margin、padding对元素进行定位
- 其中margin还可以设置负数
比较明显的缺点是
- 设置一个元素的margin或者padding，通常会影响到标准流中其他元素的定位效果
- 不便于实现元素层叠的效果
如果我们希望一个元素可以跳出标准量,单独的对某个元素进行定位呢?
- 我们可以通过position属性来进行设置;

# 6.2.元素的定位和position属性

定位允许您从正常的文档流布局中取出元素，并使它们具有不同的行为:
例如放在另一个元素的上面;
或者始终保持在浏览器视窗内的同一位置;
定位在开发中非常常见,随处可见
利用position可以对元素进行定位，常用取值有5个:

static | relative | absolute | sticky | fixed
◼ 默认值: static：默认值, 静态定位
◼ 使用下面的值, 可以让元素变成 定位元素(positioned element) 
    1. relative：相对定位
    2. absolute：绝对定位
    3. fixed：固定定位
    4. sticky：粘性定位
◼ 静态定位 - static：position属性的默认值
    1. 元素按照normal flow布局
    2. left 、right、top、bottom没有任何作用

1
2
3
4
5
6
7
8
9
10

# 6.3.相对定位 - relative

元素按照normal flow布局(不脱离文档流)
可以通过left、right、top、bottom进行定位 (left、right、top、bottom用来设置元素的具体位置，)
- 定位参照对象是元素自己原来的位置
相对定位的应用场景：在不影响其他元素位置的前提下，对当前元素位置进行微调

# 6.4.固定定位 - fixed(设置的元素叫绝对定位元素)

元素脱离normal flow（脱离标准流、脱标）
可以通过left、right、top、bottom进行定位
定位参照对象是视口（viewport）
当画布滚动时，固定不动

# 6.5.了解画布和视口

视口（Viewport）
- 文档的可视区域
- 如下图红框所示
画布（Canvas）
- 用于渲染文档的区域
- 文档内容超出视口范围，可以通过滚动查看
- 如下图黑框所示
宽高对比
- 画布 >= 视口

# 6.6.绝对定位 - absolute(设置的元素叫绝对定位元素)

元素脱离normal flow（脱离标准流、脱标）
可以通过left、right、top、bottom进行定位
- 定位参照对象是最邻近的定位祖先元素
- 如果找不到这样的祖先元素，参照对象是视口
定位元素（positioned element）
- position值不为static的元素
- 也就是position值为relative、absolute、fixed的元素

# 6.7.绝对定位元素的特点(fixed和absolute)

可以随意设置宽高
宽高默认由内容决定
不再受标准流的约束
- 不再严格按照从上到下、从左到右排布
- 不再严格区分块级、行内级；块级、行内级的很多特性都会消失
不再给父元素汇报宽高数据
脱标元素内部默认还是按照标准流布局

# 6.8.子绝父相

在绝大数情况下，子元素的绝对定位都是相对于父元素进行定位
如果希望子元素相对于父元素进行定位，又不希望父元素脱标，常用解决方案是：
- 父元素设置position: relative（让父元素成为定位元素，而且父元素不脱离标准流）
- 子元素设置position: absolute
- 简称为“子绝父相”

# 6.9.绝对定位知识拓展

绝对定位元素（absolutely positioned element）
- position值为absolute或者fixed的元素
对于绝对定位元素来说
- 定位参照对象的宽度 = left + right + margin-left + margin-right + 绝对定位元素的实际占用宽度
- 定位参照对象的高度 = top + bottom + margin-top + margin-bottom + 绝对定位元素的实际占用高度
如果希望绝对定位元素的宽高和定位参照对象一样，可以给绝对定位元素设置以下属性
- left: 0、right: 0、top: 0、bottom: 0
如果希望绝对定位元素在定位参照对象中垂直水平居中显示，可以给绝对定位元素设置以下属性
- left: 0、right: 0、top: 0、bottom: 0、margin: auto (绝对定位元素需要有具体的宽高值)
- 另外，还得设置具体的宽高值（宽高小于定位参照对象的宽高）
知识补充：margin四个方向的默认值为0；left,right,top,bottom默认值为auto

# 6.10.粘性定位 - sticky

还有一个定位的值是position: sticky，比起其他定位值要新一些.
- sticky是一个大家期待已久的属性;
- 可以看做是相对定位和固定定位的结合体;
- 它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点;
- 当达到这个阈值点时, 就会变成固定定位;
sticky是相对于最近的滚动祖先包含视口的(the nearest ancestor scroll container’s scrollport )

# 6.11.position值对比

	脱离标准流	定位元素	绝对定位元素	定位参照对象
static-静态定位	×	×	×	×
relative-相对定位	×	√	×	元素自己原来的位置
absolute-绝对定位	√	√	√	最邻近的定位祖先元素（如果找不到这样的祖先元素，参照对象是视口)
fixed-固定定位	√	√	√	视口

# 6.12.CSS属性 - z-index

z-index属性用来设置定位元素的层叠顺序（仅对定位元素有效）
- 取值可以是正整数、负整数、0
比较原则1：如果是兄弟关系
- z-index越大，层叠在越上面
- z-index相等，写在后面的那个元素层叠在上面
比较原则2：如果不是兄弟关系
- 各自从元素自己以及祖先元素中，找出最邻近的2个定位元素进行比较
- 而且这2个定位元素必须有设置z-index的具体数值

# 7、浮动（float）

# 7.1.认识并了解浮动

float 属性可以指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。
- float 属性最初只用于在一段文本内浮动图像, 实现文字环绕的效果;
- 但是早期的CSS标准中并没有提供好的左右布局方案, 因此在一段时间里面它成为网页多列布局的最常用工具;
绝对定位、浮动都会让元素脱离标准流，以达到灵活布局的效果
可以通过float属性让元素产生浮动效果，float的常用取值
- none：不浮动，默认值
- left：向左浮动
- right：向右浮动

# 7.2.浮动规则一

元素一旦浮动后, 脱离标准流
- 朝着向左或向右方向移动，直到自己的边界紧贴着包含块（一般是父元素）或者其他浮动元素的边界为止
- 定位元素会层叠在浮动元素上面

# 7.3.浮动规则二

如果元素是向左（右）浮动，浮动元素的左（右）边界不能超出包含块的左（右）边界

# 7.4.浮动规则三

浮动元素之间不能层叠
- 如果一个元素浮动，另一个浮动元素已经在那个位置了，后浮动的元素将紧贴着前一个浮动元素（左浮找左浮，右浮找右浮）
- 如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，直到有充足的空间为止

# 7.5.浮动规则四

浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素推出
- 比如行内级元素、inline-block元素、块级元素的文字内容

# 7.6.浮动规则五

行内级元素、inline-block元素浮动后，其顶部将与所在行的顶部对齐

# 7.7.浮动的问题 – 高度塌陷

由于浮动元素脱离了标准流，变成了脱标元素，所以不再向父元素汇报高度
- 父元素计算总高度时，就不会计算浮动子元素的高度，导致了高度坍塌的问题
解决父元素高度坍塌问题的过程，一般叫做清浮动（清理浮动、清除浮动）
清浮动的目的是
- 让父元素计算总高度的时候，把浮动子元素的高度算进去
如何清除浮动呢? 使用clear属性

# 7.8.CSS属性 - clear

clear属性是做什么的呢?
- clear 属性可以指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面;
clear的常用取值
- left：要求元素的顶部低于之前生成的所有左浮动元素的底部
- right：要求元素的顶部低于之前生成的所有右浮动元素的底部
- both：要求元素的顶部低于之前生成的所有浮动元素的底部
- none：默认值，无特殊要求
那么我们可以利用这个特性来清除浮动

# 7.9.清除浮动的方法

事实上我们有很多方法可以清除浮动

方法一: 给父元素设置固定高度
- 扩展性不好（不推荐）
方法二: 在父元素最后增加一个空的块级子元素，并且让它设置clear: both
- 会增加很多无意义的空标签，维护麻烦
- 违反了结构与样式分离的原则（不推荐）
方法三: 给父元素添加一个伪元素
- 推荐;
- 编写好后可以轻松实现清除浮动

.clear-fix::after {
  content: "";
  display:block;
  clear:both;
  
  visibility:hidden; /* 浏览器的兼容性 */
  height:0; /* 浏览器的兼容性 */
}
.clear-fix {
  *zoom:1; /* IE6/7兼容性 */
}

1
2
3
4
5
6
7
8
9
10
11

# 7.10.布局方案总结

定位方案	应用场景
normal flow（标准流）	垂直布局
absolute positioning（绝对定位）	层叠布局
float（浮动）	水平布局

# 7.11.浮动元素的补充

当一个元素为浮动元素
- 这个元素将会脱离标准流
- 不向父元素汇报宽高,从而形成高度塌陷
- 不再严格区分块级、行内级；块级、行内级的很多特性都会消失
- 可以设置宽高
- 浮动元素内部默认还是按照标准流布局
- 宽高默认由内容决定

四、CSS设置背景及HTML高级元素的学习六、CSS的flex布局

Lyk-Blog

五、字体图标和网络字体,精灵图及定位和浮动的深入学习

五、字体图标和网络字体,精灵图及定位和浮动的深入学习

# 1、边框的形状及文字超出显示省略号补充

# 1.1.border边框实现形状

# 1.2.文字超出显示省略号

# 2、Web fonts(网络字体)的了解与使用

# 2.1.认识Web fonts

# 2.2.使用Web Fonts

# 2.3.web-fonts的兼容性

# 2.4.web fonts兼容性写法

# 3、字体图标的了解及使用

# 3.1.字体图标的了解

# 3.2.字体图标的使用

# 4、精灵(雪碧)图 CSS Sprite

# 4.1.认识精灵图

# 4.2.精灵图的使用

# 5、cusor属性

# 6、CSS定位：position属性

# 6.1.标准流(Normal Flow)及margin-padding位置调整

# 6.2.元素的定位和position属性

# 6.3.相对定位 - relative

# 6.4.固定定位 - fixed(设置的元素叫绝对定位元素)

# 6.5.了解画布和视口

# 6.6.绝对定位 - absolute(设置的元素叫绝对定位元素)

# 6.7.绝对定位元素的特点(fixed和absolute)

# 6.8.子绝父相

# 6.9.绝对定位知识拓展

# 6.10.粘性定位 - sticky

# 6.11.position值对比

# 6.12.CSS属性 - z-index

# 7、浮动（float）

# 7.1.认识并了解浮动

# 7.2.浮动规则一

# 7.3.浮动规则二

# 7.4.浮动规则三

# 7.5.浮动规则四

# 7.6.浮动规则五

# 7.7.浮动的问题 – 高度塌陷

# 7.8.CSS属性 - clear

# 7.9.清除浮动的方法

# 7.10.布局方案总结

# 7.11.浮动元素的补充