HTML-CSS学习文档

HTML

网页的基本结构

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>
  • !DOCTYPE html
    • 文档声明，用来声明当前网页的版本，这个用来表示当前网页是遵循HTML5规范的
    • doc指Document，表示文档，文档就是网页，一个网页就是一个文档
    • type 指类型
  • html
    • html根标签，一个网页有且只有一个根标签，其他标签应该在根标签的内部
  • head
    • html的子标签（子元素）
    • head表示网页的头部，可以在head中设置网页的各种数据，head中的内容不会在网页中直接显示
    • meta
      • head的子元素，用来设置网页的元数据
      • charset=”UTF-8”，主要用来避免乱码问题
    • title
      • head的子元素，用来设置网页的标题，会显示在标签上
  • body
    • html的子标签（子元素）
    • 网页中所有可见的内容都应该写在body的里边

基本结构

  • 标签

    一个标签，也被称为是一个元素

    成对出现：<标签名>标签体</标签名>

    自结束标签：

    • <标签名>

    • <标签名/>

  • 属性

    在开始标签（或自结束标签）中可以为元素设置属性，属性用来描述元素，属性是一个名值结构，属性名=”属性值”

    一个元素可以同时指定多个属性，多个属性之间使用空格分离

    有些熟悉，属性名和属性值相同，此时可以省略属性值

    1
    <input type="radio" checked>

  • html中不区分大小写，但是建议用小写

元素之间的关系

  • 父元素

    直接包含子元素的元素是父元素

  • 子元素

    直接被父元素包含的元素

  • 祖先元素

    直接或间接包含后代元素的元素是祖先元素

    父元素也是祖先元素

  • 后代元素

    直接或间接被祖先元素包含的元素是后代元素

    子元素也是后代元素

  • 兄弟元素

    拥有相同的父元素的元素是兄弟元素

常用的标签

  • h 标题标签

  • p 标签表示一个段落

  • br 标签表示换行

  • hr 表示水平线

  • 可以通过实体在网页中来表示一些特殊符号，语法：&实体的名字; 

    1
    2
    3
    4
    &lt; 小于号
    &gt; 大于号
    &nbsp; 空格
    &copy; 版权符号

  • 列表

    • 有序列表 ol
    • 无序列表 ul
    • 定义列表 dl

  • 语义化标签

    1
    2
    3
    4
    5
    6
    7
    8
    9
    main 主要内容
    header 头部内容
    footer 底部内容
    article 表示一个独立的内容
    aside 侧边栏，和主体独立的内容
    nav 表示导航
    section 独立的区块
    ...
    pre 预格式（保留文本自身的格式）

​ 通过这些语义化标签，可以对网页中的不同内容进行描述，方便爬虫，但是大部分情况下我们不会大量使用

  • img 图片标签

  • a 超链接

    • 属性：
      • href：指定要跳转到位置
      • target：指定页面打开的位置 _self ：默认值，在当前页面打开链接 _blank : 在新的标签页打开链接
    • 内部跳转，通过修改href属性可以使超链接在页面内部进行跳转
      • #表示跳转页面的顶部
      • #id 表示跳转到页面的指定位置

  • iframe 内联框架

块元素和行内元素

在html中，元素可以被分为块元素和行内元素

  • 块元素（block）
    • 块元素会独占一行自上向下垂直排列
    • 块元素用来对网页进行布局，将一个页面分成一块一块的
    • 最常用的块元素：div
  • 行内元素（inline）
    • 行内元素只会占自身大小，自左向右水平排列
    • 行内元素一般用来放置文字
    • 最常用的行内元素：span
  • 元素的嵌套规则：
    • 块元素中可以放置块元素，也可以放置行内元素
    • 行内元素中尽量不要放置块元素
    • a元素中可以放置除它自身外的任何元素
    • p元素中不能放置块元素
  • 替换元素
    • img iframe

CSS

三种编写方式

  • 内联样式（行内样式）
  • 内部样式表
  • 外部样式表

CSS基本语法

  • 基本语法：
    选择器 声明块

  • 选择器：

    • 选择器用来指定要设置样式的元素

  • 声明块：

    • 声明块用来设置样式
    • 声明块由一对大括号括起来
    • 声明块中是一个一个声明
    • 声明是一个名值对：一个样式名对应一个（或多个）样式值，之间使用 ; 分隔

基本选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
基本选择器：
    元素选择器
        - 根据标签名选中多个元素
        - 语法：标签名{}
        - 例子：
            p{}  div{}  h1{}

    id选择器
        - 根据元素的id属性选中一个元素
        - 语法：#id{}
        - 例子：
		#p1{} #bix{} #head{}

    类选择器(最常用的选择器)
        - 根据元素的class属性选中元素
        - 语法：.class{}
        - 例子：.p1{}  .box{}  .head{}

    通配选择器
        - 选择页面中的所有元素
        - 语法： *{}

属性选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
属性选择器
    - 用来根据元素的属性来选中元素
    - 语法：
        [属性名] 选中具有该属性的元素
        [属性名=属性值] 选中指定属性值的元素
        [属性名^=属性值] 选中属性值以指定内容开头的元素
        [属性名$=属性值] 选中属性值以指定内容结尾的元素
        [属性名*=属性值] 选中属性值包含指定内容的元素
        
交集选择器
	- 作用：选中同时符合多个选择器元素
	- 语法：选择器1选择器2{}
	- 例子：
    	div[title=hello]{}
    	div.box{}
    	dib#box{}

分组选择器

1
2
3
分组选择器
    - 作用：同时选中多个选择器对应的元素
    - 语法：选择器1,选择器2,选择器3,...选择器n{}

关系选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
关系选择器
    - 根据元素之间的关系来选中元素
    - 元素之间有哪些关系：
        父子、祖先后代、兄弟

    - 子元素选择器
        作用：选中指定元素的子元素
        语法：父元素 > 子元素{}

    - 后代元素选择器
        作用：选中指定元素的后代元素
        语法：祖先 后代{}

    - 兄弟元素选择器
        作用：选中指定的兄弟元素
        语法：
            兄 + 弟 {}
                - 选中紧随其后的一个兄弟
            兄 ~ 弟 {}
                - 选中后边的所有兄弟元素

伪类选择器

1
2
3
4
5
6
7
8
9
10
11
12
伪类是一个特殊的类，用来表示元素的状态，伪类使用 : 开头
    - 像超链接，一个链接有没有被访问过就是一种特殊的状态
    在css中，可以使用 :visited来表示访问过的超链接
    - a的伪类：
        :link
            - 表示正常的超链接（未访问过的超链接）
        :visited
            - 访问过的链接
        :hover
            - 鼠标移入的元素
        :active
            - 鼠标点击的元素

