css基础教程【学习笔记】，吊打面试官 redis

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新Web前端全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip1024c （备注前端）

正文

}

div {

text-indent：2em；

}

• em 是一个相对单位，就是当前元素（font-size) 1 个文字的大小, 如果当前元素没有设置大小，则会按照父元素的 1 个文字大小。

5. 字间距和单词间距

• 字间距： letter-spacing:2px

• 单词间距：word-spacing:10px

6. 颜色半透明(css3)

color:rgba(r,g,b,a) a是alpha 透明的意思 取值范围0-1

7. 文字阴影(css3)

text-shadow:水平距离 垂直距离 模糊距离 阴影颜色

例：

你是阴影，我是火影

8. 文字修饰

text-decoration：

text-decoration：text-decoration-line || text-decoration-style || text-decoration-color

text-decoration-line： 指定文本装饰的种类，

可取值：none | underline | overline | line-through | blink text-decoration-

style： 指定文本装饰的样式。

text-decoration-color： 指定文本装饰的颜色。

八.css样式表：

---

• 按照 CSS 样式书写的位置（或者引入的方式），CSS 样式表可以分为三大类：

1.内部样式表（嵌入式）

• 内部样式表（内嵌样式表）是写到html页面内部. 是将所有的 CSS 代码抽取出来，单独放到一个

语法：

1. style 标签理论上可以放在 HTML 文档的任何地方，但一般会放在文档的head标签中

2. 通过此种方式，可以方便控制当前整个页面中的元素样式设置

3. 代码结构清晰，但是并没有实现结构与样式完全分离

4. 使用内部样式表设定 CSS，通常也被称为嵌入式引入，这种方式是我们练习时常用的方式

2.行内样式表（行内式）

• 行内样式表（内联样式表,还有人称为行间样式，内嵌样式）是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式.

语法：

青春不常在，抓紧谈恋爱

1. style 其实就是标签的属性

在双引号中间，写法要符合 CSS 规范

2. 可以控制当前的标签设置样式

3. 由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用

4. 使用行内样式表设定 CSS，通常也被称为行内式引入

3.外部样式表（链接式）

• 实际开发都是外部样式表. 适合于样式比较多的情况. 核心是:样式单独写到CSS 文件中，之后把CSS文件引入到 HTML 页面中使用.

• 引入外部样式表分为两步：

1. 新建一个后缀名为 .css 的样式文件，把所有 CSS 代码都放入此文件中。

2. 在 HTML 页面中，使用 标签引入这个文件。

语法：

• href:定义所链接外部样式表文件的uRL，可以是相对路径，也可以是绝对路径。

• type:定义所链接文档的类型，在这里需要指定为"text/css"，表示链接的外部文件为css样式表。

• rel:定义当前文挡与被链接文档之间的关系，在这里需要指定为"stylesheet"，表示被链接的文档是一个样式表文件

九.css的显示模式

---

1、什么是元素的显示模式

• 定义：

元素显示模式就是元素（标签）以什么方式进行显示，

比如div自己占一行，

比如一行可以放多个span。

• 作用：

网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。

2、元素显示模式的分类

2.1、块元素

• 常见的块元素：

~

、

、

、

• 、
  1. 、

标签是最典型的块元素。

• 块级元素的特点：

• 比较霸道，自己独占一行。

• 高度，宽度、外边距以及内边距都可以控制。

• 宽度默认是容器（父级宽度）的100%。

• 是一个容器及盒子，里面可以放行内或者块级元素。

• 注意： 文字类的元素内不能放块级元素

标签主要用于存放文字，因此

里面不能放块级元素，特别是不能放

同理，

~

等都是文字类块级标签，里面也不能放其他块级元素

2.2、行内元素

常见的行内元素：

、、、、、、、、、

标签定义下划线文本。HTML 5 中不再支持该标签。

标签定义加删除线的文本。HTML 5 中不再支持这个标签。请使用 CSS 代替。

标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

• 行内元素的特点：

• 相邻行内元素在一行上，一行可以显示多个。

• 高、宽直接设置是无效的。

• 默认宽度就是它本身内容的宽度。

• 行内元素只能容纳文本或其他行内元素。

• 注意：

• 链接里面不能再放链接

• 特殊情况链接 a 里面可以放块级元素，但是给 a 转换一下块级模式最安全

2.3、行内块元素

常见的行内块标签：

、、

标签定义图像。

标签定义输入字段，用户可在其中输入数据。

标签定义表格中的一个单元格。

​ 它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。

• 行内块元素的特点：

• 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。

• 一行可以显示多个（行内元素特点）。

• 默认宽度就是它本身内容的宽度（行内元素特点）。

• 高度，行高、外边距以及内边距都可以控制（块级元素特点）。

• 学习元素显示模式的主要目的就是分清它们各自的特点，当我们网页布局的时候，在合适的地方用合适的标签元素。

3、元素显示模式的转换

• 简单理解:

​ 一个模式的元素需要另外一种模式的特性

​ 比如想要增加链接 a 的触发范围。

• 转换方式

• 转换为块元素：display:block;

• 转换为行内元素：display:inline;

• 转换为行内块：display: inline-block;

4、单行文字垂直居中的代码

• 解决方案:

​ 让文字的行高等于盒子的高度 就可以让文字在当前盒子内垂直居中

• 简单理解:

• 行高的上空隙和下空隙把文字挤到中间了，

• 如果行高小于盒子高度,文字会偏上，

• 如果行高大于盒子高度,则文字偏下。

十、css的复合选择器

---

1、什么是复合选择器？

​ 在 CSS 中，可以根据选择器的类型把选择器分为***基础选择器***和***复合选择器***，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。

​ 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的，可以更准确、更高效的选择目标元素（标签）

​ 常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等

