CSS基础知识

CSS

一、简介

​ 使用CSS来修改元素的样式

​ 第一种方式(内联样式，行内样式)：

​ - 在标签内部通过style属性来设置元素的样式

​ - 问题：

​ 使用内联样式，样式只能对一个标签生效，

​ 如果希望影响到多个元素必须在每一个元素中都复制一遍

​ 并且当样式发生变化时，我们必须要一个一个的修改，非常的不方便

​ - 注意：开发时绝对不要使用内联样式

​ 第二种方式（内部样式表）

​ - 将样式编写到head中的style标签里

​ 然后通过CSS的选择器来选中元素并为其设置各种样式

​ 可以同时为多个标签设置样式，并且修改时只需要修改一处即可全部应用

​ - 内部样式表更加方便对样式进行复用

​ - 问题：

​ 我们的内部样式表只能对一个网页起作用，

​ 它里边的样式不能跨页面进行复用

​ 第三种方式 （外部样式表） 最佳实践

​ - 可以将CSS样式编写到一个外部的CSS文件中,

​ 然后通过link标签来引入外部的CSS文件

​ - 外部样式表需要通过link标签进行引入，

​ 意味着只要想使用这些样式的网页都可以对其进行引用

​ 使样式可以在不同页面之间进行复用

​ - 将样式编写到外部的CSS文件中，可以使用到浏览器的缓存机制，

​ 从而加快网页的加载速度，提高用户的体验。

二、选择器

常用选择器

元素选择器

​ 作用：根据标签名来选中指定的元素

​ 语法：标签名{}

​ 例子：p{} h1{} div{}

---

id选择器

​ 作用：根据元素的id属性值选中一个元素

​ 语法：#id属性值{}

​ 例子：#box{} #red{}

类选择器

​ 作用：根据元素的class属性值选中一组元素

​ 语法：.class属性值

通配选择器

​ 作用：选中页面中的所有元素

​ 语法: *

复合选择器

交集选择器

​ 作用：选中同时复合多个条件的元素

​ 语法：选择器1选择器2选择器3选择器n{}

​ 注意点：

​ 交集选择器中如果有元素选择器，必须使用元素选择器开头

 div.red{ }

并集选择器

​ 作用：同时选择多个选择器对应的元素

​ 语法：选择器1,选择器2,选择器3,选择器n{}

​ #b1,.p1,h1,span,div.red{}

关系选择器

子元素选择器

​ div>p

​ 作用：选中指定父元素的指定子元素

​ 语法：父元素 > 子元素

后代元素选择器

​ div p

​ 作用：选中指定元素内的指定后代元素

​ 语法：祖先 后代

选择下一个兄弟

​ div+p

​ 选择所有紧跟在

元素之后的第一个

元素

选择下边所有的兄弟

​ div~p

​ 选择所有紧跟在

元素之后的

元素

​ 语法：兄 ~ 弟

属性选择器

​ [属性名] 选择含有指定属性的元素

​ [属性名=属性值] 选择含有指定属性和属性值的元素

​ [属性名^=属性值] 选择属性值以指定值开头的元素

​ [属性名$=属性值] 选择属性值以指定值结尾的元素

​ [属性名*=属性值] 选择属性值中含有某值的元素的元素

 p[title*=e]{
	color: orange;
  }

伪类选择器

​ - 伪类一般情况下都是使用:开头

​ :first-child 第一个子元素

​ :last-child 最后一个子元素

​ :nth-child() 选中第n个子元素

​ :only-child 选择属于其父元素的唯一子元素的每个

元素。

​ 特殊值：

​ n 第n个 n的范围0到正无穷

​ 2n 或 even 表示选中偶数位的元素

​ 2n+1 或 odd 表示选中奇数位的元素

​ - 以上这些伪类都是根据所有的子元素进行排序

​ :first-of-type

​ :last-of-type

​ :nth-of-type()

​ :only-of-type

​ :empty 选择没有子元素的每个

元素（包括文本节点）。

​ - 这几个伪类的功能和上述的类似，不通点是他们是在同类型元素中进行排序

​ - :not() 否定伪类

​ - 将符合条件的元素从选择器中去除

超链接伪类

​ :link 用来表示没访问过的链接（正常的链接）

​ :visited 用来表示访问过的链接

​ 由于隐私的原因，所以visited这个伪类只能修改链接的颜色

​ :hover 用来表示鼠标移入的状态

​ :active 用来表示鼠标点击

伪元素选择器

​ 伪元素使用 :: 开头

​ ::first-letter 表示第一个字母

​ ::first-line 表示第一行

​ ::selection 表示选中的内容

​ ::before 元素的开始

​ ::after 元素的最后

​ - before 和 after 必须结合content属性来使用

div::before{
     content: 'abc';
     color: red;
 }

 div::after{
    content: 'haha';
	 color: blue;
}

三、样式继承

样式的继承，我们为一个元素设置的样式同时也会应用到它的后代元素上

​ 继承是发生在祖先后代之间的

​ 继承的设计是为了方便我们的开发，

​ 利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上，

​ 这样只需设置一次即可让所有的元素都具有该样式

​ 注意：并不是所有的样式都会被继承：

​ 比如 背景相关的，布局相关等的这些样式都不会被继承。

四、选择器权重

​ 选择器的权重

​ 内联样式 1,0,0,0

​ id选择器 0,1,0,0

​ 类和伪类选择器 0,0,1,0

​ 元素选择器 0,0,0,1

​ 通配选择器 0,0,0,0

​ 继承的样式 没有优先级

​ 比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的）,