结构伪类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
结构伪类：
    :root
        - 根元素
    :empty
        - 空元素
    :first-child
        - 第一个子元素
    :first-of-type
        - 同类型的第一个子元素
    :last-child
        - 最后一个子元素
    :last-of-type
        - 同类型中的最后一个子元素
    :nth-child
        - 第n个子元素
    :nth-of-type
        - 同类型中第n个子元素
    :nth-last-child
        - 倒数第n个元素
    :nth-last-of-type
        - 同类型中倒数第n个元素
    :only-child
        - 唯一的子元素
    :only-of-type
        - 同类型中唯一的子元素

否定伪类

1
2
3
4
5
6
7
/*
    :not
        - 否定伪类，除了某些元素
*/
p:not(.p1){
    color: tomato;
}

伪元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
伪元素
    - 伪元素表示的是页面中特殊的位置
    - 伪元素使用::开头
    ::before
        - 元素的开始位置（开始标签之后）
    ::after
        - 元素的结束位置（结束标签之前）
    ::first-letter
        - 首字母
    ::first-line
        - 第一行
    ::selection
        - 选中的文字的样式

    - 通过before、after可以选中元素开始或结束的位置，从而为其添加内容
        注意：这里的内容是通过CSS添加的！不算是网页中的正式内容
        1.通过它可以为元素添加一些统一的符号
        2.也可以在特殊场景下通过它们来调整一下页面的样式

样式的继承

1
2
3
4
5
样式的继承
    - 设置给祖先元素的样式，也会同时应用到其后代元素上
    - 继承的存在大大的简化了样式的编写
        但并不是所有的样式都会发生继承
        所有的布局、背景、边框等相关的样式都不会发生继承

选择器的权重

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
样式的冲突
    - 当我们使用不同的选择器，选中一个元素并设置相同的样式时，就发生了样式的冲突
    - 当样式冲突发生时，哪个样式生效由选择器的优先级（权重）决定：
        继承的样式：没有优先级
        通配选择器：0,0,0,0
        元素选择器：0,0,0,1
        类和伪类选择器：0,0,1,0
        id选择器：0,1,0,0
        内联样式：1,0,0,0

    - 比较优先级时，需要将多个选择器的优先级一起计算
        优先级高的优先显示，优先级的累加无法跨越数量级
        如果优先级一样，则优先显示靠下的
        如果为样式添加 !important,则该样式会获得最高的优先级，优先于其他样式显示，慎用！

        注意：分组选择器优先级都是单独计算的

        div.box1 0,0,1,1
        .box1 0,0,1,0

盒子模型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
盒子模型（box model）
    - 网页的布局指就是将元素摆放到网页的不同的位置
    - 布局就得先确定元素的大小
    - 在网页中每一个元素都是一个矩形，或者可以直接将其想象为是一个盒子、
        每一个盒子，都由以下几个部分组成：
            - 内容区（content）
                - 内容区在元素最内部，用来容纳子元素
                - 内容区的大小由width和height设置
            - 内边距（padding）
                - 内容区和边框之间的距离称为内边距
            - 边框（border）
                - 边框是盒子边界，离开边框就属于盒子的外部了
                - 边框会影响到盒子可见框的大小
            - 外边距（margin）
                - 盒子与盒子之间的距离称为外边距
                - 外边距不会影响盒子的大小，但是它会影响盒子的位置

                设置边框：
                    - 要设置边框，涉及到三个样式
                        border-width 边框的宽度
                            10px 20px 30px 40px 上 右 下 左
                            10px 20px 30px 上 左右 下
                            10px 20px 上下 左右
                            10px 上下左右
                            除了border-width以外，
                                也可以通过border-xxx-width来分别设置某个边框的宽度
                                xxx可以是top right bottom left
                        border-color 边框的颜色
                            同理
                        border-style 边框的样式
                            同理
                            solid 实线
                            dotted 点状虚线
                            dashed 虚线
                            double 双线

                    - border 简写属性，可以同时设置边框的三个样式
                        border:10px red solid
                        单独设置某边
                        border-top:10px red solid

                padding同理
                
                margin同理
                    由于我们的浏览器默认是按照自左到右，自上向下的顺序来排列元素的
                        所以当我们设置上和左外边距时，是改变元素自身的位置
                        但是设置下和右时，会改变其他元素的位置

            可见框
                - 盒子的可见框指可见的部分，大小由内容区、内边距、外边距
                box-sizing 用来指定盒子可见框的计算方式
                    可选值：
                        content-box 默认值，width和height用来设置内容区的大小
                        border-box 设置该值后，width和height用来设置盒可见框的大小
1
2
3
4
外边距的折叠
    - 垂直方向的相邻外边距会发生外边距折叠的现象
        兄弟元素间外边距会取较大值（这样设计是为了避免两个元素之间的距离过远）
        父子元素间子元素外边距会传递给父元素
1
2
3
4
5
6
可以将margin的值设置为auto，设置auto后，元素的外边距由浏览器自动计算

当我们将margin-left或margin-right中的一个设置为auto时，则浏览器会自动使其尽量的大
    如果将margin-left和margin-right同时设置为auto，则浏览器会使元素左右的外边距相同，
        也就是元素会在其父元素水平居中
    默认情况下，垂直外边距设置为auto时，浏览器会自动取0为外边距

行内元素的盒子模型

1
2
3
4
5
6
7
8
9
10
11
12
13
内容区
    width height
    - 行内元素的大小被内容撑开
        无法通过width和height来设置行内元素宽度高度
内边距
    padding
    - 行内元素可以设置内边距，但是垂直方向的内边距不会影响布局
边框
    border
    - 行内元素可以设置边框，但是垂直方向的边框不会影响页面的布局
外边距
    margin
    - 行内元素可以设置水平方向的外边距

overflow

1
2
3
4
5
6
7
8
9
10
当子元素大小超过父元素内容区时，子元素会从父元素中溢出（overflow）
在css通过overflow这个样式，来处理溢出内容

overflow
    - 设置元素如何处理溢出内容
    - 可选值
        visible 默认值 溢出内容直接在元素以外的位置显示
        hidden 隐藏溢出的内容
        scroll 生成双方向滚动条，通过滚动条来查看完整内容
        auto 根据需要生成滚动

display visibility

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
display
    - 用来设置元素的类型
    - 可选值：
        inline 将元素设置为行内元素
        block 将元素设置为块元素
        inline-block 行内块元素
            - 行内块兼具行内元素和块元素的特点
            - 不独占一行，又可以设置宽高
            - 注意：
                行内块的特点和文本很像，所以布局时少用
        none隐藏元素

visibility
    - 用来设置一个元素的可见性
    - 可选值：
        visible 默认值 元素可见
        hidden 元素是隐藏的在页面中不可见，但是依然占据页面的位置