2、后代选择器 (重要）

1. 定义：

​ 后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

2. 语法：

元素1 元素2 {样式声明}

上述语法表示选择元素 1 里面的所有元素 2 (后代元素)。

​

语法说明：

• 元素1 和 元素2 中间用空格隔开

• 元素1 是父级，元素2 是子级，最终选择的是元素2

• 元素2 可以是儿子，也可以是孙子等，只要是元素1 的后代即可

• 元素1 和 元素2 可以是任意基础选择器

3、子选择器 (重要）

1. 定义：

​ 子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。

​ （简单理解就是选亲儿子元素）

2. 语法：

元素1>元素2 {样式声明}

​ 上述语法表示选择元素1 里面的所有直接后代(子元素) 元素2。

语法说明：

• 元素1 和 元素2 中间用 大于号 隔开

• 元素1 是父级，元素2 是子级，最终选择的是元素2

• 元素2 必须是亲儿子，其孙子、重孙之类都不归他管. 你也可以叫他 亲儿子选择器

4、并集选择器 (重要）

1. 定义：

并集选择器可以选择多组标签, 同时为他们定义相同的样式，通常用于集体声明。并集选择器是各选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分。

语法：

元素1,元素2 {样式声明}

​ 上述语法表示选择元素1 和 元素2。

语法说明：

• 元素1 和 元素2 中间用逗号隔开

• 逗号可以理解为和的意思

• 并集选择器通常用于集体声明

5、交集选择器

1. 定义：

交集选择器由两个或多个基础选择器。通过不同的方式组合而成目的是为了选择更准确更精细的目标元素标签。

2. 语法：

元素1.元素2 {样式声明}

​ 即属于元素1，又属于元素2的标签

语法说明：

• 元素1 和 元素2 中间用"."隔开

• "."可以理解为乘的意思

7.属性选择器

1. 定义：

选取标签带有某些特殊属性的选择器，我们称为属性选择器

2. 语法：

标签[属性] {样式声明}

标签[属性=属性值] {样式声明}

标签[属性^=属性值] {样式声明} 选择属性的值是以这个属性值开头的

标签[属性$=属性值] {样式声明} 选择属性的值是以这个属性值结尾的

标签[属性*=属性值] {样式声明} 选择属性的值是包含这个属性值即可

8、伪元素选择器

语法：

伪元素选择器书写最大的特点是用双冒号（::）表示

::first-letter 选择第一个字

::first-line 选择第一行

::selection 当我们选中文字的时候，可以变化的样式

E::before和E::after

在E元素内部的开始位置和结束位置创建一个元素，该元素为行内元素，且必须结合content属性使用

示例：

今年

插入后 俺 和 18岁 都属于这个div的内部元素

十一、css书写规范

---

空格规范

• 【强制】选择器与" {" 之间必须包含空格

• 【强制】属性名与之后的 ":"之间不允许包含空格， ":"与属性值之间必须包含空格

选择器规范

• 【强制】并集选择器，每个选择器声明独占一行

• 【建议】[子]选择器的嵌套层级不大于3级，位置靠后的限定条件应尽可能准确

属性规范

• 【强制】属性另起一行

• 【强制】属性定义后分号结尾

十二、css的背景

---

通过 CSS 背景属性，可以给页面元素添加背景样式。

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

1、背景颜色

background-color 定义元素的背景颜色

元素背景颜色默认值是 transparent（透明）

background-color: transparent;

2、背景图片

background-image 定义元素的背景图片

background-image: none|url(url);

none 无背景图

url()使用绝对路径和相对路径

其他说明：

• 实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置. (精灵图也是一种运用场景)

• 注意：背景图片后面的地址，千万不要忘记加 URL， 同时里面的路径不要加引号。

3、背景平铺

background-repeat 设置元素背景图像的平铺

repeat-x： 背景图像在横向上平铺

repeat-y： 背景图像在纵向上平铺

repeat： 背景图像在横向和纵向平铺

no-repeat： 背景图像不平铺

4、背景图片位置

background-position 属性可以改变图片在背景中的位置

background-position: x y;

center： 背景图像横向或纵向居中。

left： 背景图像从元素左边开始出现。

right： 背景图像从元素右边开始出现。

top： 背景图像从元素顶部开始出现。

bottom： 背景图像从元素底部开始出现。

默认左上角

background-position: left top;

1、参数是方位名词

​ 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致

如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐

2、参数是精确单位

如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标

如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中

3、参数是混合单位

如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标

5、背景图片固定

样式名称：

background-attachment 设置或检索背景图像是随对象内容滚动还是固定的

fixed： 背景图像相对于视口（viewport）固定。

scroll： 背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，

因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。

其他说明：

background-attachment 后期可以制作视差滚动的效果。

6、背景样式合写

背景合写样式：

background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;

7、背景色半透明

background-color: rgba(0, 0, 0, 0.5);

• 背景半透明是指盒子背景半透明，盒子里面的内容不受影响

• CSS3 新增属性，是 IE9+ 版本浏览器才支持的，但是现在实际开发,我们不太关注兼容性写法了,可以放心使用

8.背景缩放

background-size： [ | | auto ]{1,2} | cover | contain

： 用长度值指定背景图像大小。不允许负值。

： 用百分比指定背景图像大小。不允许负值。

auto： 背景图像的真实大小。

cover： 将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。

contain： 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。

9.多背景图片

• .一个元素可以设置多重背景图像。

• 每组属性间使用逗号分隔。

• 如果设置的多重背景图之间存在着交集（即存在着重叠关系)，* 前面的背景图会覆盖在后面的背景图之上。·

• 为了避免背景色将图像盖住，背景色通常都定义在最后一组上

background: url(test1.jpg) no-repeat left top,

url(test2.jpg) no-repeat right bottom #aaa;

10.凹凸文字的效果

我是凸起的文字

我是凹下的文字

十三、css三大特性

---

1、层叠性

• 相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题

• 层叠性原则:

• 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式

• 样式不冲突，不会层叠

2、继承性

CSS中的继承: 子标签会继承父标签的某些样式，如文本颜色和字号。恰当地使用继承可以简化代码，降低 CSS 样式的复杂性。

子元素可以继承父元素的样式：

​ （text-，font-，line-这些元素开头的可以继承，以及color属性）

行高的继承性：

body {

font:12px/1.5 Microsoft YaHei；

}

• 行高可以跟单位也可以不跟单位

• 如果子元素没有设置行高，则会继承父元素的行高为 1.5

• 此时子元素的行高是：当前子元素的文字大小 * 1.5

• body 行高 1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高

3、优先级

当同一个元素指定多个选择器，就会有优先级的产生。

• 选择器相同，则执行层叠性

• 选择器不同，则根据选择器权重执行

选择器优先级计算表格：

优先级注意点:

1. 权重是有4组数字组成,但是不会有进位。

2. 可以理解为类选择器永远大于元素选择器, id选择器永远大于类选择器,以此类推…

3. 等级判断从左向右，如果某一位数值相同，则判断下一位数值。

4. 继承的权重是0， 如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是 0。

权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重。

• div ul li ------> 0,0,0,3

• .nav ul li ------> 0,0,1,2

• a:hover -----—> 0,0,1,1

• .nav a ------> 0,0,1,1

!import写的位置

!DOCTYPE html>

我是啥颜色

十五、盒子模型

---

1、网页布局的本质

• 网页布局的核心本质： 就是利用 CSS 摆盒子。

• 网页布局过程：

1. 先准备好相关的网页元素，网页元素基本都是盒子 Box 。

2. 利用 CSS 设置好盒子样式，然后摆放到相应位置。

3. 往盒子里面装内容

2、盒子模型（Box Model）组成

• 盒子模型：把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

• CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距、和 实际内容

3、边框（border）

3.1、边框的使用

1. border可以设置元素的边框。边框有三部分组成：边框宽度(粗细) 边框样式 边框颜色；

2. 语法：

border : border-width || border-style || border-color;

边框粗细||边框样式||边框颜色

• 边框样式 border-style 可以设置如下值：

• none：没有边框即忽略所有边框的宽度（默认值）

• solid：边框为单实线(最为常用的)

• dashed：边框为虚线

• dotted：边框为点线

3. 边框的合写分写

• 边框简写：

border: 1px solid red;

没有边框

border: 0;

边框分开写法：

border-top: 1px solid red; /* 只设定上边框， 其余同理 */

border, border-top, border–right, border-bottom, border-left。

3.2、表格的细线边框

1、border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。

2、语法：

border-collapse:collapse;

collapse 单词是合并的意思

border-collapse: collapse; 表示相邻边框合并在一起

3.3、边框会影响盒子实际大小

边框会额外增加盒子的实际大小。因此我们有两种方案解决：

• 测量盒子大小的时候,不量边框。

• 如果测量的时候包含了边框,则需要 width/height 减去边框宽度

3.4、圆角边框

border-radius：：[ | ]{1,4}

取值：

： 用长度值定义圆形半径或椭圆的半长轴，半短轴。不允许负值

： 用百分比定义圆形半径或椭圆的半长轴，半短轴。

• 水平方向百分比参照元素宽度（非内容宽度），

• 垂直方向参照元素高度。不允许负值

4、内边距（padding）

4.1、内边距的使用方式

1. padding 属性用于设置内边距，即边框与内容之间的距离。

2. 语法：

padding,padding-top,padding-right,padding-bottom,padding-left

padding-top: 5px;

合写属性：

4.2、内边距会影响盒子实际大小

1、当我们给盒子指定 padding 值之后，发生了 2 件事情：

1. 内容和边框有了距离，添加了内边距。

2. padding影响了盒子实际大小。

2、内边距对盒子大小的影响：

• 如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。

• 如何盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小。

3、解决方案：

​ 如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可。

5、外边距（margin）

5.1、外边距的使用方式

margin 属性用于设置外边距，即控制盒子和盒子之间的距离。

margin：[ | | auto ]{1,4}

拆分属性：margin-top,margin-bottom,margin-right,margin-left

5.2、外边距典型应用–水平居中

外边距可以让块级盒子水平居中的两个条件：

• 盒子必须指定了宽度（width）。

• 盒子左右的外边距都设置为 auto 。

常见的写法，以下三种都可以：

水平居中：

margin-left: auto; margin-right: auto;

margin: auto;

margin: 0 auto;

注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可。

5.3、外边距合并

使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并。

主要有两种情况:

1、相邻块元素垂直外边距的合并

​ 当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。

解决方案：

尽量只给一个盒子添加 margin 值。

2、嵌套块元素垂直外边距的塌陷

​ 对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

解决方案：

• 可以为父元素定义上边框。

• 可以为父元素定义上内边距。

• 可以为父元素添加 overflow:hidden。

5.4、清除内外边距**[几乎写css都要加]

​ 网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。

• {

padding:0; /* 清除内边距 */

margin:0; /* 清除外边距 */

}

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距（margin设置了也没有效果,padding设置了效果不对）。但是转换为块级和行内块元素就可以了

6、计算盒子大小

• 外盒尺寸计算(元素空间尺寸)

Element空间高度= content height + padding + border + margin

Element空间宽度= content width + padding + border + margin/*

• 内盒尺寸计算(元素实际大小)

Element Height = content height + padding + border (Height为内容高度)

Elemert width - content width + padding + border (width为内容宽度)

• 学会计算盒子尺寸：设置好盒子的宽度和高度，padding影响实际盒子大小需要注意

• 宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（ img标签和 input除外）。

• 计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。

• 如果一个盒子没有给定宽度/高度或者继承父亲的宽度/高鏖，则padding 不会影响本盒子大小

7、盒子模型布局稳定性

• 开始学习盒子模型，同学们最大的困惑就是，分不清内外边距的使用，什么情况下使用内边距，什么情况下使用外边距?

答案是:其实他们大部分情况下是可以混用的。就是说，你用内边距也可以，用外边距也可以。你觉得哪个方便，就用哪个。

但是，总有一个最好用的吧，我们根据稳定性来分，建议如下:

• 按照优先使用宽度(width)其次使用内边距(padding)再次外边距（(margin).

• **width > padding >margin **

原因:

1. margin 会有外边距合并还有ie6下面margin加倍的bug(讨厌）所以最后使用。

2. padding 会影响盒子大小，需要进行加减计算（麻烦）其次使用。

3. width 没有问题，我们经常使用宽度剩余法高度剩余法来做。

8、CSS3盒子模型

box-sizing: border-box; 设置盒子大小后，padding和border不会撑开盒子

box-sizing: content-box; 和之前说明的特性相同

9、盒子阴影

box-shadow: 水平位置 垂直距离 模糊距离 阴影尺寸 阴影颜色 内外阴影;

内阴影：inset ，外阴影需省略

只有前两个是必须 ，其他可选

十六、浮动

---

1、传统网页布局的三种方式

​ CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序)：

• 普通流（标准流）

• 浮动

• 定位

这三种布局方式都是用来摆放盒子的，盒子摆放到合适位置，布局自然就完成了。

注意：实际开发中，一个页面基本都包含了这三种布局方式

2、标准流（普通流/文档流）

所谓的标准流: 就是标签按照规定好默认方式排列

1. 块级元素会独占一行，从上向下顺序排列。常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table

2. 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。常用元素：span、a、i、em 等

以上都是标准流布局，我们前面学习的就是标准流，标准流是最基本的布局方式。

3、为什么需要浮动？

​ 总结： 有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。 因为浮动可以改变元素标签默认的排列方式.

​ 浮动最典型的应用：可以让多个块级元素一行内排列显示。

​ 网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

4、什么是浮动？

元素的浮动是指设置了浮动属性的元素会脱高标准昔通流的控制，移动到其父元素中指定位置的过程。

​ float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

语法：

选择器 { float: 属性值; }

none 元素不浮动

left 元素向左浮动 默认值

right 元素向右浮动

5、浮动特性

加了浮动之后的元素,会具有很多特性,需要我们掌握的.

1. 浮动元素会脱离标准流(脱标：浮动的盒子不再保留原先的位置)

2. 浮动的元素会一行内显示并且元素顶部对齐

注意：

​ 浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。

3. 浮动的元素会具有行内块元素的特性

​ 浮动元素的大小根据内容来决定

​ 浮动的盒子中间是没有缝隙的

6、浮动元素经常和标准流父级搭配使用

• 为了约束浮动元素位置, 我们网页布局一般采取的策略是:

先用标准流父元素排列上下位置, 之后内部子元素采取浮动排列左右位置. 符合网页布局第一准侧

• 浮动首先创建包含块的概念〈包赢）。就是说，浮动的元素总是找理它最近的父级元素对齐。但是不会超出内边距的范围。

7、常见网页布局

浮动布局注意点

1. 浮动和标准流的父盒子搭配。

先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置

2. 一个元素浮动了，理论上其余的兄弟元素也要浮动。

一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动，以防止引起问题。

浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.

3. 元素添加浮动后，元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认的内容多少

十七、版心和布局流程

---

• 阅读报纸时容易发现，虽然报纸中的内容很多，但是经过合理地排版，版面依然清晰、易读。同样，在制作网页时，要想使页面结构清晰、有条理，也需要对网页进行“排版"。

• “版心”(可视区)是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。

• 布局流程

为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，具体如下:

1. 确定页面的版心(可视区)。

2. 分析页面中的行模块，以及每个行模块中的列模块。

3. 制作HTML结构。

4. CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。一列固定宽度且居中

• 版型

• 一列固定宽度且居中

• 两列左窄右宽型

• 通栏平均分布型（下图）（最上面和最下面是通栏）

中间分栏使用的列表，

取消列表的默认样式

list-style: none;

• 8、清除浮动

  ---

  1、为什么需要清除浮动？

  ​ 由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会影响下面的标准流盒子。

  

  2、清除浮动本质

  清除浮动的本质是清除浮动元素造成的影响：浮动的子标签无法撑开父盒子的高度

  注意：

  • 如果父盒子本身有高度，则不需要清除浮动

  • 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。

  • 父级有了高度，就不会影响下面的标准流了

  3、清除浮动样式

  语法：

  选择器{clear:属性值;}

  left：不允许左侧有浮动元素(清除左侧浮动的影响)

  right:不允许右侧有浮动元素(清除右侧浮动的影响)

  both:同时清除左右两侧浮动的影响

  我们实际工作中， 几乎只用 clear: both;

  清除浮动的策略是: 闭合浮动.

  4、清除浮动的多种方式

  4.1、额外标签法

  额外标签法也称为隔墙法，是 W3C 推荐的做法。

  使用方式：

  ​ 额外标签法会在浮动元素末尾添加一个空的标签。

  例如

  ，或者其他标签（如
  等）。

  css中一般给这个div定义类，然后在上方head中 style标签中给

  • 优点： 通俗易懂，书写方便

  • 缺点： 添加许多无意义的标签，结构化较差

  • 注意： 要求这个新的空标签必须是块级元素。

  总结:

  ​ 1、清除浮动本质是?

  ​ 清除浮动的本质是清除浮动元素脱离标准流造成的影响

  ​ 2、清除浮动策略是?

  ​ 闭合浮动. 只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子.

  ​ 3、额外标签法?

  ​ 隔墙法, 就是在最后一个浮动的子元素后面添加一个额外标签, 添加 清除浮动样式.

  ​ 实际工作可能会遇到,但是不常用

  4.2、父级添加 overflow 属性

  可以给父级添加 overflow 属性，将其属性值设置为 hidden、 auto 或 scroll 。

  例如：

  overflow:hidden | auto | scroll;

  优点：代码简洁

  缺点：无法显示溢出的部分

  注意：是给父元素添加代码

  4.3、父级添加after伪元素

  :after 方式是额外标签法的升级版。给父元素添加：

  .clearfix:after {

  content: “.”; /内容为小点，尽量加不要空，否则旧版本浏览器有空隙/

  display: block;

  height: 0;

  clear: both;

  visibility: hidden; /隐藏盒子/

  }

  .clearfix { /* IE6-7 专有 带有这个*的属性 只有ie6-7才执行 */

  /zoom就是IE6-7清除浮动的方式/

  *zoom: 1;

  }

  优点：没有增加标签，结构更简单

  缺点：照顾低版本浏览器

  代表网站： 百度、淘宝网、网易等

  4.4、父级添加双伪元素

  给父元素添加

  .clearfix:before,.clearfix:after {

  content:“”;

  display:table; /触发bfc 防止外边距合并/

  }

  .clearfix:after {

  clear:both;

  }

  .clearfix {

  *zoom:1;

  }

  优点：代码更简洁

  缺点：照顾低版本浏览器

  代表网站：小米、腾讯等

  总结

  为什么需要清除浮动？

  1. 父级没高度。

  2. 子盒子浮动了。

  3. 影响下面布局了，我们就应该清除浮动了。

  

  十八、定位(position) 介绍

  ---

  1.1 为什么使用定位

  我们先来看一个效果，同时思考一下用标准流或浮动能否实现类似的效果？

  场景1： 某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子.

  

  场景2：当我们滚动窗口的时候，盒子是固定屏幕某个位置的。

  

  结论**：要实现以上效果，**标准流 或 浮动都无法快速实现

  所以：

  1.浮动可以让多个块级盒子一行没有缝隙排列显示， 经常用于横向排列盒子。

  2.定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。

  1.2 定位组成

  定位：将盒子定在某一个位置，所以定位也是在摆放盒子， 按照定位的方式移动盒子

  定位也是用来布局的，它有两部分组成：

  定位 = 定位模式 + 边偏移

  定位模式 用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

  1.2.1 边偏移（方位名词）

  边偏移 就是定位的盒子移动到最终位置。有 top、bottom、left 和 right 4 个属性。

  | 边偏移属性 | 示例 | 描述 |

  | — | :-- | — |

  | top | top: 80px | 顶端偏移量，定义元素相对于其父元素上边线的距离。 |

  | bottom | bottom: 80px | 底部偏移量，定义元素相对于其父元素下边线的距离。 |

  | left | left: 80px | 左侧偏移量，定义元素相对于其父元素左边线的距离。 |

  | right | right: 80px | 右侧偏移量，定义元素相对于其父元素右边线的距离 |

  定位的盒子有了边偏移才有价值。 一般情况下，凡是有定位地方必定有边偏移。

  **top与bottom 不能同时出现 left和right不能同时出现 **

  1.2.2 定位模式 (position)

  在 CSS 中，通过 position 属性定义元素的定位模式，语法如下：

  选择器 {

  position: 属性值;

  }

  定位模式是有不同分类的，在不同情况下，我们用到不同的定位模式。

  定位模式决定元素的定位方式 ，它通过 CSS 的 position 属性来设置，其值可以分为四个：

  | 值 | 语义 |

  | — | :-: |

  | static | 静态定位 |

  | relative | 相对定位 |

  | absolute | 绝对定位 |

  | fixed | 固定定位 |

  

  1.3 定位模式介绍

  1.3.1. 静态定位(static) - 了解

  • 静态定位是元素的默认定位方式，无定位的意思。它相当于 border 里面的none，静态定位static，不要定位的时候用。

  • 语法：

  选择器 {

  position: static;

  }

  • 静态定位 按照标准流特性摆放位置，它没有边偏移。

  • 静态定位在布局时我们几乎不用的

  1.3.2. 相对定位(relative) - 重要

  • 相对定位是元素在移动位置的时候，是相对于它自己原来的位置来说的（自恋型）。

  • 语法：

  选择器 {

  position: relative;

  }

  • 相对定位的特点：（务必记住）

  • 1.它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。

  • 2.原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。

  因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。。。

  • 效果图：

  

  1.3.3. 绝对定位(absolute) - 重要

  1.3.3.1 绝对定位的介绍

  • 绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（拼爹型）。

  • 语法：

  选择器 {

  position: absolute;

  }

  1. 完全脱标 —— 完全不占位置；

  2. 父元素没有定位，则以浏览器为准定位（Document 文档）。

  

  3. 父元素要有定位
  • 元素将依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

  

  • 绝对定位的特点总结：（务必记住）

  1.如果没有祖先元素或者祖先元素没有定位，则以浏览器为基准定位（Document 文档）。

  2.如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。

  3.绝对定位不再占有原先的位置。所以绝对定位是脱离标准流的。（脱标）

  1.3.3.2 定位口诀 —— 子绝父相

  弄清楚这个口诀，就明白了绝对定位和相对定位的使用场景。

  这个**“子绝父相”太重要了，是我们学习定位的口诀**，是定位中最常用的一种方式这句话的意思是：子级是绝对定位的话，父级要用相对定位。

  因为绝对定位的盒子是拼爹的，所以要和父级搭配一起来使用。

  ①子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。

  ②父盒子需要加定位限制子盒子在父盒子内显示。

  ③父盒子布局时，需要占有位置，因此父亲只能是相对定位。

  这就是子绝父相的由来，所以相对定位经常用来作为绝对定位的父级。

  总结： 因为父级需要占有位置，因此是相对定位， 子盒子不需要占有位置，则是绝对定位

  当然，子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到。

  1.3.3.3 绝对定位的盒子居中

  注意：加了绝对定位/固定定位的盒子不能通过设置 margin: auto 设置水平居中。

  但是可以通过以下计算方法实现水平和垂直居中，可以按照下图的方法：

  

  1. left: 50%;：让盒子的左侧移动到父级元素的水平中心位置；

  2. margin-left: -100px;：让盒子向左移动自身宽度的一半。

  疑问：为什么在布局时，子级元素使用绝对定位时，父级元素就要用相对定位呢？

  观察下图，思考一下在布局时，左右两个方向的箭头图片以及父级盒子的定位方式。

  

  

  分析：

  1. 方向箭头叠加在其他图片上方，应该使用绝对定位，因为绝对定位完全脱标，完全不占位置。

  2. 父级盒子应该使用相对定位，因为相对定位不脱标，后续盒子仍然以标准流的方式对待它。

  • 如果父级盒子也使用绝对定位，会完全脱标，那么下方的广告盒子会上移，这显然不是我们想要的。

  结论：父级要占有位置，子级要任意摆放，这就是子绝父相的由来。

  1.3.4. 固定定位(fixed) - 重要

  • 固定定位是元素固定于浏览器可视区的位置。（认死理型） 主要使用场景： 可以在浏览器页面滚动时元素的位置不会改变。

  • 语法：

  选择器 {

  position: fixed;

  }

  • 固定定位的特点：（务必记住）：

  1.以浏览器的可视窗口为参照点移动元素。

  • 跟父元素没有任何关系

  • 不随滚动条滚动。

  2.固定定位不在占有原先的位置。

  • 固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。（认死理型）

  • 完全脱标—— 完全不占位置；

  • 只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性 来设置元素的位置；

  • 跟父元素没有任何关系；单独使用的

  • 不随滚动条滚动。

  固定定位举例：

  

  提示：IE 6 等低版本浏览器不支持固定定位。

  1.3.5 粘性定位(sticky) - 了解

  • 粘性定位可以被认为是相对定位和固定定位的混合。 Sticky 粘性的

  • 语法：

  选择器 {

  position: sticky;

  top: 10px;

  }

  • 粘性定位的特点：

  1.以浏览器的可视窗口为参照点移动元素（固定定位特点）

  2.粘性定位占有原先的位置（相对定位特点）

  3.必须添加 top 、left、right、bottom 其中一个才有效

  跟页面滚动搭配使用。 兼容性较差，IE 不支持。

  1.3.6 堆叠顺序（z-index）

  • 在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z-index 来控制盒子的前后次序 (z轴)

  • 语法：

  选择器 {

  z-index: 1;

  }

  • z-index 的特性如下：

  1. 属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；

  2. 如果属性值相同，则按照书写顺序，后来居上；

  3. 数字后面不能加单位。

  注意：z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。

  • 应用 z-index 层叠等级属性可以调整盒子的堆叠顺序。如下图所示：

  

  案例演示：堆叠顺序。

  1.3.7 定位总结

  | 定位模式 | 是否脱标 | 移动位置 | 是否常用 |

  | — | — | — | — |

  | static 静态定位 | 否 | 不能使用边偏移 | 很少 |

  | relative 相对定位 | 否 (占有位置) | 相对于自身位置移动 | 基本单独使用 |

  | absolute绝对定位 | 是（不占有位置） | 带有定位的父级 | 要和定位父级元素搭配使用 |

  | fixed 固定定位 | 是（不占有位置） | 浏览器可视区 | 单独使用，不需要父级 |

  | sticky 粘性定位 | 否 (占有位置) | 浏览器可视区 | 当前阶段少 |

  • 一定记住 相对定位、固定定位、绝对定位 两个大的特点： 1. 是否占有位置（脱标否） 2. 以谁为基准点移动位置。

  • 学习定位重点学会子绝父相。

  • 注意：

  1. 边偏移需要和定位模式联合使用，单独使用无效；

  2. top 和 bottom 不要同时使用；

  3. left 和 right 不要同时使用。

  1.3.8 定位模式转换

  跟浮动一样，元素添加了绝对定位和固定定位之后，元素模式也会发生转换，都转换为行内块模式,

  因此比如行内元素如果添加了绝对定位或者固定定位后浮动后，可以不用转换模式，直接给高度和宽度就可以了。

  1.3.9 绝对定位（固定定位）会完全压住盒子

  浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）

  但是绝对定位（固定定位） 会压住下面标准流所有的内容。

  浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。 文字会围绕浮动元素

  十九、 元素的显示与隐藏

  ---

  • 目的（本质）

  ​ 让一个元素在页面中消失或者显示出来

  • 场景

  ​ 类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！

  1. display 显示（重点）

  • display 设置或检索对象是否及如何显示。

  display: none 隐藏对象

  display：block 除了转换为块级元素之外，同时还有显示元素的意思。

  • 特点： display 隐藏元素后，不再占有原来的位置。

  • 后面应用及其广泛，搭配 JS 可以做很多的网页特效。实际开发场景：

  配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛

  

  2. visibility 可见性 （了解）

  • visibility 属性用于指定一个元素应可见还是隐藏。

  visibility：visible ; 　元素可视

  visibility：hidden; 　 元素隐藏

  • 特点：visibility 隐藏元素后，继续占有原来的位置。（停职留薪）

  • 如果隐藏元素想要原来位置， 就用 visibility：hidden

  • 如果隐藏元素不想要原来位置， 就用 display：none (用处更多 重点）

  

  3. overflow 溢出（重点）

  • overflow 属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度） 时，会发生什么。

  | 属性值 | 描述 |

  | — | — |

  | visible | 不剪切内容也不添加滚动条 |

  | hidden | 不显示超过对象尺寸的内容，超出的部分隐藏掉 |

  | scroll | 不管超出内容否，总是显示滚动条 |

  | auto | 超出自动显示滚动条，不超出不显示滚动条 |

  • 一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。

  • 但是如果有定位的盒子， 请慎用overflow:hidden 因为它会隐藏多余的部分。

  

  • 实际开发场景：

  1. 清除浮动

  2. 隐藏超出内容，隐藏掉, 不允许内容超过父盒子。

  4. 显示与隐藏总结

  | 属性 | 区别 | 用途 |

  | — | — | — |

  | display 显示 （重点） | 隐藏对象，不保留位置 | 配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛 |

  | visibility 可见性 （了解） | 隐藏对象，保留位置 | 使用较少 |

  | overflow 溢出（重点） | 只是隐藏超出大小的部分 | 1. 可以清除浮动 2. 保证盒子里面的内容不会超出该盒子范围 |

  5. 文本遇到边框自动换行

  word-break属性规定自动换行的处理方法。通过该属性，可以让浏览器实现在任意位置换行。语法：word-break: normal|break-all|keep-all;

  | 值 | 描述 |

  | :-- | :-- |

  | normal | 使用浏览器默认的换行规则。 |

  | break-all | 允许在单词内换行。 |

  | keep-all | 只能在半角空格或连字符处换行。 |

  二十、CSS用户界面样式

  ---

  所谓的界面样式，就是更改一些用户操作样式，比如更改用户的鼠标样式，表单轮廓等。但是比如滚动条的样式改动受到了很多浏览器的抵制，因此我们就放弃了。防止表单域拖拽

  1. 鼠标样式cursor

  设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

  cursor : default小白箭头| pointer小手| move移动|text文本

  鼠标放我身上查看效果哦:
• 我是小白
• 我是小手
• 我是移动
• 我是文本

• 尽量不要用hand(也是小手) 因为火狐不支持; pointer ie6以上都支持的尽量用

  2. 轮廓outline

  是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

  outline : outline-color |loutline-style ll outline-width

  但是我们都不关心可以设置多少，我们平时都是去掉的。

  最直接的写法是:outline: 0;

  <input type="text"style="outline: 0; " />

  3. 防止拖拽文本域resize

  resize: none这个单词可以防止火狐谷歌等浏览器随意的拖动文本域。

  右下角可以拖拽:

  右下角不可以拖拽:

  4. 垂直对齐vertical-align

  4.1 行内块和文字对齐

  有宽度的块级元素居中对齐，是margin: 0 auto;

  文字居中对齐，是text-align: center;

  vertical-align垂直对齐，这个看上去很美好的一个属性，实际有着不可捉摸的脾气

  vertical-align 对块级元素无效

  vertical-align: baseline|top|middle|bottom

  设置或检索对象内容的垂直对其方式。

  vertical-align不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，特别是行内块元素

  通常用来控制图片|表单与文字的对齐

  图片文字默认为基线对齐

  

  4.2 去除图片底侧缝隙

  有个很重要特性你要记住，图片或者表单等***行内块**元素，**他的_底线会和父级盒子的_基线***对齐。这样会造成一个问题，就是图片底侧会有一个空白缝隙。

  I

  解决方法一：

  display: block; /转化为块级元素/

  解决方法二：

  vertical-align: top|middle /top用的多/

  5. 溢出的文字隐藏

  5.1 word-break:自动换行

  normal 使用浏览器默认的换行规则。

  break-all 允许在单词内换行。

  keep-all 只能在半角空格或连字符处换行。主要处理英文单词

  5.2 white-space

  white-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容

  normal:默认处理方式

  nowrap :强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。

  5.3 text-overflow文字溢出

  text-overflow : clip | ellipsis

  设置或检索是否使用一个省略标记(…）标示对象内文本的溢出

  clip:不显示省略标记(…），而是简单的裁切

  ellipsis:当对象内文本溢出时显示省略标记（…)

  注意一定要首先强制一行内显示，再次和overflow属性搭配使用

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  5.4 多行文本溢出显示省略号（了解）

  多行文本溢出显示省略号，有较大兼容性问题，适合于webKit浏览器或移动端（移动端大部分是webkit内核）

  /*1. 超出的部分隐藏 */

  overflow: hidden;

  /*2. 文字用省略号替代超出的部分 */

  text-overflow: ellipsis;

  /* 3. 弹性伸缩盒子模型显示 */

  display: -webkit-box;

  /* 4. 限制在一个块元素显示的文本的行数 */

  -webkit-line-clamp: 2;

  /* 5. 设置或检索伸缩盒对象的子元素的排列方式 */

  -webkit-box-orient: vertical;

  更推荐让后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单。

  二十一、CSS精灵技术

  ---

  1. CSS精灵技术产生背景

  

  当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。

  然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的力加速度。为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧)。

  2. 精灵技术本质

  简单地说，CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。通常情况下，这个由很多小的背景图像合成的大图被称为精灵图

  3. 精灵技术的使用

  CSS精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图)，然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位，其中最关键的是使用background-position属性精确地定位。

  4. 制作精灵图

  CSS精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图)，那我们要做的，就是把小图拼合成一张大图。大部分情况下，精灵图都是网页美工做。

  我们精灵图上放的都是小的装饰性质的背景图片。插入图片不能往上放。我们精灵图的宽度取决于最宽的那个背景。

  我们可以横向摆放也可以纵向摆放，但是每个图片之间，间隔至少隔开偶数像素合适。在我们精灵图的最低端，留一片空隙,方便我们以后添加其他精灵图。

  结束语:小公司，背景图片很少的情况，没有必要使用精灵技术，维护成本太高。如果是背景图片比较多，可以建议使用精灵技术。

  二十二、字体图标

  ---

  图片是有诸多优点的，但是缺点很明显，比如图片不但增加了总文件的大小，还增加了很多额外的"http请求"，这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放"，因为图片放大和缩小会失真。我们后面会学习移动端响应式，很多情况下希望我们的图标是可以缩放的。此时，一个非常重要的技术出现了，额不是出现了，是以前就有，是被重新"宠幸"啦。。这就是字体图标（iconfont).

  字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。

  1. 字体图标优点

  灵活性：可以做出跟图片一样可以做的事情,改变透明度、旋转度，等…

  灵活性：但是本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果等等…

  灵活性：本身体积更小，但携带的信息并没有削减。

  兼容性：几乎支持所有的浏览器

  移动端设备必备良药…

  注意： 字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。

  1.如果遇到一些结构和样式比较简单的小图标，就用字体图标。

  2.如果遇到一些结构和样式复杂一点的小图片，就用精灵图。

  2. 字体图标使用流程

  总体来说，字体图标按照如下流程:

  

  假如图标是我们公司单独设计，那就需要第一步了，这个属于UI设计人员的工作，他们在 illustratorl或Sketch这类矢量图形软件里创建icon图标

  上传生成字体包

  当UI设计人员给我们svg文件的时候，我们需要转换成我们页面能使用的字体文件，而且需要生成的是兼容性的适合各个浏览器的。

  推荐网站： icomoon 字库 http://icomoon.io

  

  一般不自己做直接下载 使用步骤

  字体图标是一些网页常见的小图标，我们直接网上下载即可。 因此使用可以分为：

  1. 字体图标的下载

  2. 字体图标的引入 （引入到我们html页面中）

  3. 字体图标的追加 （以后添加新的小图标）

  3. 字体图标的下载

  推荐下载网站：

  • icomoon 字库 http://icomoon.io 推荐指数 ★★★★★

  IcoMoon 成立于 2011 年，推出了第一个自定义图标字体生成器，它允许用户选择所需要的图标，使它们成一字型。该字库内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢。

  1. 选择想要的字体图标点击右下角

  

  2. 进入新的页面确定选择的图标正确后，点击右下角的download

  

  • 阿里 iconfont 字库 http://www.iconfont.cn/ 推荐指数 ★★★★★

  这个是阿里妈妈 M2UX 的一个 iconfont 字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用 AI制作图标上传生成。 重点是，免费！

  4. 字体图标的引入

  下载完毕之后，注意原先的文件不要删，后面会用。

  1. 把下载包里面的 fonts 文件夹放入页面根目录下

  

  • 字体文件格式

  不同浏览器所支持的字体格式是不一样的，字体图标之所以兼容，就是因为包含了主流浏览器支持的字体文件。

  1. TureType( .ttf )格式.ttf字体是Windows和Mac的最常见的字体，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；

  2. Web Open Font Format( .woff )格式woff字体，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；

  3. Embedded Open Type( .eot )格式.eot字体是IE专用字体，支持这种字体的浏览器有IE4+；

  4. SVG( .svg )格式 .svg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；

  5. 在 CSS 样式中全局声明字体： 简单理解把这些字体文件通过css引入到我们页面中。

  一定注意字体文件路径的问题（无需背过，拷贝就好）

  @font-face {/声明字体，电脑中没有的字体，我们需要声明/

  font-family: ‘icomoon’;

  src: url(‘fonts/icomoon.eot?7kkyc2’);

  src: url(‘fonts/icomoon.eot?7kkyc2#iefix’) format(‘embedded-opentype’),

  url(‘fonts/icomoon.ttf?7kkyc2’) format(‘truetype’),

  url(‘fonts/icomoon.woff?7kkyc2’) format(‘woff’),

  url(‘fonts/icomoon.svg?7kkyc2#icomoon’) format(‘svg’);

  font-weight: normal;

  font-style: normal;

  }

  3. html 标签内添加小图标。

  下方页面是第一步下载的压缩包解压后的demo文件，用网页打开就可以看到。虽然图标看着相同但是每个图标负责对应的文字图标

  

  除了上面加入图标的方式，还可以借用伪类加入图标

  span::before {

  content: “\e91b”;

  }

  4. 给标签定义字体。

  span {

  font-family: “icomoon”;/一定保证与上面@font-face里面的font-family相同/

  }

  2.5 字体图标的追加

  如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。

  把压缩包里面的 selection.json 从新上传，然后选中自己想要新的图标，从新下载压缩包，并替换原来的文件即可。

  

  2.6 字体图标加载的原理：

  

  二十三、滑动门

  ---

  

  字

  二十四、伪元素的本质

  ---

  之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。是伪元素在html代码机构中的展现，可以看出伪元素的在html的结构无法审查

  • 类选择、伪类选择器就是选区对象

  • 伪元素选择器本质上是插入一个元素（标签盒子)，只不过是行内元素 span a

  注意

  1. 伪元素::before和::after添加的内容默认是inline元素，这个两个伪元素的content属性，表示伪元素的内容;设置::before和::after时必须设置其content属性，否则伪元素就不起作用。

  2. 伪元素是不占位置的。

  鼠标经过显示边框

  二十五、过渡（transition)

  ---

  • **过渡（transition)**CSS3中具有颠覆性的特征之一，我们可以在不使用Flash动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

  • 帧动画:通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片

  • 在CSS3里使用transition可以实现补间动画（过渡效果)，并且当前元素只要有"属性"发生变化时即存在两种状态我们用A和B代指)，就可以实现平滑的过渡，为了方便演示采用hover切换两种状态，但是并不仅仅局限于hover状态来实现过渡。

  • 语法格式:

  transition:要过渡的属性 花费时间 运动曲线 何时开始;

  如果有多组属性变化，还是用逗号隔开。

  <’ transition-property '>： 检索或设置对象中的参与过渡的属性

  <’ transition-duration '>： 检索或设置对象过渡的持续时间 默认是0 单位是s ，不能省略 ms

  <’ transition-timing-function '>： 检索或设置对象中过渡的动画类型 默认是“ease”

  <’ transition-delay '>： 检索或设置对象延迟过渡的时间 默认是0

  • 有过渡效果的属性：

  | transform | all |

  | — | — |

  | background-color | color |

  | background-image | only gradients |

  | background-position | percentage, length |

  | border-bottom-color | color |

  | border-bottom-width | length |

  | border-color | color |

  | border-left-color | color |

  | border-left-width | length |

  | border-right-color | color |

  | border-right-width | length |

  | border-spacing | length |

  | border-top-color | color |

  | border-top-width | length |

  | border-width | length |

  | bottom | length, percentage |

  | color | color |

  | crop | rectangle |

  | font-size | length, percentage |

  | font-weight | number |

  | grid-* | various |

  | height | length, percentage |

  | left | length, percentage |

  | letter-spacing | length |

  | line-height | number, length, percentage |

  | margin-bottom | length |

  最后

  面试一面会问很多基础问题，而这些基础问题基本上在网上搜索，面试题都会很多很多。最好把准备一下常见的面试问题，毕竟面试也相当与一次考试，所以找工作面试的准备千万别偷懒。面试就跟考试一样的，时间长了不复习，现场表现肯定不会太好。表现的不好面试官不可能说，我猜他没发挥好，我录用他吧。

  96道前端面试题：

  • 

  常用算法面试题：

  • 

  前端基础面试题：
  内容主要包括HTML，CSS，JavaScript，浏览器，性能优化

  • 

  网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

  需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）
  

  一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

  ze_18,color_FFFFFF,t_70,g_se,x_16)

  2.6 字体图标加载的原理：

  

  二十三、滑动门

  ---

  

  字

  二十四、伪元素的本质

  ---

  之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。是伪元素在html代码机构中的展现，可以看出伪元素的在html的结构无法审查

  • 类选择、伪类选择器就是选区对象

  • 伪元素选择器本质上是插入一个元素（标签盒子)，只不过是行内元素 span a

  注意

  1. 伪元素::before和::after添加的内容默认是inline元素，这个两个伪元素的content属性，表示伪元素的内容;设置::before和::after时必须设置其content属性，否则伪元素就不起作用。

  2. 伪元素是不占位置的。

  鼠标经过显示边框

  二十五、过渡（transition)

  ---

  • **过渡（transition)**CSS3中具有颠覆性的特征之一，我们可以在不使用Flash动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

  • 帧动画:通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片

  • 在CSS3里使用transition可以实现补间动画（过渡效果)，并且当前元素只要有"属性"发生变化时即存在两种状态我们用A和B代指)，就可以实现平滑的过渡，为了方便演示采用hover切换两种状态，但是并不仅仅局限于hover状态来实现过渡。

  • 语法格式:

  transition:要过渡的属性 花费时间 运动曲线 何时开始;

  如果有多组属性变化，还是用逗号隔开。

  <’ transition-property '>： 检索或设置对象中的参与过渡的属性

  <’ transition-duration '>： 检索或设置对象过渡的持续时间 默认是0 单位是s ，不能省略 ms

  <’ transition-timing-function '>： 检索或设置对象中过渡的动画类型 默认是“ease”

  <’ transition-delay '>： 检索或设置对象延迟过渡的时间 默认是0

  • 有过渡效果的属性：

  | transform | all |

  | — | — |

  | background-color | color |

  | background-image | only gradients |

  | background-position | percentage, length |

  | border-bottom-color | color |

  | border-bottom-width | length |

  | border-color | color |

  | border-left-color | color |

  | border-left-width | length |

  | border-right-color | color |

  | border-right-width | length |

  | border-spacing | length |

  | border-top-color | color |

  | border-top-width | length |

  | border-width | length |

  | bottom | length, percentage |

  | color | color |

  | crop | rectangle |

  | font-size | length, percentage |

  | font-weight | number |

  | grid-* | various |

  | height | length, percentage |

  | left | length, percentage |

  | letter-spacing | length |

  | line-height | number, length, percentage |

  | margin-bottom | length |

  最后

  面试一面会问很多基础问题，而这些基础问题基本上在网上搜索，面试题都会很多很多。最好把准备一下常见的面试问题，毕竟面试也相当与一次考试，所以找工作面试的准备千万别偷懒。面试就跟考试一样的，时间长了不复习，现场表现肯定不会太好。表现的不好面试官不可能说，我猜他没发挥好，我录用他吧。

  96道前端面试题：

  • [外链图片转存中…(img-pIq0w8mj-1713656103504)]

  常用算法面试题：

  • [外链图片转存中…(img-5vsmP1rJ-1713656103505)]

  前端基础面试题：
  内容主要包括HTML，CSS，JavaScript，浏览器，性能优化

  • [外链图片转存中…(img-uCQWyv2V-1713656103505)]

  网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

  需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）
  [外链图片转存中…(img-cPOUo2j0-1713656103505)]

  一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！