​ 选择器的累加不会超过其最大的数量级，类选择器在高也不会超过id选择器

​ 如果优先级计算后相同，此时则优先使用靠下的样式

​ 可以在某一个样式的后边添加 !important ，则此时该样式会获取到最高的优先级，甚至超过内联样式，

​ 注意：在开发中这个玩意一定要慎用！

五、像素和百分比

​ 长度单位：

​ 像素

​ - 屏幕（显示器）实际上是由一个一个的小点点构成的

​ - 不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰

​ - 所以同样的200px在不同的设备下显示效果不一样

​ 百分比

​ - 也可以将属性值设置为相对于其父元素属性的百分比

​ - 设置百分比可以使子元素跟随父元素的改变而改变

​ em

​ - em是相对于元素的字体大小来计算的

​ - 1em = 1font-size

​ - em会根据字体大小的改变而改变

​ rem

​ - rem是相对于根元素的字体大小来计算

六、颜色单位

​ 颜色单位：

​ 在CSS中可以直接使用颜色名来设置各种颜色

​ 比如：red、orange、yellow、blue、green … …

​ 但是在css中直接使用颜色名是非常的不方便

​ RGB值：

​ - RGB通过三种颜色的不同浓度来调配出不同的颜色

​ - R red，G green ，B blue

​ - 每一种颜色的范围在 0 - 255 (0% - 100%) 之间

​ - 语法：RGB(红色,绿色,蓝色)

​ RGBA:

​ - 就是在rgb的基础上增加了一个a表示不透明度

​ - 需要四个值，前三个和rgb一样，第四个表示不透明度

​ 1表示完全不透明 0表示完全透明 .5半透明

​ 十六进制的RGB值：

​ - 语法：#红色绿色蓝色

​ - 颜色浓度通过 00-ff

​ - 如果颜色两位两位重复可以进行简写

​ #aabbcc --> #abc

​

​ HSL值 HSLA值

​ H 色相(0 - 360)

​ S 饱和度，颜色的浓度 0% - 100%

​ L 亮度，颜色的亮度 0% - 100%

七、文档流

文档流（normal flow）

​ - 网页是一个多层的结构，一层摞着一层

​ - 通过CSS可以分别为每一层来设置样式

​ - 作为用户来讲只能看到最顶上一层

​ - 这些层中，最底下的一层称为文档流，文档流是网页的基础

​ 我们所创建的元素默认都是在文档流中进行排列

​ - 对于我们来元素主要有两个状态

​ 在文档流中

​ 不在文档流中（脱离文档流）

​ - 元素在文档流中有什么特点：

块元素

​ - 能识别宽高

​ margin设置上下左右方向有效

​ - 块元素会在页面中独占一行(自上向下垂直排列)

​ - 默认宽度是父元素的全部（会把父元素撑满）

​ - 默认高度是被内容撑开（子元素）

行内元素

​ 设置宽高无效

​ margin设置左右方向有效

​ - 行内元素不会独占页面的一行，只占自身的大小

​ - 行内元素在页面中左向右水平排列，如果一行之中不能容纳下所有的行内元素

​ 则元素会换到第二行继续自左向右排列（书写习惯一致）

​ - 行内元素的默认宽度和高度都是被内容撑开

八、盒子模型

组成

​ - 每一个盒子都由一下几个部分组成：

​ 内容区（content）

​ 内边距（padding）

​ 边框（border）

​ 外边距（margin）

边框

​ border-width: 10px;

​ 默认值，一般都是 3个像素

​ border-width可以用来指定四个方向的边框的宽度

​ 值的情况

​ 四个值：上 右 下 左

​ 三个值：上 左右 下

​ 两个值：上下 左右

​ 一个值：上下左右

​

​ 除了border-width还有一组 border-xxx-width

​ xxx可以是 top right bottom left

​ 用来单独指定某一个边的宽度

​ border-style 指定边框的样式

​ solid 表示实线

​ dotted 点状虚线

​ dashed 虚线

​ double 双线

​ border-style的默认值是none 表示没有边框

border简写属性，通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求

border: 10px red solid;

内边距

​ 内边距（padding）

​ - 内容区和边框之间的距离是内边距

​ - 一共有四个方向的内边距：

​ padding-top

​ padding-right

​ padding-bottom

​ padding-left

​ - 内边距的设置会影响到盒子的大小

​ - 背景颜色会延伸到内边距上

​ 一个盒子的可见框的大小，由内容区 内边距 和 边框共同决定，

​ 所以在计算盒子大小时，需要将这三个区域加到一起计算

外边距

​ 外边距（margin）

​ - 外边距不会影响盒子可见框的大小

​ - 但是外边距会影响盒子的位置

​ - 一共有四个方向的外边距：

​ margin-top

​ - 上外边距，设置一个正值，元素会向下移动**

​ margin-right

​ - 默认情况下设置margin-right不会产生任何效果

​ margin-bottom

​ - 下外边距，设置一个正值，其下边的元素会向下移动

​ margin-left

​ - 左外边距，设置一个正值，元素会向右移动

​ - margin也可以设置负值，如果是负值则元素会向相反的方向移动

​ - 元素在页面中是按照自左向右的顺序排列的，

​ 所以默认情况下如果我们设置的左和上外边距则会移动元素自身

​ 而设置下和右外边距会移动其他元素

​ - margin的简写属性

​ margin 可以同时设置四个方向的外边距 ，用法和padding一样

​ - margin会影响到盒子实际占用空间

水平布局

​ 元素的水平方向的布局：

​ 元素在其父元素中水平方向的位置由以下几个属性共同决定“

