HTML 、CSS 基础 - 《前端学习笔记》

html
- 实体
- meta标签
- 块级元素和行级元素
- 结构化语义标签
- href标签
  - 三种使用方式
css
- 选择器
- 伪元素
- 样式的继承
  - 选择器的权重
    - 选择器权重分类
    - 优先级比较的方式
- 单位
  - 长度单位分为以下四种
- 颜色
  - 颜色的计量单位分为以下五种
- 布局相关
- 浮动
  - 浮动的特点
  - 高度塌陷
- 定位（position）
- 相对定位
  - 相对定位的特点
绝对定位
- 绝对定位的特点
- 包含块
固定定位
- 固定定位的特点
粘滞定位
- 粘滞定位的特点
绝对定位元素的布局
- 变化
元素的层级
字体和背景
- 字体
- 文本的样式
  - 文本省略号设置案例
背景
- 背景相关属性
- background-image
background-repeat
background-position
background-size
background-origin
background-clip
background-attachment
background
渐变
- 什么是渐变？
- 线性渐变
  - 渐变的方向
  - 示例
- 径向渐变
  - 语法、位置和大小
动画
- 过渡
  - 过渡的属性
- 动画
  - 关键帧
  - 动画的属性
- 变形
弹性盒flex
- 使用方式
- 什么是弹性元素？
- 主轴和辅轴
- 弹性元素属性之flex-direction
- 弹性元素属性之flex-grow
- 弹性元素属性之flex-shrink
- 弹性容器属性之flex-wrap
- 弹性容器属性之justify-content
- 弹性容器属性之align-items
- 弹性容器属性之align-content
- 弹性元素属性之align-self
- 弹性元素属性之flex-basis
- 弹性元素属性之flex
- 弹性元素属性之order
移动端
- 像素
- 媒体查询
  - 媒体类型
    - 举个例子

html

实体

定义: 所谓的实体其实就是html转义字符比如空格” “

meta标签

定义: meta标签主要是设置一些元数据信息，常用的是设置编码，系统描述，主要用到的属性为name,content，name表示元数据名称，content表示设置的值,多个参数用逗号分开

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

块级元素和行级元素

块元素（会自动换行，不能与其他元素共处一行）
- 块元素主要用于布局
- 块元素中可以填写任何元素
- 块级p元素中不能写块级元素

行级元素（不会自动换行，可以与其他元素共处一行）
- 一般用于显示文字等信息
注意事项： 任何元素都不能写在HTML标签外部，也不能写在body，head以外的子元素，虽然这么写没有错，但是浏览器会自动修正不规则的标签，如果，不规则的标签过多，会影响一定的性能。

结构化语义标签

定义: 通过一些特定的标签定义html结构,主要也用来布局，都是块级标签

header: 表示网页中的头部信息
main: 表示主体部分，一般一个html页面只有一个
footer: 表示一个底部信息
nav：表示一个导航栏
aside：和主体相关的信息（侧边栏）
article: 表示一个独立的文章
section: 表示一块独立的区域，上面的标签不能用则用这个

注：：由于上面的标签都是H5才出来的，不怎么常用，目前常用布局组合标签还是通过div和span标签来结合使用，div表示用来布局，span用来显示文字

href标签

定义: : href为超链接，通常作用有三个，第一个为页面跳转，第二个为跳转当前页面指定位置，第三个作为伪按钮这类的使用。

target属性

_self：在当前页面中打开
_blank：在新的一个页面打开

三种使用方式

超链接

<a href="https://www.baidu.com" target="_blank">打开百度</a>

跳转页面指定位置

<a href="#bottom">跳转底部</a>
<a href="#" id="bottom">跳转顶部</a>

css

选择器

关系选择器

1.>：子类选择器，选择指定的直接子类标签

    div > span{
        color: orange;
    }
    <div class="box">
        我是一个div
        <p>
            我是div中的p元素
            <span>我是p元素中的span</span>
        </p>
        <div>我是一个div2</div>
        <!--下面所有span都会被选中-->
        <span>我是div中的span元素</span>
        <span>我是div中的span元素</span>
        <span>我是div中的span元素</span>
        <span>我是div中的span元素</span>
    </div>

2.+：兄弟选择器，选中相邻的兄弟节点,需要注意的是，如果相邻的节点不是指定的兄弟标签则选择器会失效

    p + span{
        color: red;
    }
    <div class="box">
        我是一个div
        <p>
            我是div中的p元素
            <span>我是p元素中的span</span>
        </p>
        <!--<div>我是一个div2</div> 注释放开则会失效，指定的兄弟节点是span而相邻的节点是div-->
        <span>我是div中的span元素</span> <!--选中-->
        <span>我是div中的span元素</span>
        <span>我是div中的span元素</span>
        <span>我是div中的span元素</span>
    </div>
    <span>
        我是div外的span
    </span>

3.~：兄弟选择器，选择所有的兄弟节点

    p ~ span{
        color: red;
    }
    <div class="box">
        我是一个div
        <p>
            我是div中的p元素
            <span>我是p元素中的span</span>
        </p>
        <div>我是一个div2</div>
        <!--以下的span都会选中-->
        <span>我是div中的span元素</span> 
        <span>我是div中的span元素</span>
        <span>我是div中的span元素</span>
        <span>我是div中的span元素</span>
    </div>