文本的样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
/*
    text-align 文本的水平对齐方式
        可选值：
            left 默认值 左对齐
            center 居中对齐
            right 左对齐
            justify 两端对齐
        网页中，图片 行内块 都可以使用文本对齐的方式

    text-indent 首行缩进
        - 可以设置负值
            - 负值文字向左移动
                可以利用负值隐藏网页中的一些文字

    text-decoration 文本修饰
        - 可选值：
            none 默认值 没有修饰
            underline 下划线
            overline 上划线
            line-through 删除线
*/

p{
    background-color: #bbffaa;
    width: 200px;
    /*禁止文字的自动换行*/
    white-space: nowrap;
    /*禁止文字的溢出*/
    overflow: hidden;
    /*溢出文字设置为省略号*/
    text-overflow: ellipsis;
}
1
2
3
4
5
6
line-height 用来设置元素的行高
    行就是用来放文字的，行高就是文字所在行的高度
    文字默认是在行高中垂直居中
    
行间距 = 行高 - 字体大小
行高可以设置一个数字，那么行高将会是字体大小对应的倍数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
在网页中，每个文字被显示时都会有一个文本框与之对应
    当我们设置元素的font-size时，实际上就是在设置文本框的大小
    在文本框存在一个位置叫做基线（baseline）

文字的垂直对齐：
    默认每个文字和父元素在垂直方向都是沿着基线对齐的

vertical-align
    - 设置元素垂直对齐的方式
    - 可选值：
        baseline 默认值 子元素和父元素的基线对齐
        top 子元素文本框的顶部和父元素文本框的顶部对齐
        bottom 子元素文本框的底部和父元素文本框的底部对齐
        middle 将元素的中线和父元素基线高度+x高度一般的位置对齐
    - 开发中经常通过vertical-align来消除图片下边的空白

font-size 字体的大小
font-weight 字重
    - 可选值：
        normal 默认值 正常的粗细
        bold 加粗
        lighter 细的
font-style 字体的样式
    - 可选值
        normal 默认值 正常的
        italic 斜体
font-family 字体族，指定使用什么字体
    - 字体的分类
        serif 衬线字体
        sans-serif 非衬线字体
        monospace 等宽字体
        ...
        - 当我们将字体设置为上述类型时
            浏览器会自动选择相应的字体来显示

font
    - 简写属性
    - 可以同时设置字体相关的所有样式
    - 语法：
        font: 任意 font-size/line-height font-family
        font: bold italic 40px/1.5 Arial,"Microsoft YaHei,sans-serif";

图标字体

1
2
3
4
5
6
7
8
图标字体（iconfont）
    - 所谓的图标字体，指将小图标制作为字体文件
    - 可以使用一些第三方库
    - 使用步骤
        1.下载
        2.复制css和webfonts目录到项目下
        3.在页面中引入all.css
        4.在页面中添加标签

补充样式

1
2
3
4
5
6
7
8
9
10
outline 轮廓线
    - 和边框非常像，但是outline不会影响到元素可见框的大小

border-radius 圆角

box-shadow
    - 可以用来为元素指定阴影
    - 取值：
        box-shadow: x轴偏移量 y轴偏移量 模糊半径 扩散半径 阴影颜色
        可以设置一个inset来表示内部阴影

文档流

1
2
3
4
5
6
7
8
9
10
11
12
文档流（normal flow） 正常布局流
    - 文档流时网页中的位置，我们所创建的元素默认都存在与文档流中
    - 文档流中的元素，必须要遵循文档流的规则在网页中排列
        - 块元素
            - 块元素在文档流中自上向下垂直排列
            - 块元素的默认宽度会将父元素撑满（默认值为auto）
            - 块元素的默认高度被内容撑开

        - 行内元素
            - 行内元素在文档流中会自左向右水平排列，如果一行不足以容纳所有元素
                则会另起一行继续自左向右水平排列（和我们日常的书写相同）
            - 行内元素的默认宽度和高度都被内容撑开

水平布局等式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
子元素会在父元素内容区中排列

在文档流中，块元素的水平排列，必须遵循如下一个等式：
    子元素可见框宽度 + 子元素的水平外边距 = 包含块内容区的宽度
        200 + 600 = 800
margin-left + 可见框 + margin-right = 包含块内容区的宽度
        100 + 200 + 500 = 800 右外边距会自动修正为500
        500 + 500 + 100 = 800 右外边距会自动修正为-200
        100 + auto + 100 = 800 宽度为auto，会自动设置为600
        auto + 200 + auto = 800
        auto + auto + 200 = 800
        - 当所有的属性值中没有auto，此时浏览器会自动调整右外边距以使等式强制满足
        - 当只有一个属性值设置为auto，则浏览器会自动调整该值以使等式满足
        - 当左右外边距为auto，而width有值时，则左右外边距会设置为相等的值，以使等式满足
        - 当外边距和width同时设置为auto，则设置auto的外边距就是0

在文档流中，块元素的垂直排列，不需要遵循等式

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

浮动

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
浮动（float）
    - 是一种传统的网页的布局方式
    - 通过浮动可以使得元素脱离文档流而横向排列

    float
        - 设置元素浮动
        - 可选值：
            none 默认值 元素不浮动
            left 向左浮动
            right 向右浮动
        - 浮动的特点：
            1.设置浮动后，元素会脱离文档流，其后的元素会自动上移
            2.设置浮动后，元素会向其包含块的左侧或右侧移动
            3.如果一行之内无法容纳所有的浮动元素，则后边的元素会自动换到下一行
            4.浮动元素不会超过它上边浮动的兄第元素，最多一边齐
            5.浮动元素不会盖住文字，文字会环绕在浮动元素的周围




    浮动后，之前的布局等式就失效了

    元素脱离文档流后的特点：
        块元素：
            1.块元素不再独占一行，而是水平排列
            2.宽度和高度都被内容撑开
        行内元素：
            设置浮动行内元素可以设置宽度和高度

        总结：脱离文档流后，块元素不再独占一行，宽高被内容撑开，行内元素变成块元素

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

BFC

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
在文档流中的元素，可以将其它元素的高度撑开！
    当元素浮动，它会脱离文档流，脱离文档流后，
        无法撑开父元素的高度，导致父元素高度塌陷
    父元素高度塌陷，其后的元素会自动上移，导致布局变得混乱

高度塌陷是我们使用浮动布局时必须要解决的问题！

如何解决该问题
    1.可以直接将父元素的高度写死
        - 这样一来父元素高度写死，无法根据子元素高度的变化而变化