​ margin-left

​ border-left

​ padding-left

​ width

​ padding-right

​ border-right

​ margin-right

​ 一个元素在其父元素中，水平布局必须要满足以下的等式

margin-left+border-left+padding-left+width+padding-right+border-right+margin-right = 其父元素内容区的宽度 （必须满足）

​ 0 + 0 + 0 + 200 + 0 + 0 + 0 = 800

​ 0 + 0 + 0 + 200 + 0 + 0 + 600 = 800

​ 100 + 0 + 0 + 200 + 0 + 0 + 400 = 800

​ 100 + 0 + 0 + 200 + 0 + 0 + 500 = 800

​ - 以上等式必须满足，如果相加结果使等式不成立，则称为过度约束，则等式会自动调整

​ - 调整的情况：

​ - 如果这七个值中没有为 auto 的情况，则浏览器会自动调整margin-right值以使等式满足

​ - 这七个值中有三个值可以设置为auto

​ width

​ margin-left

​ maring-right

​ - 如果某个值为auto，则会自动调整为auto的那个值以使等式成立

​ 0 + 0 + 0 + auto + 0 + 0 + 0 = 800 auto = 800

​ 0 + 0 + 0 + auto + 0 + 0 + 200 = 800 auto = 600

​ 200 + 0 + 0 + auto + 0 + 0 + 200 = 800 auto = 400

​ auto + 0 + 0 + 200 + 0 + 0 + 200 = 800 auto = 400

​ auto + 0 + 0 + 200 + 0 + 0 + auto = 800 auto = 300

​ - 如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置为auto的外边距会自动为0

​ - 如果将三个值都设置为auto，则外边距都是0，宽度最大

​ 优先auto宽度最大

​ - 如果将两个外边距设置为auto，宽度固定值，则会将外边距设置为相等的值

​ 所以我们经常利用这个特点来使一个元素在其父元素中水平居中

​ 示例：

​ width:200px;

​ margin:0 auto;

垂直布局

​ 默认情况下父元素的高度被内容撑开

​ 子元素是在父元素的内容区中排列的，

​ 如果子元素的大小超过了父元素，则子元素会从父元素中溢出

​ 使用 overflow 属性来设置父元素如何处理溢出的子元素

​ 可选值：

​ visible，默认值 子元素会从父元素中溢出，在父元素外部的位置显示

​ hidden 溢出内容将会被裁剪不会显示

​ scroll 生成两个滚动条，通过滚动条来查看完整的内容

​ auto 根据需要生成滚动条

​ overflow-x:

​ overflow-y:

外边距的折叠

​ - 相邻的垂直方向外边距会发生重叠现象

​ - 兄弟元素

​ - 兄弟元素间的相邻垂直外边距会取两者之间的较大值（两者都是正值）

​ - 特殊情况：

​ 如果相邻的外边距一正一负，则取两者的和

​ 如果相邻的外边距都是负值，则取两者中绝对值较大的

​ - 兄弟元素之间的外边距的重叠，对于开发是有利的，所以我们不需要进行处理

​ - 父子元素

​ - 父子元素间相邻外边距，子元素的会传递给父元素（上外边距）

​ - 父子外边距的折叠会影响到页面的布局，必须要进行处理

样式

​ display 用来设置元素显示的类型

​ 可选值：

​ inline 将元素设置为行内元素

​ block 将元素设置为块元素

​ inline-block 将元素设置为行内块元素

​ 行内块，既可以设置宽度和高度又不会独占一行

​ table 将元素设置为一个表格

​ none 元素不在页面中显示

​ visibility 用来设置元素的显示状态

​ 可选值：

​ visible 默认值，元素在页面中正常显示

​ hidden 元素在页面中隐藏 不显示，但是依然占据页面的位置

盒子大小

默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定

​ box-sizing 用来设置盒子尺寸的计算方式（设置width和height的作用）

​ 可选值：

​ content-box 默认值，宽度和高度用来设置内容区的大小

​ border-box 宽度和高度用来设置整个盒子可见框的大小

​ width 和 height 指的是内容区 和 内边距 和 边框的总大小

轮廓和圆角

​ box-shadow 用来设置元素的阴影效果，阴影不会影响页面布局

​ box-shadow: h-shadow v-shadow blur spread color inset;

说明
h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的大小
color	可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影

​ /* border-radius: 用来设置圆角 圆角设置的圆的半径大小*/

​ /* border-top-left-radius: */

​ /* border-top-right-radius */

​ /* border-bottom-left-radius: */

​ /* border-bottom-right-radius: */

​ /* border-top-left-radius:50px 100px; */

​ border-radius 可以分别指定四个角的圆角

​ 四个值 左上 右上 右下 左下

​ 三个值 左上 右上/左下 右下

​ 两个个值 左上/右下 右上/左下

outline 用来设置元素的轮廓线，用法和border一模一样

​ 轮廓和边框不同的点，就是轮廓不会影响到可见框的大小

​ / 将元素设置为一个圆形 /

​ /border-radius: 50%;/

九、浮动

​ 通过浮动可以使一个元素向其父元素的左侧或右侧移动

​ 使用 float 属性来设置于元素的浮动

​ 可选值：

​ none 默认值 ，元素不浮动

​ left 元素向左浮动

​ right 元素向右浮动

​ 注意，元素设置浮动以后，水平布局的等式便不需要强制成立

​ 元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置，

​ 所以元素下边的还在文档流中的元素会自动向上移动

​ 浮动的特点：

​ 1、浮动元素会完全脱离文档流，不再占据文档流中的位置