属性选择器

[属性名]选择含有指定属性的元素
[属性名=属性值] 选择含有指定属性和属性值的元素
[属性名^=属性值] 选择属性值以指定值开头的元素
[属性名$=属性值] 选择属性值以指定值结尾的元素
[属性名*=属性值] 选择属性值中含有某值的元素的元素

    p[title]{ 
    p[title=abc]{ 
    p[title^=abc]{ 
    p[title$=abc]{ 
    p[title*=e]{
        color: orange;
    }
    <p title="abc">少小离家老大回</p>
    <p title="abcdef">乡音无改鬓毛衰</p>
    <p title="helloabc">儿童相见不相识</p>
    <p>笑问客从何处来</p>
    <p>秋水共长天一色</p>
    <p>落霞与孤鹜齐飞</p>

伪类选择器

定义: 不存在的类，特殊的类，伪类用来描述一个元素的状态，比如超链接的伪类有点击前，点击后，点击时，鼠标移动状态，伪类一般用 : 开头

常用的伪类

:first-child：第一个元素
last-child: 最后一个元素
nth-child(): 选中特定的元素
- 特殊值:
  - n:表示选中所有的元素
  - 2n:表示选中所有的偶数位的元素，也可以使用enev代替
  - 2n+1:表示选中所有的奇数位的元素，也可以使用odd代替

:first-of-type：第一个元素，它是按照子类数量进行排序，不区分子类类型
last-of-type: 最后一个元素
nth-of-type(): 选中特定的元素

注意: 以上三个xxx-of-type伪类相同点和xxx-child伪类用法一样，不同点是，它是根据同元素类型进行排序，而上面的则是根据素有的子元素类型进行排序，不区分类型。

    <!--选中第一个li-->
     ul > li:first-child{
        color: red;
    }
    <!--选中最后一个li-->
     ul > li:last-child{
        color: red;
    }
    <!--选中奇数位li-->
     ul > li:nth-child(2n+1){
        color: red;
    }
    <!--选中偶数位li-->
     ul > li:nth-child(even){
        color: red;
    }
    <!--选中同类型第一个li-->
     ul > li:first-of-type{
        color: red;
    }

:not()：将符合条件的元素从选择器中去除

<!--此选择器表示选中ul下所有的li，但是去掉li子元素中的第三个元素-->
 ul > li:not(:nth-of-type(3)){
            color: yellowgreen;
    }
    <ul>
        <span>我是一个span</span>
        <li>第〇个</li>
        <li>第一个</li>
        <li>第二个</li> <!--去除-->
        <li>第三个</li>
        <li>第四个</li>
        <li>第五个</li>
    </ul>

超链接的伪类

:hover：鼠标移入状态
:active：点击中的状态
:visited：点击后的状态
:link：未点击的状态

        /*
            :link 用来表示没访问过的链接（正常的链接）
         */
        a:link{
            color: red;
        }
        /*
            :visited 用来表示访问过的链接
            由于隐私的原因，所以visited这个伪类只能修改链接的颜色
        */
        a:visited{
            color: orange;
            /* font-size: 50px;   */
        }
        /*
            :hover 用来表示鼠标移入的状态
         */
         a:hover{
             color: aqua;
             font-size: 50px;
         }
         /*
            :active 用来表示鼠标点击
         */
         a:active{
             color: yellowgreen;
         }

伪元素

定义： 表示页面中的特殊而不存在的元素（表示特殊的位置）,伪元素使用 :: 开头。

::first-letter： 表示首字母
::first-line： 表示第一行
::selection： 表示选中的内容
::before： 元素的开始
::after： 元素的结束
- before和after必须结合content来使用

    div::before{
        content: '『';
     }
    div::after{
        content: '』';
    }

样式的继承

定义： 我们为一个元素设置好样式后，它的后台也会继承该样式，样式的继承低发生在祖先与后代之间的，它可以方便我们的开发，但是需要注意的是，并不是所有的样式都能够继承的 布局、背景相关的 是不能够继承的.

选择器的权重

选择器权重分类

内联样式
id选择器
类选择器
标签选择器
通配符选择器
继承的样式

权重: 内联选择器>id选择器>类选择器>标签选择器>通配符选择器>继承的样式

优先级比较的方式

比较方式：比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的，选择器累加不过超过最大的数量级，比如类选择器在多也不会超过id选择器的权重，如果说我们一定要改变优先级，则可以使用 !important ，但是需要注意的是，这个玩意在开发的时候需要慎用。

单位

长度单位分为以下四种

像素
- 屏幕（显示器）实际上是由一个一个的点组成的
- 不同屏幕的像素点不一样，像素点越多画质越清晰
- 所以说同样的像素在不同的屏幕显示的效果不一样

百分比
- 百分比是相对于父元素计算
- 设置的百分比可以跟着父元素的大小改变而改变

em
- em是相对于元素中文字大小而计算的
- 1em=16px(默认文字大小为16px)
- em会根据字体大小的变化而变化

rem
- rem是相对于根元素文字大小计算

颜色

颜色的计量单位分为以下五种

RGB
- RGB通过三种颜色的不同浓度来调配出不同的样式
- R red，G green ，B blue
- 每一种颜色的范围在0~255之间
- 语法 RBG(红，绿，蓝)

RGBA
- RGBA和RBG基本一致，主要增加了透明度
- 1表示不透明，0表示全透明，.5半透明

十六进制
- 语法：#红色绿色蓝色
- 颜色浓度通过 00-ff
- 如果颜色两位两位重复可以进行简写（ #aabbcc —> #abc）

颜色的单词
- 比如：red、orange、yellow、blue、green

HSL
- H 色相(0 - 360)
- S 饱和度，颜色的浓度 0% - 100%
- 亮度，颜色的亮度 0% - 100%

布局相关

文档流

定义： 网页是一个多层结构，一层摞着一层，我们可以通过编写css样式更改这些层的样式，作为用户来说我们只能看到最上层，在这些层中，最底层的那一层则为文档流，它是整个网页的基础，我们所创建的元素都是在文档流中进行排序的。

元素在文档流中的特点

块元素
- 块元素会在页面中独占一行，自上向下垂直排序
- 默认的宽度就是父元素的宽度（会把父元素撑满）
- 默认的告诉就是子元素的高度

行元素
- 行元素在页面中不会独占一行，只占自身大小
- 默认的宽度高度就是内容的宽度和高度
- 行内元素会从左至右以此排序，如果超过一行会另起一行

盒子模型

介绍： css将所有的元素都设置成为一个盒子，将元素设置为盒子后，对页面的布局就变成了不同的盒子摆放到不同的位置，盒子模型由内容区，内边距，边框，外边距组成。

边框

编写边框需要设置三个属性

border-with：边框的宽度，默认为3px可以省略
- 除了border-with它还拥有一组border-xxx-with,xxx可以是top、left、buttom、right

border-color：边框的颜色，默认为color的颜色，可以省略，color的颜色默认为黑色，则边框默认为黑色
border-style：边框的样式，必须填写
- solied：实线
- double：双线
- dotted：点状虚线
- dashed 虚线

赋值方面,值的情况(border-with || border-color || border-style)

四个值：顺时针赋值上、右、下、左
三个值：上、左右、下
两个值：上下、左右
一个值：上下左右

简写方式

简写方式:以上三个属性除了border-with、border-color可以简写，它们三个属性还有个共同的简写方式border 比如border: 10px red solid，并且参数没有顺序要求,它们除了简写方式外，还有一组有规律的属性，比如order-top,order-left,order-right,order-buttom用来表示设置不同方向的边框。

内边距

定义： 内容器与边框之间的距离称为内边距，内边距有四个方向，padding-top、padding-buttom、padding-left、padding-right,内边距会影响盒子模型的大小，并且背景颜色会延伸到内边距上.

简写属性

简写属性: padding 为简写属性，可以指定一到四个值，用法和border-width一样。

外边距

定义： 外边距不会影响盒子可见框(可见框由内容器，内边距，边框组成)的大小,但是能影响盒子的位置，也会影响整个盒子的实际空间，一共有四个方向的边距，如下。

margin-top
- 上边边距，设置一个正值，元素会向下移动

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

margin-rigth
- 默认清空下右边边距不会产生任何效果

margin-buttom
- 下边边距，设置一个正值，其下边的元素会向下移动
注: 所有的边距都可以设置正负值，如果设置的是负值则向相反的地方移动。

简写属性

简写属性: margin 为简写属性，可以同时设置四个方向的外边距，用法和padding一样

盒子的水平布局

介绍:元素的在其父元素的位置由margin-left、border-left、padding-left、width、padding-right、obder-right、border-right这七个参数决定。

水平布局等式

介绍：一个元素在其父元素，水平布局必须满足以下等式，margin-left+border-left+padding-left+width+padding-right+border-right+margin-right = 其父元素内容区的宽度（必须满足）。

举例

一个父盒子宽度为800，高度为200里面有个子盒子宽度为200，此时公式应该为

margin-left、border-left、padding-left、width、padding-right、obder-right、border-right = 800也就是说 0 + 0 + 0 + 200 + 0 + 0 + 0 = 800

浏览器纠正后的公式应该为

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

描述

水平布局等式必须满足，如果条件不成立，称为过度约束，则等式会自动调整 (可以自动调整的值为width(默认为auto),margin-left,margin-right) ，调整的情况为:

如果这七个值中没有auto的情况，则会默认调整margin-rigth的宽度使等式成立
如果某个值为auto的情况，则会默认调整auto的那个值使等式成立
如果width和margin-left或者margin-rigth设置为auto，则宽度会调整到最大，margin-left或margin-right会被设置为0
如果三个值都设置为auto，则外边距都为0，宽度最大
如果将margin-left和margin0rigth设置auto，width设置为固定值，则margin-left和margin-right 会平均分剩余宽度达到居中效果

盒子的垂直布局

介绍：默认情况下，父元素的高度是被内容撑开的，子元素是在父元素的内容区排序的，如果子元素的大小超过了父元素，则会溢出，我们可以使用overflow处理溢出的子元素（overflow是写在父元素中）。

overflow有以下几个值

auto：自动调整x-y轴根据需要生成滚动条
hidden：隐藏
scroll：生成滚动条，通过滚动条查看完整的内容
visible：默认值，子元素会在父元素中溢出，在父元素的外部中显示

外边距的折叠

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

兄弟元素
- 兄弟元素之间，相邻的垂直外边距值是正值的话会取两者之间的最大值
- 兄弟元素之间，相邻的垂直外边距值是一正一负，则会取两个值的和
- 兄弟元素之间，相邻的垂直外边距值都是负数的话，那会采取两个数的绝对值

父子元素
- 父子元素相邻的外边距，子元素会传递给父元素（上边距）
- 父子元素的折叠会影响页面的布局，必须进行处理
- 可以使用开启bfc进行处理

行内元素的盒子模型

简介: 行内元素也有盒子模型，但是它不支持修改宽度和高度，行内元素的宽度和高度都是通过内容撑开的，并且，行内元素可以设置外边距、内边距、边框，但是它不会影响页面的布局

默认样式

简介: 通常情况下，浏览器会给元素设置默认的样式，默认的样式可能会影响页面的布局，所以通常情况下我们会去除浏览器的默认样式。

盒子的尺寸

简介：默认情况下盒子的可见框大小由内容区，内边距，边框组成，我们可以通过box-sizing用来更改盒子的计算方式。

box-sizing

order-box：宽度和高度用来设置整个盒子的大小。
content-box：默认值，宽度和高度用来设置内容区的大小。

轮廓、圆角、阴影

轮廓

简介：outline 用来设置元素的轮廓线，相当于描边,用法和边框一样，轮廓和边框的区别在于，边框改变盒子的大小，而轮廓不会改变。

圆角

简介： border-radius用来设置元素的圆角，圆角设置圆的半径的大小，它可以设置四个圆角，左上、右上、右下、右上，它拥有一到四个参数，用法和边框那些用法一样，如果需要设置一个圆，只需要设置参数为50%即可。

阴影

简介：box-shadow用来设置元素的阴影，它有四个值。

第一个值：设置左偏移量，和margin-left差不多
第二个值：设置上偏移量，和margin-top差不多
第三个值：用来设置模糊程度
第四个值：用来设置颜色

浮动

浮动的特点

简介

简介：通过浮动可以使元素在父元素中向左或想右移动，我们可以使用left来设置浮动，它有三个值。

注意事项

注意：元素设置浮动后会脱离文档流，水平布局的等式则不需要成立，元素浮动后，也不会占据位置，所以下边文档流的元素会向上移动。

none：不设置浮动
left：设置左浮动
right：设置右浮动

特点

浮动元素会完全脱离文档流，不在占据文档流中的位置。
设置浮动后的元素可以在父元素中向左或向右移动。
浮动元素不会在父元素中移出。
浮动元素向左或向右移动时，不会超过它前面的浮动元素。
如果浮动元素的上边一个元素是一个没有浮动的块元素，则浮动元素无法上移。
浮动元素不会超过它上边浮动的兄弟元素，会和它一样高

元素脱离文档流特点

简介：浮动后的元素脱离文档流后，其元素的特点也会发生改变，也不会再区分行内和块。

块元素
- 块元素不会再独占一行
- 脱离文档流后，块元素的高度和宽度默认会被内容撑开

行元素
- 行元素会变成块元素，拥有块元素的特点

高度塌陷

简介：在开发中，父元素一般不会设置高度，而是让子元素撑开，但是如果子元素浮动后，则会脱离文档流，也无法撑开父元素，则会达到个高度塌陷的问题，我们可以使用bfc（块格式上下文）来解决这个问题。

bfc(Block Formatting Context)

简介：bfc是css的一个隐含的属性，可以元素开启bfc，开启的bfc该元素则变成一块独立的布局区域

元素开启bfc后的特点

开启bfc的元素不会被浮动元素所覆盖
开启bfc的元素子元素和父元素的外边距不会被重叠
开启bfc的元素可以包含浮动的子元素

bfc开启方式

设置元素的浮动（不推荐）
将元素设置为行内块元素（不推荐）
将元素的overflow设置为一个非visible的值

clear

简介：如果我们不希望某个元素因为其他浮动元素改变当前的位置，可以使用clear属性可以清理浮动元素对当前元素产生的影响，并且还可以用它解决高度塌陷问题。

可选值

left：清理左侧浮动元素对当前元素的影响
right：清理右侧浮动元素对当前元素的影响
both：清理两侧影响最大的那侧

原理

原理：其实就是增加上边距，以使其位置不被其他元素影响

高度塌陷和外边距折叠最终解决办法

    .clearfix::before,
    .clearfix::after{
        content: '';
        display: table;
        clear: both;
    }

解释

高度塌陷： 在父元素中有子元素开启浮动后，会导致父元素高度塌陷，我们可以使用after伪元素在父元素最底部占位生成一个行内元素，但是我们需要把这个行内元素转换为一个块元素，并且通过clear的特性，清理浮动元素对当前元素的影响，最终达到解决高度塌陷问题
外边距折叠： 相邻的垂直方向的外边距会发生重叠现象，兄弟节点发生重叠不需要进行处理，但是父子元素发生重叠则需要处理，我们给一个子元素设置外边距的时候，它会把外边距传递给父元素，达不到我们预期的效果，所以我们可以使用before伪元素占位，并且将它的display设置为table即可解决问题

定位（position）

什么是定位?

定位是一种更高级的布局手段
我们可以通过定位将元素摆放到任意位置
定位： 定位是一种更高级的布局手段，我们可以通过定位将元素摆放到任意位置。

定位的可选值

static：默认值，表示没有开启定位
relative：相对定位
absolute：绝对定位
fixed：固定定位
sticky：粘滞定位

偏移量

无论开启什么定位如果需要移动元素的位置都需要设置偏移量,偏移量设置的可选值如下。

top：定位元素和定位位置上边的距离
bottom：定位元素和定位位置下边的距离
left：定位元素和定位位置左边的距离
right：定位元素和定位位置右边的距离

定位位置： 就是当前元素定位移动的参照物。

相对定位

相对定位：当position设置了值为relative的时候，即开启了相对定位

相对定位的特点

元素开启相对定位之后，如果不设置偏移量则不会发生任何改变
相对定位的参照物是参照元素在文档流中的位置进行定位的
相对定位会提升元素的层次
相对定位的元素不会脱离文档流
相对定位不会更改元素的性质，块还是块，行内还是行内

绝对定位

绝对定位：当position设置了absolute的时候，即开启了绝对定位

绝对定位的特点

元素开启绝对定位后，只有位置不会发生变化
绝对定位会使元素脱离文档流
绝对定位会改变元素的特性，行内会变成块，块的内容被高度撑开
绝对定位的参照物是参照包含块进行定位的
绝对定位会提升元素的层次

包含块

普通元素
- 没有开启定位的普通元素的包含块就是最近的祖先块元素

绝对定位的包含块
- 包含块是离它最近的开启了定位的祖先元素，如果都没有开启定位，则它的包含块就是HTML（根元素，初始化包含块）

固定定位

固定定位：当position设置了fixed的时候，即开启了固定定位

固定定位的特点

固定定位大部分特点和绝对定位差不多
固定定位的参照物视口（所谓的视口就是页面的左上角，但是它不同的是，它不会随滚动条的滚动而滚动）

粘滞定位

粘滞定位：当position设置了sticky的时候，即开启了粘滞定位

粘滞定位的特点

粘滞定位和相对定位的特点基本一致
粘滞定位可以在元素到达某个位置时将其固定，我们可以利用这个特性固定网站的导航栏
粘滞定位的参照物是参照没有定位的包含块

绝对定位元素的布局

简介：我们知道普通元素在水平布局中有一个水平布局的等式（ left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 包含块的内容区的宽度），当我们开启绝对定位后，这个等式会发生变化，会增加两个值，一个left，一个right，从原来的7个属性，变成现在的9个属性，在公式计算方面略微的变化，不过大致相同。

变化

可设置auto属性值在以前的margin-left、margin-right、width中增加left和right属性
left、right的值默认为auto，如果等式不成立，会自动调整这两个值
垂直方向也增加了top、buttom属性，默认这两个属性也为auto，如果垂直布局等式不成立，则会默认调整top和buttom的值
垂直方向计算公式（ top + margin-top/bottom + padding-top/bottom + border-top/bottom + height = 包含块的高度）

元素的层级

简介：开启定位后的元素我们可以使用z-index属性来修改元素的层级，z-inde需要一个整数作为属性值，属性值越大，层次越高，越优先显示，如果层次级别一样，则默认会显示靠下的兄弟元素，并且祖先元素的层次在高，也盖不住后代元素。

字体和背景

字体

字体相关属性样式

color：用来设置字体颜色
font-size：用来设置字体大小，以下是和字体大小有关的单位
- em：相当于当前元素的一个font-size，默认1em等于16px
- rem：相当于根元素的一个font-size

font-family：字体族（用来设置d字体的格式）,它可以同时指定多个字体，多个字体用逗号隔开，以下是它的可选值
- serif：衬线字体
- sans-serif：非衬线字体
- monospace：等宽字体
- 示例：font-family: ‘Courier New’, Courier, monospace;

@font-face：可以将服务器的字体直接提供给用户使用，不过需要注意的问题有版权、加载速度、字体格式等问题

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

font-weight：用于设置字体的权重（加粗效果），以下是它的可选值
- normal：默认的，不加粗
- bold：加粗的
- 100-900 九个级别（没什么用）

font-style：用于设置字体的样式（斜体）
- normal：正常的
- italic：斜体

图标字体

简介：在网页中我们经常需要引入一些图标，我们经常用图片来引入图标，但是图片本生太大，并且不易布局，而且放大缩小会失真，所以我们可以将图片图标设置为字体，然后我们通过字体的形式使用图标。

常用的图标字体

fontawesome
阿里矢量图库

图标字体使用方式

使用方式：一般的图标字体下载完成后，我们需要引入css，然后我们可以通过样式类、实体、css伪元素这三种方式使用。

样式类使用方式

     <i class="fas fa-bell-slash"></i>

伪元素使用方式

      <span class="fas">&#xf0f3;</span>

css伪元素

    /*fontawesome*/
    li::before{
        /* 
            通过伪元素来设置图标字体
                1.找到要设置图标的元素通过before或after选中
                2.在content中设置字体的编码
                3.设置字体的样式
                    fab
                    font-family: 'Font Awesome 5 Brands';
                    fas
                    font-family: 'Font Awesome 5 Free';
                    font-weight: 900; 
        */
        content: '\f1b0';
        /* font-family: 'Font Awesome 5 Brands'; */
        font-family: 'Font Awesome 5 Free';
        font-weight: 900; 
        color: blue;
        margin-right: 10px;
    }
    /*阿里矢量图*/
     p::before{
        content: '\e625';
        font-family: 'iconfont';
        font-size: 100px;
    }

图标字体原理

原理：其实就是通过@font-face引入了特定的字体文件，然后字体文件已经设置好了常用的图标，然后在通过伪元素设置特定的文字。


/*
    <i class="fab fa-accessible-icon"></i>
    fab引入相关字体
    fa-accessible-icon通过伪元素设置指定的图标文字
*/
@font-face {
  font-family: 'Font Awesome 5 Brands';
  font-style: normal;
  font-weight: normal;
  font-display: auto;
  src: url("../webfonts/fa-brands-400.eot");
  src: url("../webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.woff") format("woff"), url("../webfonts/fa-brands-400.ttf") format("truetype"), url("../webfonts/fa-brands-400.svg#fontawesome") format("svg");
}
.fa-accessible-icon:before {
  content: "\f368"; }

行高

简介：行高值的是文字占有的实际高度，我们可以通过line-height来设置文字的行高。

line-height（设置行高属性）

我们可以将line-height设置和高度一样的值，可以达到垂直居中的效果
line-height可以设置大小(px,em,rem)也可以设置整数，如果设置整数则是字体指定的倍数，如字体大小font-size设置为50px，line-height设置为1，则行高为50px
line-height默认值为1.333

字体框

字体库、框字体存在的格子，也就是说字体是存放在字体框中，我们设置font-size实际是设置字体框的大小
行高会在字体框的上下平均分配

字体的简写属性（font）

font：可以设置字体相关的所有属性，它的语法为 font：字体大小/行高字体族（行高可以默认不写，如果不写可以使用默认值）

font示例

    /*解释：设置字体权重加粗，并且字体样式为斜体，设置字体为微软雅黑、 'Times New Roman'和times，并且为衬线字体*/
    font: bold italic 50px/2  微软雅黑, 'Times New Roman', Times, serif;

文本的样式

text-align：设置文本的水平对齐方式，以下为可选值
- left：左侧对齐
- right：右侧对齐
- center：居中对齐
- justify：两端对齐

vertical-align：设置文本的垂直对齐方式，以下为可选值
- baseline：默认值，基线对齐
- top：顶部对齐
- bottom：底部对齐
- middle：居中对齐

text-decoration：设置文本修饰
- none：什么都没有
- underline：下划线
- line-through：删除线
- overline：上划线

white-space：设置页面空白（典型的可以设置文字省略号）
- normal：正常值
- nowrap：不换行
- pre：保留空白

文本省略号设置案例

    .box2{
        width: 200px;
        /* 
            white-space 设置网页如何处理空白
                可选值：
                    normal 正常
                    nowrap 不换行
                    pre 保留空白
        */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

背景

背景相关属性

background-color：设置背景颜色
background-image：设置背景图片
background-repeat：设置背景图片重复方式
background-position：设置背景图片显示位置
background-size：设置背景图片大小
background-origin：设置背景图片偏移量计算原点
background-clip：设置背景显示的范围
background-attachment：设置背景图是否跟着元素移动

background-image

可以结合background-color设置背景图片和背景颜色
如果元素大于背景图片，则背景图会平铺
如果元素小于背景图，则显示不正常，有一部分背景图无法正常显示
只有图片和元素尺寸正好一致，才能正常使用

background-repeat

repeat：默认值，背景会沿着x和y轴重复，也就是元素大于背景图平铺的原因
no-repeat：背景图不重复
repeat-x：沿着x轴重复
repeat-y：沿着y轴重复

background-position

position默认从内边距开始计算
可以通过top、left、buttom、right、center这五个方位词来设置图片的位置（此时可以把一个元素划分为9宫格），用方位词设置图片的位置必须设置两个值，如果只写一个，则另外一个值默认是center。
可以通过偏移量来指定图片的位置，使用场景，比如说我们有三个按钮，我们可以将三个按钮合并到一个图中，然后通过偏移量来设置位置显示指定的按钮

background-size

可以设置两个值，指定宽度和高度，如果只写一个则会和img标签一样，默认为auto
cover：图片比例不变，将元素铺满（尺寸会放大，显示效果不好）
contain：图片比例不变，在元素中完整显示

background-origin

center-box：背景图片的偏移量从内容区开始计算
border-box：背景图片的偏移量从边框开始计算
padding-box：背景图片的偏移量从内边距开始计算（默认值）

background-clip

conter-box：背景只在内容区显示
border-box：背景会在边框下显示（默认值）
padding-box：背景在内边距开始显示

background-attachment

scroll：默认值，会跟着元素移动
fixed：会固定在页面中，不会随着元素移动

background

background：是背景相关属性的简写属性，可以用它设置背景相关所有的属性，不过需要注意的有一下几点。

设置背景图片大小必须写在背景位置后面，也就是说background-size必须写在background-position后面，中间用/隔开
background-origin background-clip 两个样式，orgin要在clip的前边

/*解释：设置图片地址，并且设置背景颜色，图片位置为居中，图片大小为在元素中完整显示，设置图片偏移量为边框计算并且内容只是在内容区显示*/
background: url('./img/2.jpg') #bfa  center center/contain border-box content-box no-repeat ;

渐变

什么是渐变？

渐变：渐变是一种特殊的图片，通过渐变我们可以设置一些复杂的背景色，实现一个颜色像另外一个颜色过度的效果，渐变通过background-image来设置。

线性渐变

简介：我们使用linear-gradient函数来设置渐变效果，以及多个颜色，比如linear-gradient(red,yellow),则表示红色在前面，中间是过度，黄色在最后。repeating-linear-gradient来设置平铺的线性渐变

渐变的方向

to left：从左边开始
to right：从右边开始
to bottom：从下边开始
to top：从上边开始
deg：表示度数
trun：表示圈

示例

示例：background-image(background-image: linear-gradient(to right ,red, yellow 50px;

径向渐变

简介：我们可以使用radial-gradient()来设置径向渐变，默认情况下径向渐变根据元素的形状来计算，即元素为正方形时径向渐变为原型，元素为长方形时径向渐变为椭圆形

语法、位置和大小

语法：radial-gradient(大小 at 位置, 颜色位置 ,颜色位置 ,颜色位置)
位置：top right left center bottom
大小：
- circle 圆形
- ellipse 椭圆
- closest-side 近边
- closest-corner 近角
- farthest-side 远边
- farthest-corner 远角

动画

过渡

简介: 我们可以是用transition来指定一个属性发生变化时的切换效果，设置过度的属性可以创建一些非常好的效果，提升用户体验

过渡的属性

transition-property：要设置过渡效果的属性，多个属性用逗号隔开，如果全部属性都需要设置过度，则可以写all关键字，大部分的属性都支持过渡效果，我们需要注意的是，过渡必须从一个有效值向另外一个有效值切换。
transition-duration：设置过渡的持续时间
transition-timing-function：过渡的时序函数，用它来指定过渡的运行方式，它有以下几个值设置
- ease：默认值，慢速开始，先加速，再减速
- linear：匀速运动
- ease-in：加速运动
- ease-out：减速运动
- ease-in-out：先加速后减速
- cubic-bezier()：用来指定时序函数，可以在https://cubic-bezier.com查询
- steps()：用来设置步长，除了数值以外，还能设置end(在时间结束时过渡)和start（在时间开始时进行过渡）两个值
- 示例1：transition-timing-function: cubic-bezier(.24,.95,.82,-0.88);
- 示例2：transition-timing-function: steps(2, start);

transition-delay：设置过渡的延时时间
transition：过渡的简写属性

动画

简介：我们使用animation来设置动画，但是设置动画的前提必须设置动画的关键帧@keyframes，动画其实和过渡类似，不同点是动画是自动的，过渡是需要触发。

关键帧

关键帧：关键帧使用@keyframes关键字来设置

 @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：动画的延时
animation-timing-function：动画的时间函数，和过渡一致
animation-iteration-count：动画的执行次数，我们可以设置数字也可以设置infinite表示无限执行
animation-direction：表示动画执行的方向
- normal：默认值，从from执行到to，每次都是这样
- reverse：从from执行到to，每次都是这样
- alternate：从from执行到to，在从to执行到from，轮流执行
- alternate-reverse：从to执行到from，在才from执行到to，轮流执行

animation-play-state：设置动画的执行状态，play表示执行，paused表示暂停
animation-fill-mode：动画的填充模式
- none：默认值，动画执行完毕后回到初始状态
- forwards：动画执行完毕后停留在动画结束为止
- backwards：动画延时等待时，元素就处于开始为止
- both：结合了forwards和backwards

变形

变形：变形就是通过css改变元素的形状，但是它不会影响到页面的布局，我们使用transform来设置变形

变形之平移

translateX：沿着x轴方向平移
translateY：沿着y轴方向平移
translateZ：沿着z轴方向平移,但需要开启透视（perspective）

变形之旋转

rotateX
rotateY
rotateZ

body:hover .box1{
            /*
                通过旋转可以使元素沿着x y 或 z旋转指定的角度
                    rotateX()
                    rotateY()
                    rotateZ()
            */
            /* transform: rotateZ(.25turn); */
            /* transform: rotateY(180deg) translateZ(400px); */
            /* transform: translateZ(400px) rotateY(180deg) ; */
            transform: rotateY(180deg);
            /* 是否显示元素的背面 */
            backface-visibility: hidden;
        }

变形之缩放

scaleX() 水平方向缩放
scaleY() 垂直方向缩放
scale() 双方向的缩放
单位为：倍数

弹性盒flex

简介：弹性和flex是css中一种新的布局手段，它更加灵活好用，用来替代浮动（float）来完成页面的布局，flex可以让元素根据页面的大小的改变而改变。

使用方式

我们可以使用display:flex设置块级弹性元素，display:inline-flex设置行内弹性元素

什么是弹性元素？

弹性元素的直接子元素为弹性元素，弹性元素也可以是弹性容器

主轴和辅轴

弹性元素的排列方向为主轴
与主轴的垂直方向为辅轴

弹性元素属性之flex-direction

flex-direction：它指定弹性容器中，弹性元素排列的方向，可以是row、row-revese、clumn、clumn-reverse

row：默认值，弹性元素在容器中从左往右排序，它的主轴方向为自左向右
row-revese：弹性元素在容器中从右往左排序，它的主轴方向为自右向左
column：弹性元素在容器中自上向下排序，它的主轴方向为自上向下
column-revese：弹性容器在容器中自下向上排序，它的主轴方向为自下向上

弹性元素属性之flex-grow

flex-grow：用它指定容器伸展系数，当父元素有多余空间时，子元素如何伸展，父元素的剩余空间会按照比例伸缩，填写值为整型（比例）

弹性元素属性之flex-shrink

flex-shrink：用它指定容器的收缩系数，当页面大小不足以容纳子元素时，对子元素收缩
,填写值为整型（比例）

弹性容器属性之flex-wrap

flex-wrap：用来指定弹性元素是否换行

nowrap：元素不会换行
wrap：换行
wrap-reverse：元素沿着辅轴反方向换行

弹性容器属性之justify-content

justify-content：设定主轴多余空间分配（主轴上元素如何排序）

flex-start：元素沿着主轴起边排序
flex-end：元素沿着主轴终边排序
center：居中排序
space-around：空白分布元素两侧
space-between：空白均匀分布在元素间
space-evenly：空白分布元素的单侧

弹性容器属性之align-items

align-items：用来设置辅轴元素对齐方式
stretch：默认值，将元素的长度设置为相同的值
flex-start：元素不会拉升，沿着辅助起边对齐
flex-end：元素沿着辅轴终边对齐
center：居中对齐
baseline：基线对齐

弹性容器属性之align-content

align-content：设定辅助空白空间分配，可选值justify-content一致

弹性元素属性之align-self

align-self：用来覆盖align-items设定的样式

弹性元素属性之flex-basis

flex-basis：指定元素在主轴上的基础长度，如果主轴是横向的则指定的就是元素的宽度，如果主轴是纵向的则指定的是元素的高度，默认为auto，表示参考元素的自身宽度和高度，一般不使用

弹性元素属性之flex

flex：flex是flex-grow、glex-shrink、flex-basis三个属性的简写属性，它设置值的顺序为（增长缩减基础）

initial：0 1 auto
auto：1 1 auto
none：0 0 auto(元素没有弹性)

弹性元素属性之order

order：它接收一个整型值，用来指定弹性元素在弹性容器中的位置，有了它我们就不需要手动更改元素的位置

移动端

像素

简介：像素是由一个一个发光的小点组成的，这一个一个小点就是像素（分辨率1920 x 1080说的就是屏幕中的小点），在前端开发中，像素分为物理像素和css像素，这两种像素的比例可能为正比也可能不为正比

物理像素

物理像素：简介上说的小点点就是物理像素

css像素

css像素：编写网页时，我们用的像素都是css像素，在浏览器显示网页时，都会把css像素转换为物理像素然后呈现给用户，但是至于一个css像素等于多少个物理像素，由浏览器决定,默认在pc端下，1css像素等于1物理像素

视口(viewport)

视口：视口就是屏幕中用来显示网页的区域，我们可以查看视口大小来观察css像素和物理像素的比值，我们编写移动端的时候，就需要调整视口的大小

默认情况下视口宽度1920px（CSS像素）1920px（物理像素）它们的比值就是1:1
放大两倍的情况下，视口端口960px（CSS像素）1920px（物理像素）他们的比值就是1：2
结论我们可以改变视口的大小来调整css像素和物理像素的比值

最佳视口设定方法（移动端）

<meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

vw和rem适配

简介：我们编写移动端的时候，已经不能在用像素了，因为每个设备的大小都不一样，物理像素也不一样，所以我们要设定最佳视口，还有通过vw和rem适配，100vw等于视口，这样我们有了新的参照物，再因为rem是根据根元素的font-size来设定大小的，所以我们可以采用vw和rem来进行范围大小的计算。

@total-width:750;
html{
    // 设置rem的比值
    font-size: 100vw/@total-width * 40;
    background-color: #eff0f4;
}

解释

解释：在750宽度的设计图上，我们可以计算1像素等于0.13333vw，在然后我们将这个数字放大40倍，也就是0.133340=5.333，然后我们在到设计图上量取各个元素的大小，来用rem来指定，但是需要主要除去 *放大的倍数

媒体查询

简介：在响应式布局当中，网页可以根据不同的页面大小显示不同的效果，使用响应式布局，可以一个页面适配所有的设备，响应式布局的关键就是媒体查询，通过媒体查询，我们可以为不同的设备，编写不同的样式，语法：@media 查询规则{}

媒体类型

all：所有设备
print：打印设备
screen：屏幕设备
speech：屏幕阅读器
可以使用,号指定多个媒体类型，它们之间就是一个或的关系

举个例子

  @media only screen,print {
            body{
                background-color: #bfa;
            }
        }