解决方案
    BFC(Block Formatting Context)
        - 块级格式化环境
        - 可以将BFC理解为一个隐藏的属性，当开启BFC后元素会具备如下的特征：
            1.开启BFC后，子元素的垂直外边距不会传递给父元素
            2.开启BFC后，元素不会被浮动元素所覆盖
            3.开启BFC后，元素可以包含浮动的子元素
        - 如何开启BFC:
            - 需要用一些其他的样式来简介开启BFC
            - 由于BFC是通过一些样式间接开启的，所以都会有一些副作用
                而我们要做的是找到一种可以开启，同时副作用有比较小的
            -例如：
                1.浮动会开启元素的BFC
                2.将overflow设置为一个非visible的值
                3.display:flow-root
1
2
3
1.开启BFC后，子元素的垂直外边距不会传递给父元素
2.开启BFC后，元素不会被浮动元素所覆盖
3.开启BFC后，元素可以包含浮动的子元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<style>
    /* 创建一个新的BFC来解决外边距折叠的问题 */
    .box1{
        overflow: auto;
    }

    .box2{
        height: 100px;
        width: 200px;
        background-color: orange;
        margin-bottom: 50px;
    }

    .box3{
        height: 100px;
        margin-top: 50px;
        background-color: green;
    }

    .box4{
        /* 
            BFC的高度是auto的情况下，是如下方法计算高度的
                1.如果只有inline-level，是行高的顶部和底部的距离
                2.如果有block-level，是由最底层的快上边缘和最底层块盒子的下边缘之间的距离
                3.如果有绝对定位元素，将被忽略
                4.如果有浮动元素，那么会增加高度以包括这些浮动元素的下边缘
        */
        background-color: #bfc;
        overflow: auto;
    }   

    .box5{
        height: 200px;
        width: 600px;
        border: 1px solid black;
        float: left;
        background-color: red;
    }
</style>

<body>
    <!-- 
        会创建BFC的情况：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_display/Block_formatting_context
        BFC简单概况
            1.在BFC中，box会在垂直方向上一个挨着一个的排布
            2.垂直方向的间距由margin属性决定
            3.在同一个BFC中，相邻两个box之间的margin会折叠（collapse）
            4.在BFC中，每个元素的左边缘是紧挨着包含快的左边缘的
    -->
    <div class="box1">
        <div class="box2"></div>
    </div>
    <div class="box3"></div>

    <div class="box4">
        <div class="box5"></div>
        <div class="box5"></div>
        <div class="box5"></div>
        <div class="box5"></div>
    </div>
</body>

clear

1
2
3
4
5
6
clear
    - 清除浮动元素对当前元素所产生的影响
    - 可选值：
        left 清除左侧浮动元素对当前元素的影响
        right 清除右侧浮动元素对当前元素的影响
        both 清除最大一侧浮动元素对当前元素的影响
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.clearfix::after
{
	content: "";
	display: block;
	clear: both;
}

.clearfix::before{
	content: "";
	display: table;
}

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

定位

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
position
    - 用来设置元素的定位方式
    - 可选值：
        static 默认值，元素没有开启定位
        relative 开启元素的相对定位
        absolute 开启元素的绝对定位
        fixed 开启元素的固定定位
        sticky 开启粘滞定位

相对定位：
    - 将元素的position属性设置为relative则开启了元素的相对定位
    - 相对定位的特点：
        1.开启相对定位而不设置元素的偏移量，此时元素不会发生任何变化
        2.开启相对定位不会使得元素脱离文档流，不会改变元素的性质
        3.相对定位元素是参照与其原来的位置进行定位的
        4.相对定位会提升元素的层级
    - 偏移量
        - 开启了相对定位的元素可以通过偏移量来设置元素的位置
        - 偏移量一共有四个：
            top
                - 元素上面距离定位位置上边的距离
            bottom
                - 元素下边距离定位位置下边的距离
            left
                - 元素左边距离定位位置左边的距离
            right
                - 元素右边距离定位位置右边的距离
            偏移量通常只使用两个即可定位一个元素的位置

绝对定位：
    - 将元素的position设置为absolute，则开启了元素的绝对定位
    - 特点：
        1.开启绝对定位后，如果不设置偏移量，元素的位置不会发生变化
        2.开启绝对定位后，元素会脱离文档流，同时元素性质发生变化
        3.绝对定位元素是参照与离它最近的开启了定位的祖先元素进行定位，
            如果所有的祖先元素都没有开启定位，则相对于浏览器窗口进行定位
            所以在开发中，经常在为一个元素开启绝对定位后，同时也给他的父元素开启绝对定位
        4.绝对定位会提升元素的层级

    - 绝对定位元素的包含块是谁？
        - 绝对定位元素的包含块是离他最近的开启了定位的祖先元素
        - 如果所有的祖先都没有开启定位，则它的包含块是初始包含块

盒子模型的等式
    margin-left + 可见框宽度 + margin-right = 包含块的内容区宽度
当元素开启了绝对定位后，两个新的等式诞生了
    left + margin-left + 可见框宽度 + margin-right + right = 包含块的内容区宽度
    top + margin-top + 可见框高度 + margin-bottom + bottom = 包含块的内容区高度
    
    auto + auto + 200 + auto + auto = 800
    0 + auto + 200 + auto + 0 = 800
1
2
3
4
固定定位
将position设置为fixed则开启了元素的固定定位
    固定定位也是一种绝对定位，它的大部分的特点和绝对定位是相同的
    不同点在于固定定位总是参照于浏览器的窗口进行定位
1
2
3
4
5
粘滞定位
将元素的position设置sticky则开启了元素的粘滞定位
    粘滞定位的特点和相对定位类似
定位参照物：
    粘滞定位相对于离它最近的拥有滚动条的祖先元素来定位的

弹性盒

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
弹性容器
    - 要使用弹性盒必须先将元素设置为弹性容器
        display:flex 块级弹性容器
        display:inline-flex 行内弹性容器
弹性项（弹性子元素）
    - 弹性容器的子元素都会自动变成弹性项
    - 弹性子元素都会沿着弹性容器的主轴排列
主轴
    - 主轴就是弹性子元素排列方向
    - 如何设置主轴方向：
        flex-direction
            可选值：
                row 主轴是自左向右水平排列
                column 主轴是自上向下垂直排列
                row-reverse 主轴是自右向左水平排列
                column-reverse 主轴是自下向上垂直排列
    - 设置元素是否换行
        flex-wrap
            可选值：
                nowrap 元素不会自动换行
                wrap 自动换行
                wrap-reverse 反向换行

        flex-flow:
            flex-direction 和 flex-wrap的简写属性
                可以同时设置两个样式并且没有顺序和数量的要求