​ 2、设置浮动以后元素会向父元素的左侧或右侧移动，

​ 3、浮动元素默认不会从父元素中移出

​ 4、浮动元素向左或向右移动时，不会超过它前边的其他浮动元素

​ 5、如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移

​ 6、浮动元素不会超过上一个浮动的兄弟元素，最多最多就是和它一样高

​ 简单总结：

​ 浮动目前来讲它的主要作用就是让页面中的元素可以水平排列，

​ 通过浮动可以制作一些水平方向的布局

​ 浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，

​ 所以我们可以利用浮动来设置文字环绕图片的效果

​ 元素设置浮动以后，将会从文档流中脱离，从文档流中脱离后，元素的一些特点也会发生变化

​ 脱离文档流的特点：

​ 块元素：

​ 1、块元素不在独占页面的一行

​ 2、脱离文档流以后，块元素的宽度和高度默认都被内容撑开

​ 行内元素：

​ 行内元素脱离文档流以后会变成块元素，特点和块元素一样

​ 脱离文档流以后，不需要再区分块和行内了

十、高度塌陷和BFC

高度塌陷的问题：

​ 在一般布局中，父元素的高度默认是被子元素撑开的，

​ 当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离

​ 将会无法撑起父元素的高度，导致父元素的高度丢失

​ 父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱

​ 所以高度塌陷的问题：

​ 在一般布局中，父元素的高度默认是被子元素撑开的，

​ 当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离

​ 将会无法撑起父元素的高度，导致父元素的高度丢失

​ 父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱

​ 所以高度塌陷是浮动布局中比较常见的一个问题，这个问题我们必须要进行处理！度塌陷是浮动布局中 比较常见的一个问题，这个问题我们必须要进行处理！

BFC(Block Formatting Context) 块级格式化范围

​ - BFC是一个CSS中的一个隐含的属性，可以为一个元素开启BFC

​ 开启BFC该元素会变成一个独立的布局区域

​ - 元素开启BFC后的特点：

​ 1.开启BFC的元素不会被浮动元素所覆盖

​ 2.开启BFC的元素子元素和父元素外边距不会重叠

​ 3.开启BFC的元素可以包含浮动的子元素

​ - 可以通过一些特殊方式来开启元素的BFC：

​ 1、设置父元素的浮动（不推荐）

​ 2、将元素设置为行内块元素（不推荐）

​ 3、将元素的overflow设置为一个非visible的值

​ - 常用的方式 为元素设置 overflow:hidden 开启其BFC 以使其可以包含浮动元素

​ 通过overflow：hidden height：0来隐藏元素

十一、clear清楚浮动

clear

​ - 作用：清除浮动元素对当前元素所产生的影响 ，让元素保持在正常的文档流

​ - 可选值：

​ left 清除左侧浮动元素对当前元素的影响

​ right 清除右侧浮动元素对当前元素的影响

​ both 清除两侧中最大影响的那侧

​ 原理：

​ 设置清除浮动以后，浏览器会自动为元素添加一个上外边距，

​ 以使其位置不受其他元素的影响

十二、高度塌陷的最终解决方案

​ .box1::after{

​ content: ‘’;

​ clear: both;

​ display: block;

​ }

/ clearfix 这个样式可以同时解决高度塌陷和外边距重叠的问题，当你在遇到这些问题时，直接使用clearfix这个类即可 /

​ .clearfix::before,

​ .clearfix::after{

​ content: ‘’;

​ display: table;

​ clear: both;

​ }

十三、定位

​ static 默认值，元素是静止的没有开启定位

​ relative 开启元素的相对定位

​ absolute 开启元素的绝对定位

​ fixed 开启元素的固定定位

​ sticky 开启元素的粘滞定位

相对定位

- 相对定位：

​ - 当元素的position属性值设置为relative时则开启了元素的相对定位

​ - 相对定位的特点：

​ 1.元素开启相对定位以后，如果不设置偏移量元素不会发生任何的变化

​ 2.相对定位是参照于元素在文档流中的位置进行定位的

​ 3.相对定位会提升元素的层级

​ 4.相对定位不会使元素脱离文档流

​ 5.相对定位不会改变元素的性质块还是块，行内还是行内

- 偏移量（offset）

​ - 当元素开启了定位以后，可以通过偏移量来设置元素的位置

​ top

​ - 定位元素和定位位置上边的距离

​ bottom

​ - 定位元素和定位位置下边的距离

​ - 定位元素垂直方向的位置由top和bottom两个属性来控制

​ 通常情况下我们只会使用其中一

​ - top值越大，定位元素越向下移动

​ - bottom值越大，定位元素越向上移动

​ left

​ - 定位元素和定位位置的左侧距离

​ right

​ - 定位元素和定位位置的右侧距离

​ - 定位元素水平方向的位置由left和right两个属性控制

​ 通常情况下只会使用一个

​ - left越大元素越靠右

​ - right越大元素越靠左

绝对定位

​ 绝对定位

​ - 当元素的position属性值设置为absolute时，则开启了元素的绝对定位

​ - 绝对定位的特点：

​ 1.开启绝对定位后，如果不设置偏移量元素的位置不会发生变化

​ 2.开启绝对定位后，元素会从文档流中脱离

​ 3.绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开

​ 4.绝对定位会使元素提升一个层级

​ 5.绝对定位元素是相对于其包含块进行定位的

​ 包含块( containing block )

​ - 正常情况下：

​ 包含块就是离当前元素最近的祖先块元素

​ - 绝对定位的包含块:

​ 包含块就是离它最近的开启了定位的祖先元素，