侧轴（辅轴）
    - 侧轴是与主轴垂直方向的轴
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
justify-content 设置元素在主轴上的对齐方式
    可选值：
        start 默认值，元素靠主轴起始位置对齐
        end 元素靠主轴的结束位置对齐
        center 沿主轴方向居中对齐
        space-between 将主轴方向空白位置分配到两个元素之间
        space-around 将主轴方向空白位置分配到元素周围
        space-evenly 将主轴方向的空白分配到元素的一侧
align-items 设置元素在侧轴上的对齐方式
    可选值：
        stretch 拉伸，元素会自动拉伸将侧轴撑满
        start 元素靠侧轴的起始位置对齐
        end 元素靠侧轴的结束位置
        center 元素在侧轴上居中对齐
align-content 设置元素在侧轴上空白的分配、
    可选值：
        space-between 将主轴方向空白位置分配到两个元素之间
        space-around 将主轴方向空白位置分配到元素周围
        space-evenly 将主轴方向的空白分配到元素的一侧

元素居中的方式：
    1.利用margin：0 auto 来实现水平居中
    2.利用定位来实现水平和垂直居中
    3.利用弹性盒来实现水平和垂直居中

弹性子元素的样式（弹性项的样式）
    flex-basis
        - 容器的基础大小，会根据主轴的方向自动设置width或height
            主轴水平，设置宽度
            主轴垂直，设置高度
        - 可选值：
            auto 默认值 以元素width或height为准
    flex-shrink
        - 弹性子元素的收缩系数
            当父元素容纳不下所有子元素时，如何自动缩小元素大小
        - 元素的收缩是根据flex-basis和flex-shrink综合计算的
            收缩系数越大，元素基础大小越大，元素就缩的越多
        - 默认值为1，可以根据需要设置，如果设置为0则表示不收缩
    flex-grow
        - 弹性子元素的生长系数
        - 当容器中有富余空间时，如何分配到子元素
        - 默认值为0，元素默认不会变大

    flex
        - 上述三个属性的简写属性
        - 属性顺序：
            grow shrink basis
        - 可选值
            initial 默认值 0 1 auto
            auto 相对于 1 1 auto
            none 相对于 0 0 auto



    align-self
        - 弹性子元素的样式
        - 用来单独设置某个弹性子元素的对齐方式

    order
        - 用来指定弹性子元素的位置

雪碧图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
当我们第一次使用按钮时，在按钮上会有这种闪烁的现象出现
    这是因为，浏览器在加载外部资源时，是以懒加载的形式来完成的
    像hover active这些图片都是在按钮状态触发时才加载的，网速即使再快也需要时间来完成加载
    在图片加载完成前，超链接处在没有背景图片可以显示的状态，所以会显示空白

我们可以通过CSS-Sprite来解决这个问题
    - 所谓CSS-Sprite就是指将多个小的图片统一放入到一个大图片（雪碧图）中
        然后通过偏移量来切换不同的图片
    - 使用CSS-Sprite可以将多个小图片进行整合，减少客户端发送请求的次数，提升用户体验
    - 在早期的网页中，几乎所有的小图标都是通过雪碧图来实现的，随着图标字体的广泛应用，雪碧图的使用也变得相对少了一些
        雪碧图
            1.雪碧图是位图，位图放大后会失真
            2.雪碧图无法修改颜色
            3.雪碧图支持彩色图标

        图标字体
            1.图标字体是矢量图，可以任意放大缩小不会失真
            2.图标字体可以任意修改颜色
            3.图标字体只支持单色图标

背景

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
background-repeat 背景的重复方式
    - 可选值：
        repeat 默认值，背景图片会沿元素的水平垂直双方向重复
        repeat-x 水平方向重复
        repeat-y 垂直方向重复
        no-repeat 不重复
        space 背景图片充满元素，无法完整充满使用空白隔开
        round 背景图片自动缩放以充满元素
background-position 设置背景图片的位置
    - 可选值：
        top bottom left right center
        - 可以从上述关键字中任意选两个来设置背景图片的位置
        - 如果只传了一个关键字，则第二个默认就是center

    background-position：水平偏移量 垂直偏移量


background-size 用来设置背景图片的尺寸
    background-size: 宽 高;
    - 可选值：
        contain 缩放图片使得图片可以在元素中完整显示，元素有的地方可能不显示背景
        cover 缩放图片使得图片可以将元素撑满，图片可能显示不全


background：简写属性，可以同时设置所有的背景相关的样式
    background: #bfa url() no-repeat 400px 400px/cover
1
2
3
4
5
6
background-clip
    - 设置背景图片显示的区域
    - 可选值：
        border-box 默认值，背景会延伸到边框的下边
        padding-box 背景会延伸到内边距下
        content-box 背景只会在内容区显示
  • 渐变
1
2
3
/* background-image: linear-gradient(to top left,red,orange); */
/* background-image: linear-gradient(60deg,red,orange); */
background-image: linear-gradient(blue, red 10%, orange 40px, purple);

表单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!-- 
        表单（form）
            - 在网页中，通过表单来将信息提交给服务器

        使用form标签来创建一个表单
     -->
    <!-- action用来指定表单要提交到哪 -->
    <form action="target.html">
        <!-- 表单项 -->
        <!-- 
            文本框
                - input type属性为text
                - 如果希望表单中的数据真的被提交给服务器
                    必须为表单指定name
        -->
        <input type="text" name="username">

        <!-- 
            提交按钮
                - input type属性为submit
                - 可以通过value属性来修改按钮上面的文字
         -->
        <input type="submit" value="登录">
    </form>

<form action="target.html">
        <div>
            <!-- 
                placeholder
                    - 用来设置文本框的占位符
                value
                    - 文本框中可以通过value来指定默认值
                disabled
                    - 禁用表单项，不会被提交
                readonly
                    - 表单项无法修改，但是可以提交
                checked
                    - 设置默认选中的单选和多选
                selected
                    - 设置默认选中的下拉项
             -->
            用户名 <input type="text" name="username" placeholder="请输入用户名" value="admin" readonly>
        </div>

        <div>
            <!-- 
                使用input type为password来创建密码框，密码框中的内容不会以明文显示
                默认情况下，表单中的数据会通过url地址来发送，url地中?后的内容被称为查询字符串（query string）
                    查询字符串是一个一个的名值对结构，一个数据名对应一个值，多个名值对之间使用&隔开
                        数据发送给服务器后，服务器可以根据数据名获取对应的值
             -->
            密码 <input type="password" name="password">
        </div>

        <div>
            <!-- 
                单选框
                    - 使用input type=radio来创建一个单选框
                        单选框是通过name属性来分组的，相同name属性的为一组
                        像这种选择框，不需要用户填写内容，还必须为表单项指定value，value最终会成为提交给服务器的值
             -->
            性别：
            <input type="radio" name="gender" value="male" checked>男
            <input type="radio" name="gender" value="female">女
        </div>

        <div>
            <!-- 
                多选框
                    - 使用input type=checkbox来创建多选框
             -->
            爱好：
            <input type="checkbox" name="hobby" value="ppq">乒乓球
            <input type="checkbox" name="hobby" value="lq">篮球
            <input type="checkbox" name="hobby" value="ymq">羽毛球
            <input type="checkbox" name="hobby" value="zq">足球
        </div>

        <div>
            <!-- 
                下拉框
                    - 使用select来创建下拉列表
                    - 添加 multiple 属性后可以将下拉列表设置为多选的下拉列表
             -->
            你最喜欢的编程语言
            <select name="language" multiple>
                <option value="js">JavaScript</option>
                <option selected>Java</option>
                <option>Python</option>
            </select>
        </div>

        <div>
            <input type="submit" value="登录">
            <!-- 重置按钮 重置表单 -->
            <input type="reset">
            <!-- 普通按钮 -->
            <input type="button">
        </div>

总结居中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
1.使用盒子模型
直接通过盒子模型 margin: 0 auto; 来实现居中
    - 原理：利用了盒子模型在水平布局时的等式
        左右外边距 + 可见框宽度 = 包含快宽度
    - 缺点：
        1.不能处理垂直居中问题
        2.居中的元素必须指定宽度

2.使用定位
    通过如下代码来实现：
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    - 原理：利用定位后新的等式来实现居中
        左右偏移量 + 左右外边距 + 可见框的宽度 = 包含快的宽度
        上下偏移量 + 上下外边距 + 可见框的宽度 = 包含快的高度
    - 缺点：
        1.设置的样式稍微多一些
        2.必须指定元素的大小

3.使用表格来居中
    - 将父元素的display设置table-cell，然后通过vertical-align:middle来实现垂直居中
        然后再通过子元素 margin:0 auto; 来实现水平居中
    - 也可以将子元素转换为inline-block，然后通过text-align:center来实现水平居中
    - 缺点：
        1.父元素设置为单元格后，默认宽度被内容撑开

4.使用弹性盒来居中
    - 代码:
        display: flex;
        justify-content: center;
        align-items: center;
    - 缺点：
        几乎没有

变形

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
通过变形可以对元素的位置、大小、角度等进行修改
    - perspective 用来设置透视的效果
        需要一个长度作为值，长度表示人眼和屏幕的距离
        一般设置在body上

    - transform用来设置变形或旋转
        需要通过不同的变形函数来实现元素的变形
            translateX() x轴平移
            translateY() y轴平移
                - 设置平移时，如果使用百分比单位，百分比是相对于元素自身大小计算
            translateZ() 用来设置z轴平移
                - z轴平移会感觉到元素大小的变化
            translate() 可以设置x和y轴的平移
            translate3d() 可以设置x y z的平移
        当我们对元素进行变形时，只会影响到元素自身，不会影响其他元素的位置

        通过不同的旋转函数来实现元素的旋转
            rotateX 沿x轴旋转
            rotateY 沿y轴旋转
            rotateZ 沿x轴旋转
                单位：
                    deg 度
                    turn 圈

        可以通过translate和rotate同时为元素实现旋转和变形，但是两者的前后顺序不同，最后的变换结果也会不同

    - transform-origin 指定变形的原点

    - scale用来设置缩放
        scaleX() x轴缩放，一般写系数
        scaleY() y轴缩放，一般写系数
        scale()  x y 缩放，一般写系数
        scaleZ z轴缩放（需要3d下才能看出效果）

    - transform-style: preserve-3d 用来开启3d效果

过渡

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
过渡（transition）
    - 通过过渡可以使得元素在样式发生变化时，一点一点的改变

    - transition-property 
        - 应用过渡效果的属性，可以指定多个值
        - all 表示所有样式
    
    - transition-duration
        - 过渡效果所花费的时间
        - 单位：
            s 秒
            ms 毫秒

    - transition-delay
        - 过渡效果的延时

    - transition-timing-function
        - 指定过渡的时间的曲线
        - 可选值：
            ease 默认值 先加速然后减速 
            linear 匀速运动
            ease-in 加速运动
            ease-out 减速运动
            cubic-bezier 贝塞尔曲线，可以自定义
            steps() 分布执行动画

    - transition 
        - 过渡的简写属性，可以同时设置过渡的所有样式

动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
animation 动画
    - animation-name 指定动画的名字

    - animation-duration 一次动画执行的时间
    
    - animation-iteration-count 动画执行的次数
        - infinite 一直执行

    - animation-delay 动画的延时

    - animation-timing-function 时间函数

    - animation-direction 动画的方向
        - 可选值：
            normal 默认值
            reverse 动画反向执行
            alternate 动画正向反向交替执行
            alternate-reverse 和alternate相反

    - animation-fill-mode 动画的填充模式
        - 可选值：
            none 默认值 延迟时元素保持不变，动画执行结束恢复原状
            forwards 延迟时元素保持不变，动画执行结束保持to的状态
            backwards 延迟时元素变为from状态，动画执行结束恢复原状
            both 延迟时元素变为from状态，动画执行结束保持to的状态

    - animation-play-state 动画的播放状态
        - 可选值：
            paused 暂停
            running 播放

    - animation 简写属性可以同时设置所有动画相关的样式

    - 通过keyframeas来定义关键帧
        - from 表示动画的开始位置
        - to 表示动画的结束位置
        - 也可以使用百分比数值

    - 设置steps时，from第一下不算是第一步

网格布局