​ 如果所有的祖先元素都没有开启定位则根元素就是它的包含块

​ - html（根元素、初始包含块）

固定定位

固定定位：

​ - 将元素的position属性设置为fixed则开启了元素的固定定位

​ - 固定定位也是一种绝对定位，所以固定定位的大部分特点都和绝对定位一样，脱离文档流

​ 唯一不同的是固定定位永远参照于浏览器的视口进行定位

​ 固定定位的元素不会随网页的滚动条滚动

粘滞定位

粘滞定位

​ - 当元素的position属性设置为sticky时则开启了元素的粘滞定位

​ - 粘滞定位和相对定位的特点基本一致，不脱离文档流

​ 不同的是粘滞定位可以在元素到达某个位置时将其固定

​ top：100px 滑动滚动条，当元素的上边距离浏览器视口 100px 就粘住了

​

绝对定位元素的布局

水平布局

​ left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 包含块的内容区的宽度

​ - 当我们开启了绝对定位后:

​ 水平方向的布局等式就需要添加left 和 right 两个值

​ 此时规则和之前一样只是多添加了两个值：

​ 当发生过度约束：

​ 如果9个值中没有 auto 则自动调整right值以使等式满足

​ 如果有auto，则自动调整auto的值以使等式满足

​ - 可设置auto的值

​ margin-left margin-right width left right

​ - 因为left 和 right的值默认是auto，所以如果不指定left和right为0

​ 则等式不满足时，会自动调整这两个值

​ 垂直方向布局的等式的也必须要满足

​ top + margin-top/bottom + padding-top/bottom + border-top/bottom + height = 包含块的高度

十四、元素层级

​ 对于开启了定位元素，可以通过z-index属性来指定元素的层级

​ z-index需要一个整数作为参数，值越大元素的层级越高

​ 元素的层级越高越优先显示

​ 如果元素的层级一样，则优先显示靠下的元素

​ 祖先的元素的层级再高也不会盖住后代元素

十五、字体族

 @font-face {
    /* 指定字体的名字 */
    font-family:'myfont' ;
    /* 服务器中字体的路径 */
     src: url('./font/ZCOOLKuaiLe-Regular.ttf') format("truetype");
}

字体相关的样式

​ color 用来设置字体颜色

​ font-size 字体的大小

​ 和font-size相关的单位

​ em 相当于当前元素的一个font-size

​ rem 相对于根元素的一个font-size

​ font-family 字体族（字体的格式）

​ 可选值：

​ serif 衬线字体

​ sans-serif 非衬线字体

​ monospace 等宽字体

​ - 指定字体的类别，浏览器会自动使用该类别下的字体

​ - font-family 可以同时指定多个字体，多个字体间使用,隔开

​ 字体生效时优先使用第一个，第一个无法使用则使用第二个 以此类推

​ Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif

图标字体

​ 图标字体（iconfont）

​ - 在网页中经常需要使用一些图标，可以通过图片来引入图标

​ 但是图片大小本身比较大，并且非常的不灵活

​ - 所以在使用图标时，我们还可以将图标直接设置为字体，

​ 然后通过font-face的形式来对字体进行引入

​ - 这样我们就可以通过使用字体的形式来使用图标

​ fontawesome 使用步骤

​ 1.下载 https://fontawesome.com/

​ 2.解压

​ 3.将css和webfonts移动到项目中

​ 4.将all.css引入到网页中

​ 5.使用图标字体

第一种用法

​ - 直接通过类名来使用图标字体

​ class=“fas fa-bell”

​ class=“fab fa-accessible-icon”

第二种用法

​ /*

​ 通过伪元素来设置图标字体

​ 1.找到要设置图标的元素通过before或after选中

​ 2.在content中设置字体的编码

​ 3.设置字体的样式

​ fab

​ font-family: ‘Font Awesome 5 Brands’;

​ fas

​ font-family: ‘Font Awesome 5 Free’;

​ font-weight: 900;

​ */

li::before{
	 content: '\f1b0';
    /* font-family: 'Font Awesome 5 Brands'; */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900; 
    color: blue;
    margin-right: 10px;
}

第三种用法

​ 通过实体来使用图标字体：

​ &#x图标的编码;

–>

      通过实体来使用图标字体：
        &#x图标的编码;
 -->
<span class="fas">&#xf0f3;</span>

阿里图标库

十六、行高

​ 行高（line height）

​ 可以将行高设置为和高度一样的值，使单行文字在一个元素中垂直居中 */

​ - 行高指的是文字占有的实际高度

​ - 可以通过line-height来设置行高 默认值为normal

​ 行高可以直接指定一个大小（px em）

​ 也可以直接为行高设置一个整数

​ 如果是一个整数的话，行高将会是字体的指定的倍数

​ - 行高经常还用来设置文字的行间距

​

#div1{
    width: 200px;
    height: 200px;
    line-height: 50px;
    font-size: 20px;
    background-color: #00FFFF;
}
/*有四行，一行50px，字体框为20px，行间距便为50-20=30px

​ 行间距 = 行高 - 字体大小

​ 字体框

​ - 字体框就是字体存在的格子，设置font-size实际上就是在设置字体框的高度

​ 行高会在字体框的上下平均分配

​ 单行字体垂直居中，设置line-height=height

十七、字体简写

/*

​ font 可以设置字体相关的所有属性

​ 语法：

​ font: 字体大小/行高 字体族

​ 行高 可以省略不写 如果不写使用默认值

​

​ */

​ /* font-size: 50px;

​ font-family: ‘Times New Roman’, Times, serif; */

​ font-weight: bold;