网格容器

  • 要使用网格布局必须先设置网格布局

  • 使用 display:grid 或 display:inline-grid 来设置网格布局

  • 默认情况下，我们开启的是一个单列的网格布局

  • grid-template-columns 用来设置网格布局的列数

    1
    2
    3
    4
    5
    grid-template-columns: 1fr 200px 2fr 1fr;
    grid-template-columns: repeat(5,1fr);
    grid-template-columns: repeat(auto-fill,minmax(200px,auto));
    /* 为网格线命名 */
    grid-template-columns: [a] 200px [b] 200px [c] 200px [d];
    • repeat() 来重复的设置
      • 第一个值：
        • auto-fill 自动计算列，尽可能多的生成列，能最小就最小
        • auto-fit 自动计算列，尽量让列可以容纳下所有元素
      • 第二个值：
        • minmax(最小值,最大值)
        • 可选值：像素、auto、min-content、max-content

  • grid-template-rows 用来设置网格布局的行数

  • column-gap 列间距

  • row-gap 行间距

  • gap 行间距 列间距

  • justify-items 设置网格中元素水平方向的对齐方式

    • 默认为stretch，当网格项没有宽度时会拉伸

  • align-items 设置网格中元素垂直方向的对齐方式，同水平类似

  • justify-content align-content 设置网格项的整体对齐

  • grid-template-areas 可以设置命名的区域如何在容器中排布

    • 在设置前先要给网格项命名
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    .outer {
        display: grid;
        border: 4px orange solid;
        grid-gap: 10px;
        grid-template-columns: 200px 200px 200px 200px;
        grid-template-rows: 100px 200px 200px 100px;
        grid-template-areas:
            "hd hd . ."
            "sd main main main"
            "sd main main main"
            "ft ft ft ft"
        ;
    }

    .outer div {
        border: 4px red solid;
    }

    .box1 {
        grid-area: hd;
    }

    .box2 {
        grid-area: sd;
    }

    .box3 {
        grid-area: main;
    }

  • grid-auto-flow 设置网格项的排列方式

    • 可选值：
      • row 默认值，优先填充行，行满了会自动创建新行
      • column 优先填充列，列满了会自动换到下一列，此时不会自动生成行
      • dense 紧凑的，容器中有位置，后边的元素就会自动的补位

  • grid-auto-rows/grid-auto-columns 指定自动行/列的大小

    1
    2
    3
    4
    /* 一个值指自动行的大小为当前值 */
    grid-auto-rows: 100px; 
    /* 多个就重复这几个值,如下第四行就是100px */
    grid-auto-rows: 100px 200px 300px;

网格项

  • 网格容器的子元素都会自动变为网格项

  • grid-column-start/grid-column-end 网格列的起始/结束位置

    1
    2
    3
    4
    grid-column-start: 2;
    grid-column-end: 4;
    /* 也可以使用份数 */
    grid-column-end: span 2;

  • grid-row-start/grid-row-end 网格行的起始/结束位置

  • grid-column: grid-column-start/grid-column-end 同时设置列开始和结束

  • grid-row: grid-row-start/grid-row-end 同时设置行开始和结束

  • grid-area 同时设置行列的开始和结束，也可以为区域命名

    1
    2
    grid-area: grid-row-start/grid-column-start/grid-row-end/grid-column-end;
    grid-area: hd;

  • 如果叠加了，可以通过z-index来调整网格项的层级

  • justify-self/align-self 单独设置某一个网格项在轨道中的对齐方式

CSS实现静态瀑布流

  • 如果只是实现静态数据的瀑布流，可以使用纯CSS来完成，但是有如下几个缺点
    1. 图片是一列一列的排列，并不是和正常的瀑布流一样从左往右依次排列
    2. 不能动态加载图片，一旦加载图片，已经渲染的图片会再次排列
  • 使用CSS来实现瀑布流主要靠 column-count 这个属性，将一个元素的内容分成指定数量的列，然后通过添加媒体查询来完成瀑布流
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
body{
    display: flex;
    justify-content: center;
}
.shell{
    max-width: 1300px;
    column-count: 5;
    column-gap: 15px;
}
.image{
    margin-bottom: 15px;
}
.image img{
    width: 100%;
}
@media (max-width:1200px){
    .shell{
        column-count: 4;
    }
}
@media (max-width:850px){
    .shell{
        column-count: 3;
    }
}
@media (max-width:600px){
    .shell{
        column-count: 2;
    }
}

移动端

  • 相对单位
    • em 相对与自己的font-size，如果自己没有fant-size，则会继承父元素的font-size，算下来也是相对于自己的font-size
    • rem 相对于html的font-size
    • vw 相对于视口大小
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
像素（px）
          - 像素是屏幕上一个一个会发光的小点
          - 物理像素
              - 会发光的小点
          - css像素
              - 我们编写样式时使用px
      
          - 我们编写样式时使用css像素，屏幕呈现图像时使用的物理的像素
              我们默认情况下在pc中，一个css像素对应一个物理像素（1 ：1）
          - 当我们在浏览器中或系统中对网页进行缩放时，像素比会发生变化
              比如：当我们将网页放大1.5倍时，CSS像素是不变的，
                  而物理像素会变为原来的1.5倍大（1 ：1.5）

      视口（viewport）
          - 浏览器的可视区域称为视口

      移动端
          - 移动端的项目通常都会运行在手机中
              手机屏幕清晰度都是非常的高的（物理像素越小，清晰度就越高）

          - 同样是12px的字体，在显示器中看起来正合适
              但是到了手机中，就是看不清
              也就是说，如果将pc端的页面直接在手机中呈现，效果是很差的

          - 为了使得pc端页面可以在手机中正常显示，
              在显示pc端页面时，移动端的浏览器会自动将视口宽度转换为980px
              如果pc端页面大小超过了980px，浏览器会自动对页面进行缩小，使得网页可以在浏览器中完整呈现
              但是即使这样，网页在移动端浏览器中的体验依然非常的不好

          - 移动端浏览器，默认的像素比是：
              980 ：xxx
                  980 : 1170
                  980 : 1080
          
          - 为了在移动端有一个更好的体验，公司可以为手机设置一个专门的页面
          - 每一个移动设备在出厂时，都会设计一个最佳的像素的比，只有达到了最佳的像素比时，才能确保网页在移动端中有一个最佳的效果
          - 例如：
              iPhone 12 pro的像素比是 1 : 3   1个css像素 对应 3个物理像素
          - 要使得浏览器有一个最佳效果，必须先使得网页变成最佳像素比
              目前：980(视口大小) : 1170(手机屏幕物理像素) => 390 : 1170
              期望：1 : 3
              可以通过调整视口的大小来改变像素比

              当一个视口的宽度可以使得像素比变为最佳像素比时，这个视口就被称为完美视口
              iPhone12 pro的完美视口就是 390
              但是，不同手机的完美视口是不同的，如果简单粗暴设置为390，这样一来只能在该手机中取得最佳效果
                  其他手机就不行了
              我们希望我们的页面在不同的设置中都能以完美视口来呈现
                  在12pro，视口是390
                  在se中，视口是375

              <meta name="viewport" content="width=device-width, initial-scale=1.0"> 完美视口
              记住！凡是开发需要在移动端中访问的页面，都要加上完美视口
              
      适配问题
          - 开启完美视口后，任何移动设备都能获得一个最佳的浏览效果
              但是，这样却导致了不同设备下视口宽度不同
              同样是390px，在12 pro下是全屏，但到了se下就出现了滚动条，到了iPad下就剩下了一半了！
              这样一来，我们就不能在移动端项目中再使用px作为单位了！
          - 可以使用vw来解决这个问题，vw - viewport width 视口宽度
              1vw = 1% 视口宽度

          - 实际开发中，设计图的宽度都是像素为单位的，有375 750 1125 414
          - 在将设计图转换为页面时，单位vw
          - 以750宽的设计图为例 750px = 100vw    1px = 0.1333333vw

媒体查询

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
媒体查询（media query）
          - 通过媒体查询可以为不同的设备，不同的屏幕大小设置不同的样式

          @media 设备类型{}
              all 任意类型的设备
              screen 带有屏幕的设备
              speech 屏幕阅读器
              print 打印设备

              @media screen,print  或
              @media not screen 非
              @media (min-width:500px) and (max-width:800px) 与
              @media only screen 只

          @media (min-width:500px)   
              min-width 指定最小视口，大于等于指定值时，样式生效
              max-width 指定最大视口，小于等于指定值时，样式生效

  • 媒体特性描述了浏览器、输出设备，或是预览环境的具体特征，通常会将媒体特性描述为一个表达式，每条媒体特性表单时都必须用括号括起来

  • 方式一：通过@media和@import使用不同的css规则（常用）

    1
    2
    /* @import是可以和媒体查询结合来使用 */
    @import url(./css/body_bgc.css) (max-width:800px);

  • 方式二：使用media属性为 <style> , <link> , <source> 和其他HTML元素指定特定的媒体查询

    1
    <link rel="stylesheet" media="screen and (max-width:800px)" href="./css/body_bgc.css">

  • 方式三

    1
    2
    3
    4
    5
    @media (max-width: 800px) {
        body {
            background-color: orange;
        }
    }

响应式布局

1
2
3
4
5
6
7
8
9
响应式布局
          - 指网页会更具窗口大小的改变而改变
          - 响应式布局，可以使得一个页面同时在多种设备中使用，并且有一个较好的体验！降低我们的开发成本
          - 但是这种响应式页面，适合内容比较简单的页面，
              如果是内容多的，布局复杂的页面还是建议pc端一套，移动端一套
          - 响应式布局主要就是借助媒体查询来实现的
          - 编写的原则
              1. 移动优先
              2. 渐进增强

HTML5新增全局属性

1
2
3
4
5
6
7
<div class="box" data-name="ear" data-age="18" data-height="1.88"></div>

<script>
    const boxEl = document.querySelector(".box");
    const { name, age, height } = boxEl.dataset;
    console.log(name, age, height);  // ear 18 1.88
</script>

CSS函数

  • CSS变量

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <style>
      	/* 对于HTML来说，:root表示<html>元素，除了优先级更高之外，与html选择器相同。 */  
        :root{
            /* 定义了一个变量 */
            /* 只有后代元素可以使用 */
            --main-color:#f3c258;
        }

        .box{
            color: var(--main-color);
        }

        .title{
            color: var(--main-color);
        }
    </style>

    <body>
        <div class="box">我是box</div>
        <h1 class="title">我是title</h1>
    </body>

  • calc函数

    • calc()函数允许在声明CSS属性值时执行一些计算
    • 计算支持加减乘除的运输
    • + 和 - 运算符的两边必须要有空白字符
    • 通常用来设置一些元素的尺寸或者位置

  • blur函数

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
      <style>
        .box {
          height: 100px;
          width: 100px;
          /* blur函数 */
          filter: blur(10px);
        }

        p {
          font-size: 40px;
        }

        .box3 {
          width: 100%;
          height: 600px;
          background: url("https://tse3-mm.cn.bing.net/th/id/OIP-C.mH9YLFEL5YdVxJM82mjVJQAAAA?rs=1&pid=ImgDetMain") no-repeat 0 0/cover;
          position: relative;
        }

        .box4 {
          height: 100px;
          width: 100px;
          background-color: orange;
          margin: 0 auto;
        }

        .box5 {
          position: absolute;
          height: 100px;
          top: 0;
          backdrop-filter: blur(10px);
        }
      </style>

    <body>
      <div class="box">
        <p>12312313123</p>
      </div>

      <!-- 
        backdrop-filter 是使透过该层的底部元素模糊化
        backdrop-filter属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。 
        因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。
        -->
      <div class="box3">
        <div class="box4"></div>
        <div class="box5">
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquid saepe illo quaerat deserunt repudiandae vitae
          nulla provident reprehenderit tempore molestias maiores magni ipsam repellendus esse, culpa exercitationem optio,
          vero aut.
        </div>
      </div>
    </body>

Less

  1. 定义变量

    1
    2
    @mainColorOne: #bfa;
    @mainColorTwo: orange;

  2. 选择器嵌套

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    .box1 {
      width: 200px;
      height: 200px;
      background-color: @mainColorOne;

      .box2 {
        width: 100px;
        height: 100px;
        background-color: @mainColorTwo;
      }

      .link {
        color: red;

        /* 相当于 .link:hover */
        &:hover {
          color: green;
        }
      }
    }

  3. 混入

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    .nowrap_ellipsis {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .box1 {
        background-color: #f00;
        /* 混入 */
        .nowrap_ellipsis();
    }

    .box2 {
        width: 150px;
        background-color: #bfa;
        .nowrap_ellipsis();
    }

  4. 传参

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    .box_border(@borderWidth: 5px, @borderColor: purple) {
        border: @borderWidth solid @borderColor;
    }

    .box1 {
        background-color: #f00;
        /* 不传参就是默认值 */
        .box_border();
    }

    .box2 {
        width: 150px;
        background-color: #bfa;
        .nowrap_ellipsis();
        /* 传参 */
        .box_border(10px, red);
    }

  5. 混入和映射

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .box_size {
        width: 100px;
        height: 200px;
    }

    .box1 {
        /* 混入和映射 */
        width: .box_size()[width];
        background-color: #f00;
    }

Scss

  1. 定义变量

    1
    2
    3
    4
    5
    $primary-color: #333;

    body {
      color: $primary-color;
    }

  2. 选择器嵌套

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    .box1 {
      width: 200px;
      height: 200px;
      background-color: @mainColorOne;

      .box2 {
        width: 100px;
        height: 100px;
        background-color: @mainColorTwo;
      }

      .link {
        color: red;

        /* 相当于 .link:hover */
        &:hover {
          color: green;
        }
      }
    }

  3. 模块引入

    1
    2
    3
    4
    5
    6
    7
    8
    // _base.scss
    $font-stack: Helvetica, sans-serif;
    $primary-color: #333;

    body {
      font: 100% $font-stack;
      color: $primary-color;
    }
    1
    2
    3
    4
    5
    6
    7
    // styles.scss
    @use 'base';

    .inverse {
      background-color: base.$primary-color;
      color: white;
    }

  4. 混入和传参

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    @mixin theme($theme: DarkGray) {
      background: $theme;
      box-shadow: 0 0 1px rgba($theme, .25);
      color: #fff;
    }

    .info {
      @include theme;
    }
    .alert {
      @include theme($theme: DarkRed);
    }
    .success {
      @include theme($theme: DarkGreen);
    }