​ font: 50px/2 微软雅黑, ‘Times New Roman’, Times, serif; */

​ font: normal normal 50px/2 微软雅黑, ‘Times New Roman’, Times, serif;

​ font: bold italic 50px/2 微软雅黑, ‘Times New Roman’, Times, serif;

​ font:50px ‘Times New Roman’, Times, serif;

​ 若先设置粗体，在简写时不写 粗体，则使用默认值

​ font-weight 字重 字体的加粗

​ 可选值：

​ normal 默认值 不加粗

​ bold 加粗

​ 100-900 九个级别（没什么用）

​ font-style 字体的风格

​ normal 正常的

​ italic 斜体

十八、文字水平和垂直对齐

​ text-align 文本的水平对齐

​ 可选值：

​ left 左侧对齐

​ right 右对齐

​ center 居中对齐

​ justify 两端对齐

​ vertical-align 设置元素垂直对齐的方式

​ 可选值：

​ baseline 默认值 基线对齐

​ top 顶部对齐

​ bottom 底部对齐

​ middle 居中对齐

十九、其他文本样式

text-decoration 设置文本修饰

​ 可选值：

​ none 什么都没有

​ underline 下划线

​ line-through 删除线

​ overline 上划线

​ /* text-decoration: overline; */

​ /* text-decoration: underline red dotted; */

​ 对多余文本设置为省略号

​ width: 200px;

​ /*

​ white-space 设置网页如何处理空白

​ 可选值：

​ normal 正常

​ nowrap 不换行

​ pre 保留空白

​ */

​ white-space: nowrap;

​ overflow: hidden;

​ text-overflow: ellipsis;

二十、背景

​ background-color 设置背景颜色

​ background-image 设置背景图片

​ - 可以同时设置背景图片和背景颜色，这样背景颜色将会成为图片的背景色

​ - 如果背景的图片小于元素，则背景图片会自动在元素中平铺将元素铺满

​ - 如果背景的图片大于元素，将会一个部分背景无法完全显示

​ - 如果背景图片和元素一样大，则会直接正常显示

​ background-repeat 用来设置背景的重复方式

​ 可选值：

​ repeat 默认值 ， 背景会沿着x轴 y轴双方向重复

​ repeat-x 沿着x轴方向重复

​ repeat-y 沿着y轴方向重复

​ no-repeat 背景图片不重复

​ background-position 用来设置背景图片的位置

​ 设置方式：

​ 通过 top left right bottom center 几个表示方位的词来设置背景图片的位置

​ 使用方位词时必须要同时指定两个值，如果只写一个则第二个默认就是center

​ 通过偏移量来指定背景图片的位置：

​ 水平方向的偏移量 垂直方向变量

​ 设置背景的范围

​ background-clip

​ 可选值：

​ border-box 默认值，背景会出现在边框的下边

​ padding-box 背景不会出现在边框，只出现在内容区和内边距

​ content-box 背景只会出现在内容区

​ background-origin 背景图片的偏移量计算的原点

​ padding-box 默认值，background-position从内边距处开始计算

​ content-box 背景图片的偏移量从内容区处计算

​ border-box 背景图片的变量从边框处开始计算

​ background-attachment

​ - 背景图片是否跟随元素移动

​ - 可选值：

​ scroll 默认值 背景图片会跟随元素移动

​ fixed 背景会固定在页面中，不会随元素移动

​ background-size 设置背景图片的大小

​ 第一个值表示宽度

​ 第二个值表示高度

​ - 如果只写一个，则第二个值默认是 auto

​ cover 图片的比例不变，将元素铺满

​ contain 图片比例不变，将图片在元素中完整显示

​ 图片属于网页中的外部资源，外部资源都需要浏览器单独发送请求加载，

​ 浏览器加载外部资源时是按需加载的，用则加载，不用则不加载

解决图片闪烁的问题

​ 可以将多个小图片统一保存到一个大图片中，然后通过调整background-position来显示的图片

​ 这样图片会同时加载到网页中 就可以有效的避免出现闪烁的问题

​ 这个技术在网页中应用十分广泛，被称为CSS-Sprite，这种图我们称为雪碧图

​ 雪碧图的使用步骤：

​ 1.先确定要使用的图标

​ 2.测量图标的大小

​ 3.根据测量结果创建一个元素

​ 4.将雪碧图设置为元素的背景图片

​ 5.设置一个偏移量以显示正确的图片

​ 雪碧图的特点：

​ 一次性将多个图片加载进页面，降低请求的次数，加快访问速度，提升用户的体验

线性渐变

​ 通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过渡的效果

​ ！！渐变是图片，需要通过background-image来设置

​ 线性渐变，颜色沿着一条直线发生变化

​ linear-gradient()

​ linear-gradient(red,yellow) 红色在开头，黄色在结尾，中间是过渡区域

​ - 线性渐变的开头，我们可以指定一个渐变的方向

​ to left

​ to right

​ to bottom

​ to top

​ deg deg表示度数

​ turn 表示圈

​ - 渐变可以同时指定多个颜色，多个颜色默认情况下平均分布，

​ 也可以手动指定渐变的分布情况

​ repeating-linear-gradient() 可以平铺的线性渐变

background-image: linear-gradient(red,yellow,#bfa,orange)

background-image: linear-gradient(red 50px,yellow 100px, green 120px, orange 200px)

径向渐变

radial-gradient() 径向渐变(放射性的效果) */

​ /*

​ 默认情况下径向渐变的形状根据元素的形状来计算的

​ 正方形 --> 圆形

​ 长方形 --> 椭圆形

​ - 我们也可以手动指定径向渐变的大小

​ circle

​ ellipse

​ - 也可以指定渐变的位置

​ - 语法：

​ radial-gradient(大小 at 位置, 颜色 位置 ,颜色 位置 ,颜色 位置)

​ 大小：

​ circle 圆形

​ ellipse 椭圆

​ closest-side 近边

​ closest-corner 近角

​ farthest-side 远边

​ farthest-corner 远角

​ 位置：

​ top right left center bottom

二十一、过渡（transition）

通过过渡可以指定一个属性发生变化时的切换方式

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果

属性	描述	CSS
transition	简写属性，用于在一个属性中设置四个过渡属性。	3
transition-property	规定应用过渡的 CSS 属性的名称。	3
transition-duration	定义过渡效果花费的时间。默认是 0。	3
transition-timing-function	规定过渡效果的时间曲线。默认是 “ease”。	3
transition-delay	规定过渡效果何时开始。默认是 0。	3

transition-property: 指定要执行过渡的属性

多个属性间使用,隔开

如果所有属性都需要过渡，则使用all关键字

大部分属性都支持过渡效果，注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡

transition-property: height , width;
transition-property: all; 

transition-duration: 指定过渡效果的持续时间

时间单位：s 和 ms 1s = 1000ms

​

transition-duration: 100ms, 2s; 
transition-duration: 2s; 

transition-timing-function: 过渡的时序函数

指定过渡的执行的方式

​ 可选值：

​ ease 默认值，慢速开始，先加速，再减速

​ linear 匀速运动

​ ease-in 加速运动

​ ease-out 减速运动

​ ease-in-out 先加速 后减速

​ cubic-bezier() 来指定时序函数

​ https://cubic-bezier.com

​ steps() 分步执行过渡效果

​ 可以设置一个第二个值：

​ end ， 在时间结束时执行过渡(默认值)

​ start ， 在时间开始时执行过渡

transition-timing-function: cubic-bezier(.24,.95,.82,-0.88); 
transition-timing-function: steps(2, start); 

transition-delay: 过渡效果的延迟，等待一段时间后在执行过渡

transition-delay: 2s;

​

transition 可以同时设置过渡相关的所有属性，只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟

二十二、动画（animation）

​ 动画和过渡类似，都是可以实现一些动态的效果，不同的是过渡需要在某个属性发生变化时才会触发，动画可以自动触发动态效果

​ 设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行每一个步骤

@keyframes test {
      /* from表示动画的开始位置 也可以使用 0% */
      from{
       margin-left: 0;
       background-color: orange;
      } 
     /* to动画的结束位置 也可以使用100%*/
     to{
      background-color: red;
       margin-left: 700px;
     }

    }

• animation-name: 要对当前元素生效的关键帧的名字

• animation-duration 动画的执行时间

• animation-delay: 2s动画的延时

• animation-iteration-count 动画执行的次数

可选值：

次数

infinite 无限执行

• animation-direction指定动画运行的方向

  可选值：

  normal 默认值 从 from 向 to运行 每次都是这样

  reverse 从 to 向 from 运行 每次都是这样

  alternate 从 from 向 to运行 重复执行动画时反向执行

  alternate-reverse 从 to 向 from运行 重复执行动画时反向执行

• animation-play-state: 设置动画的执行状态

  可选值：

  running 默认值 动画执行

  paused 动画暂停

• animation-fill-mode: 动画的填充模式

  可选值：

​ none 默认值 动画执行完毕元素回到原来位置

​ forwards 动画执行完毕元素会停止在动画结束的位置

​ backwards 动画延时等待时，元素就会处于开始位置

​ both 结合了forwards 和 backwards

二十三、变形（transform）

Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

none	定义不进行转换。
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y)	定义 2D 转换。
translate3d(x,y,z)	定义 3D 转换。
translateX(x)	定义转换，只是用 X 轴的值。
translateY(y)	定义转换，只是用 Y 轴的值。
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。
scale(x,y)	定义 2D 缩放转换。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	通过设置 X 轴的值来定义缩放转换。
scaleY(y)	通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿着 X 轴的 3D 旋转。
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换。
perspective(n)	为 3D 转换元素定义透视视图。

1.平移（translate）

​ 变形就是指通过CSS来改变元素的形状或位置

​ - 变形不会影响到页面的布局,不会脱离文档流

​ - transform 用来设置元素的变形效果

​ - 平移：

​ translateX() 沿着x轴方向平移

​ translateY() 沿着y轴方向平移

​ translateZ() 沿着z轴方向平移

​ - 像素（px），或百分比是相对于自身计算的

/*这种居中方式，**只适用于元素的大小确定*/
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;



/*水平垂直居中*/

left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);*

2.Z轴平移（perspective）

z轴平移，调整元素在z轴的位置，正常情况就是调整元素和人眼之间的距离，距离越大，元素离人越近

z轴平移属于立体效果（近大远小），默认情况下网页是不支持透视，如果需要看见效果，必须要设置网页的视距

/* 设置当前网页的视距为800px，人眼距离网页的距离 */
perspective: 8000px;

3.旋转（rotate）

​ 通过旋转可以使元素沿着x y 或 z旋转指定的角度

​ rotateX()

​ rotateY()

​ rotateZ()

​ */

​ /* transform: rotateZ(.25turn); */

​ /* transform: rotateY(180deg) translateZ(400px); */

​ /* transform: translateZ(400px) rotateY(180deg) ; */

​ / 设置3d变形效果 /

​ transform-style: preserve-3d;

4.缩放（scale）

​ 对元素进行缩放的函数：

​ scaleX() 水平方向缩放

​ scaleY() 垂直方向缩放

​ scale() 双方向的缩放

二十四、适配

​ 像素：

​ - 屏幕是由一个一个发光的小点构成，这一个个的小点就是像素

​ - 分辨率：1920 x 1080 说的就是屏幕中小点的数量

​ - 在前端开发中像素要分成两种情况讨论：CSS像素 和 物理像素

​ - 物理像素，上述所说的小点点就属于物理像素

​ - CSS像素，编写网页时，我们所用像素都是CSS像素

​ - 浏览器在显示网页时，需要将CSS像素转换为物理像素然后再呈现

​ - 一个css像素最终由几个物理像素显示，由浏览器决定：

​ 默认情况下在pc端，一个css像素 = 一个物理像素

​ 视口（viewport）

​ - 视口就是屏幕中用来显示网页的区域

​ - 可以通过查看视口的大小，来观察CSS像素和物理像素的比值

​ - 默认情况下：

​ 视口宽度 1920px（CSS像素）

​ 1920px（物理像素）

​ - 此时，css像素和物理像素的比是 1:1

​ - 放大两倍的情况：

​ 视口宽度 960px（CSS像素）

​ 1920px（物理像素）

​ - 此时，css像素和物理像素的比是1:2

​ - 我们可以通过改变视口的大小，来改变CSS像素和物理像素的比值

移动端

​ 在不通的屏幕，单位像素的大小是不同的，像素越小屏幕会越清晰

​ 24寸 1920x1080

​ i6 4.7寸 750 x 1334

​ 智能手机的像素点 远远小于 计算机的像素点

​ 问题：一个宽度为900px的网页在iphone6中要如何显示呢？

​ 默认情况下，移动端的网页都会将视口设置为980像素（css像素）

​ 以确保pc端网页可以在移动端正常访问，但是如果网页的宽度超过了980，

​ 移动端的浏览器会自动对网页缩放以完整显示网页

​ https://material.io/resources/devices/

​ 所以基本大部分的pc端网站都可以在移动端中正常浏览，但是往往都不会有一个好的体验，

​ 为了解决这个问题，大部分网站都会专门为移动端设计网页

​ 移动端默认的视口大小是980px(css像素)，

​ 默认情况下，移动端的像素比就是 980/移动端宽度 （980/750）

​ 如果我们直接在网页中编写移动端代码，这样在980的视口下，像素比是非常不好，

​ 导致网页中的内容非常非常的小

​ 编写移动页面时，必须要确保有一个比较合理的像素比：

​ 1css像素 对应 2个物理像素

​ 1css像素 对应 3个物理像素

​ - 可以通过meta标签来设置视口大小

​ - 每一款移动设备设计时，都会有一个最佳的像素比，

​ 一般我们只需要将像素比设置为该值即可得到一个最佳效果

​ 将像素比设置为最佳像素比的视口大小我们称其为完美视口

​ 将网页的视口设置为完美视口

<meta name="viewport" content="width=device-width, initial-scale=1.0">

​ 结论：以后再写移动端的页面，就把上边这个玩意先写上

VW单位

​ 不同的设备完美视口的大小是不一样的

​ iphone6 – 375

​ iphone6plus – 414

​ 由于不同设备视口和像素比不同，所以同样的375个像素在不同的设备下意义是不一样，

​ 比如在iphone6中 375就是全屏，而到了plus中375就会缺一块

​ 所以在移动端开发时，就不能再使用px来进行布局了

​ vw 表示的是视口的宽度（viewport width）

​ - 100vw = 一个视口的宽度

​ - 1vw = 1%视口宽度

​ vw这个单位永远相当于视口宽度进行计算

​ 设计图的宽度

​ 750px 1125px

​ 设计图

​ 750px

​ 使用vw作为单位

​ 100vw

​ 创建一个 48px x 35px 大小的元素

​ 100vw = 750px(设计图的像素) 0.1333333333333333vw = 1px

​ 6.4vw = 48px(设计图像素)

​ 4.667vw = 35px

​ - 1 rem = 1 html的字体大小

​ 网页中字体大小最小是12px，不能设置一个比12像素还小的字体

​ 如果我们设置了一个小于12px的字体，则字体自动设置为12

响应式布局

​ 使用媒体查询

​ 语法： @media 查询规则{}

​ 媒体类型：

​ all 所有设备

​ print 打印设备

​ screen 带屏幕的设备

​ speech 屏幕阅读器

​ - 可以使用,连接多个媒体类型，这样它们之间就是一个或的关系

​ 可以在媒体类型前添加一个only，表示只有。

​ only的使用主要是为了兼容一些老版本浏览器

​ */

​ /* @media print,screen{

​ body{

​ background-color: #bfa;

​ }

​ } */

​ /*

​ 媒体特性：

​ width 视口的宽度

​ height 视口的高度

​ min-width 视口的最小宽度（视口大于指定宽度时生效）

​ max-width 视口的最大宽度（视口小于指定宽度时生效）

​ */

​ /* @media (max-width: 500px){

​ body{

​ background-color: #bfa;

​ }

​ } */

/*

​ 样式切换的分界点，我们称其为断点，也就是网页的样式会在这个点时发生变化

​ 一般比较常用的断点

​ 小于768 超小屏幕 max-width=768px

​ 大于768 小屏幕 min-width=768px

​ 大于992 中型屏幕 min-width=992px

​ 大于1200 大屏幕 min-width=1200px

*/

​ @media only screen and (min-width: 500px) and (max-width:700px){

​ body{

​ background-color: #bfa;

​ }

​ }