CSS学习

Posted on | In ,

CSS初识

CSS简介

CSS的主要使用场景就是美化网页，布局样式的。

CSS是==层叠样式表==的简称，有时我们也会称之为==CSS样式表==或==级联样式表==

CSS也是一种标记语言

CSS语法规范

CSS规则由两个主要的部分构成：==选择器==以及==一条或多条声明==

1
2
3
4
5
6
<style>
<!--h1:选择器  color:red【声明（属性:值）】-->
h1 {
    color: red;
}
</style>

CSS代码风格

1.样式格式书写

  1. 紧凑格式

    1
    h3 {color: red;font-size: 20px}

  2. 展开格式【==推荐==】

    1
    2
    3
    4
    h1 {
        color: red;
        font-size: 20px
    }

2.样式大小写

==强烈推荐样式选择器，属性名，属性值关键字全部使用小写字母==，特殊情况除外

3.空格规范

1
2
3
4
h1 {
    color: red;
    font-size: 20px
}
  1. 属性值前面，冒号后面，保留一个空格
  2. 选择器（标签）和大括号中间保留空格

Emmet语法

Emmet语法的前身是Zen coding，它使用缩写，来提高html/css的编写速度

1.快速生成HTML结构语法

  1. 生成html骨架，直接输入!号，按tab键即可
  2. 生成标签，直接输入标签名 按tab键即可，例如div ，按tab键即可生成div完整标签
  3. 如果想要生成多个相同标签 加上*就可以了
  4. 如果有父子级关系的标签，可以用> ，例如ul>li就可以了
  5. 如果有兄弟关系的标签，用+就可以了，比如div+p
  6. 如果生成带有类名或者id名字的，直接写.demo或者#demo tab键就可以了
  7. 如果生成的div类名是有顺序的，可以用自增符号$
  8. 如果想要在生成的标签内部写内容可以用{}表示

2.快速生成CSS样式语法

CSS基本采取简写形式即可

  1. 比如w200 按tab 可以生成width: 200px
  2. 比如h500 按tab 可以生成heigth: 500px
  3. 比如tac 按tab 可以生成text-align: center

选择器

选择器（选择符）就是根据不同需求把不同的标签选出去这就是选择器的作用。简单来说，就是**选择标签用的**

  1. 找到所需要的标签，选择器（选对人）
  2. 设置这些标签的样式，比如颜色为红色（做对事）

选择器分为基础选择器和复合选择器两个大类

基础选择器

  • 基础选择器是由==单个选择器组成==的
  • 基础选择器又包括：标签选择器、类选择器、id选择器和通配符选择器

1.标签选择器

==标签选择器==（元素选择器）是使用==HTML标签名称==作为选择器，按标签名称分类。为页面中某一类标签指定统一的CSS样式。

1
2
3
4
h1 {
    color: red;
    font-size: 20px
}

作用

标签选择器可以把某一类标签全部选择出来，比如所有的div标签和所有的span标签

优点

能快速为页面中的同类型的标签统一设置样式

缺点

不能设置差异化样式，只能选择全部的当前标签

2.类选择器

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器

1
2
3
4
.类名 {
	属性1： 属性值1;
	...
}

类选择器-多类名

我们可以给一个标签指定==多个类名==，从而达到更多的选择样式，这些类名都可以选出这个标签，简单理解就是一个标签有多个名字。

1.多类名的使用方式

1
<div class="class1 class2">亚瑟</div>
  1. 在标签class属性中写多个类名
  2. 多个类名中间必须用空格分开
  3. 这个标签就可以分别具有这些类名的样式

2.多类名的使用场景

可以把一些标签元素相同的样式（共同的部分）放到一个类里面。这些标签就可以调用这个公共的类，然后再调用自己独有的类

3.id选择器

id选择器可以为标有特定id的HTML元素指定特定的样式

HTML元素以==id属性==来设置id选择器，CSS中id选择器以==“#”==来定义

id选择器和类选择器的区别

  1. 类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。
  2. id选择器好比人的身份证号码，全中国是唯一的，不得重复。
  3. 最大的不同在于使用次数上。类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和JavaScript搭配使用

4.通配符选择器

在CSS中，通配符选择器使用==“*”==定义，它表示选取页面中所有元素（标签）

1
2
3
4
* {
	属性1： 属性值1;
	...
}

复合选择器

  • ==复合选择器==是建立在基础选择器之上，对基础选择器进行组合形成的
  • 主要包括：后代选择器、子选择器、并集选择器、伪类选择器等等

1.后代选择器【重要】

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

语法

1
2
3
4
元素1 元素2 {
	样式说明
	...
}

上述语法表示选择元素1里面的所有元素2（后代元素）

  • 元素1和元素2中间用**空格隔开**
  • 元素1是父级，元素2是子级，最终选择的是**元素2**
  • 元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可
  • 元素1，元素2可以是任意基础选择器

举例

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!--引入 element-ui 的样式-->
    <link rel="stylesheet" type="text/css" href="./css/elementui.css">
    <!-- 必须先引入vue  后使用element-ui -->
    <script src="./js/vue.js"></script>
    <!-- 引入element 的组件库-->
    <script src="./js/elementui.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="root">
        <ol>
            <li>我是ol的孩子</li>
            <li>我是ol的孩子</li>
            <li>我是ol的孩子</li>
        </ol>
        <ul>
            <li>我是ul的孩子</li>
            <li>我是ul的孩子</li>
            <li>我是ul的孩子</li>
        </ul>
    </div>
</body>
<script type="text/javascript">

    Vue.config.productionTip = false
    const vm = new Vue({
        el: "#root",
        data: {

        },


    })
</script>

</html>
<style>
    ol li {
        color: pink
    }

    ul li {
        color:gray
    }
</style>

2.子元素选择器【重要】

**子元素选择器（子选择器）**只能选择作为某元素的==最近一级子元素==，简单理解就是选亲儿子元素

语法

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

上述语法表示**选择元素1里面的所有直接后代（子元素）元素2**

举例

1
div>p {样式说明} /*选择div里面最近一级p标签元素*/
  • 元素1和元素2之间用**大于号**隔开
  • 元素1是父级，元素2是子级，**最终选择的是元素2**
  • 元素2必须是**亲儿子**，其孙子，重孙之类都不归他管，你也可以叫他亲儿子选择器

3.并集选择器【重要】

**并集选择器可以选择多组标签，同时为他们定义相同的样式**。通常用于集体声明

并集选择器是各选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分

语法

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

举例

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!--引入 element-ui 的样式-->
    <link rel="stylesheet" type="text/css" href="./css/elementui.css">
    <!-- 必须先引入vue  后使用element-ui -->
    <script src="./js/vue.js"></script>
    <!-- 引入element 的组件库-->
    <script src="./js/elementui.js"></script>
    <title>并集选择器</title>
</head>

<body>

    <div>熊大</div>
    <p>熊二</p>
    <span>光头强</span>
    <ul class="pig">
        <li>小猪佩奇</li>
        <li>猪爸爸</li>
        <li>猪妈妈</li>
    </ul>

</body>

</html>
<style>
    /*
    *要求1：请把熊大熊二改为粉色
    */
    /* div,
    p {
        color: pink;
    } */

    /*要求2：请把熊大和熊二改为粉色 还有 小猪一家改为粉色*/
    div,
    p,
    .pig {
        color: pink;
    }
</style>

PS：我们并集选择器喜欢竖着写。一定要注意，最后一个选择器，不需要加逗号

  • 元素1和元素2（…）中间用==逗号隔开==
  • 逗号可以理解为==和==的意思
  • 并集选择器通常用于集体声明

4.伪类选择器

**伪类选择器**用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。

伪类选择器书写最大的特点是**用冒号（:）表示**，比如:hover、:first-child

伪类选择器很多，比如有链接伪类、结构伪类等。

1.链接伪类选择器【重要】

1
2
3
4
a:link /*选择所有未被访问的链接*/
a:visited /*选择所有已被访问的链接*/
a:hover /*选择鼠标指针位于其上的链接    【重要】*/
a: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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>链接伪类选择器_1</title>
</head>

<body>
    <a href="#">小猪佩奇</a>
    <a href="www.xxxxxxx.com">未知的网站</a>
</body>
<script type="text/javascript">

   
</script>

</html>
<style>
   /*未访问的链接：置为黑色,去掉下划线*/
   a:link {
       color: #333;
       text-decoration: none;
   }
   /*已经访问的链接：置为橙色*/
   a:visited {
       color: orange;
   }
    /*选择鼠标经过的链接*/
    a:hover {
       color: skyblue;
   }

   /*选择按下鼠标还没有弹起的链接*/
   a:active {
       color: green;
   }
</style>

链接伪类选择器注意事项

  1. 为了确保生效，请按照LVHA的循顺序声明 :link :visited :hover :active
  2. 记忆法：love hate 或 LV hao
  3. 因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式

链接伪类选择器实际工作开发中的写法

1
2
3
4
5
6
7
8
9
/*a是标签选择器 所有的链接*/
a {
 color:gray;
}
 /*选择鼠标经过的链接*/
a:hover {
 color: skyblue;
}

2.:focus伪类选择器

**:focus伪类选择器**用于选取获得焦点的表单元素

焦点就是光标，一般情况类表单元素才能获取，因此这个选择器业主要针对于表单元素来说

1
2
3
input:focus {
	background-color: yellow;
}

举例

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Document</title>
</head>

<body>
    <input/>
</body>
<script type="text/javascript">

   
</script>

</html>
<style>
   input:focus {
       background-color: yellow;
   }
</style>

总结

选择器 作用 特征 使用情况 隔开符号及用法
后代选择器 用来选择后代元素 可以是子孙后代 较多 符号是空格 例如.nav a
子代选择器 选择最近一级元素 只选亲儿子 较少 符号是大于 例如.nav>p
并集选择器 选择某些相同样式的元素 可以用于集体声明 较多 符号是逗号 例如.nav,.header
链接伪类选择器 选择不同状态的链接 跟链接相关 较多 重点记住a {} 和a:hover 实际开发的写法
:focus选择器 选择获得光标的表单 跟表单相关 较少 input:focus 记住这个写法

元素显示模式

1.什么是元素显示模式？

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

元素显示模式就是==元素（标签）以什么方式进行显示==，比如div标签自己占一行，比如一行可以放多个span标签

HTML元素一般分为块元素和行内元素两种类型。

块元素

常见的块元素有h1标签~h6标签、p标签、div标签、ul标签、ol标签、li标签等，其中div标签是最典型的块元素

块级元素的特点

  1. 比较霸道，自己==独占一行==
  2. ==高度、宽度、外边距以及内边距==都可以控制
  3. ==宽度==默认是容器（父级宽度）的100%
  4. 是一个容器及盒子，里面可以放==行内或者块级==元素

注意：

  • 文字类的元素内不能使用块级元素
  • p标签主要用于存放文字，因为p里面不能放块级元素，特别是不能放div
  • 同理，h1~h6等都是文字类块级标签，里面也不能放其他块级元素

行内元素

常见的行内元素有a标签、strong标签、b标签、em标签、i标签、del标签、s标签、ins标签、u标签、span标签等，其中span标签是最典型的行内元素，有的地方也将行内元素称为内联元素

行内元素的特点

  1. 相邻行内元素在一行上，一行可以显示多个
  2. 高、宽度直接设置是==无效==的
  3. 默认宽度就是==它本身内容的宽度==
  4. 行内元素==只能容纳文本或其他行内元素==

注意：

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

行内块元素

在行内元素中有几个特殊的标签====》img标签、input标签、td标签，它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素

行内块元素的特点

  1. 和相邻行内元素（行内块）在一行上，但是他们时间会有空白缝隙，一行可以显示多个（行内元素特点）
  2. 默认宽度就是它本身内容的宽度（行内元素特点）
  3. 高度、行高、外边距以及内边距都可以控制（块级元素特点）

元素显示模式转换

特殊情况下，我们需要元素模式的转换，简单理解：一个模式的元素需要另外一种模式的特性。比如想要增加a标签的触发范围。

1.转换为块元素【重要】

语法：display:block;

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Document</title>
</head>

<body>
    <a href="#">行内元素</a>
    <a href="#">行内元素</a>
</body>
<script type="text/javascript">
    
   
</script>

</html>
<style>
   a {
    display: block;
    width: 200px;
    height: 300px;
    background-color: skyblue;
   }
</style>

2.转换为行内元素

语法：display:inline;

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Document</title>
</head>

<body>
    <div>块级元素</div>
    <div>块级元素</div>
</body>
<script type="text/javascript">
    
   
</script>

</html>
<style>
   div {
    display: inline;
    background-color: skyblue;
   }
</style>

3.转换为行内块【重要】

语法：display:inline-block;

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Document</title>
</head>

<body>
    <span>行内转为行内块</span>
    <span>行内转为行内块</span>
    <div>块转行内块</div>
    <div>块转行内块</div>
</body>
<script type="text/javascript">
    
   
</script>

</html>
<style>
   span {
       display: inline-block;
       height: 200px;
       width: 240px;
       background-color: skyblue;
   }
   div {
       display: inline-block;
       height: 300px;
       background-color: red;
   }
</style>

属性

背景

通过CSS背景属性，可以给页面袁术添加背景样式

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

1.背景颜色

background-color属性定义了元素的背景颜色，默认是transparent【透明】

语法

1
background-color: 颜色值

2.背景图片

**background-image**属性定义了元素的背景图像。实际开发常见于logo或者一些装饰性的小图片或者超大的背景图片，优点是非常便于控制位置

语法

1
background-image: none | url(url) /*不要拉下url()*/

3.背景平铺

**background-repeat**属性可以在HTML页面上对背景图像进行平铺【默认情况下是平铺的】

语法

1
background-repeat: repeat | no-repeat | repeat-x | repeat-y

4.背景图片位置

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

语法

1
background-position: x y;

参数代表的意思是：x坐标和y坐标。可以使用**方位名词和精确名词**

参数值 说明
length 百分数 | 由浮点数和单位标识符组成的长度值
position top | center | bottom | left | center | right 方位名词

注意

  1. 参数是方位名词
    • 如果指定的两个值是方位名词，则前后两个值前后顺序无关，例如left top 和top left效果一致
    • 如果只指定了一个方位名词，另一个值省略，则第二个值默认是居中对齐
  2. 参数是精确单位
    • 第一个值肯定是x坐标，第二个一定是y坐标
    • 如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中
  3. 参数是混合单位
    • 如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标

5.背景固定

background-attachment属性可以设置背景图像是否固定或者随着页面的其余部分滚动【默认是scroll】

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

1
background-attachment: scroll | fixed
参数 作用
scroll 背景图像是随对象内容滚动
fixed 背景图像固定

6.背景属性复合写法

为了简化简化背景属性的代码，我们可以将这些属性合并简写在同一个属性**background**中，从而节约代码量

当使用简写属性时，没有特定的书写顺序，一般习惯约定顺序为：

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

7.背景色半透明

CSS3为我们提供了背景颜色半透明的效果

语法

1
background: rgba(0,0,0,0.3);
  • 最后一个参数是alpha透明度，取值范围在0~1之间
  • 我们习惯把0.3的0省略掉，写为background: rgba(0,0,0,.3)
  • 背景半透明是指==盒子背景==半透明，盒子里面的内容不受影响

CSS三大特性

CSS有三个非常重要的特性：**层叠性、继承性、优先级**

层叠性

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

层叠性规则：

  • 样式冲突，遵循的是就近原则，哪个样式离结构近，就执行哪个样式【我觉得应该是哪个在下，哪个执行（后来者居上）】
  • 样式不冲突，不会层叠

继承性

子元素没有指定样式的可以继承父元素的样式

行高的继承性

1
2
3
4
5
6
body {
 font: 12px/1.5 Microsoft YaHei;
}
div {
    font-size: 14px; /*此时div文字大小14px，行高21px*/
}
  • 行高可以跟单位也可以不跟单位【不跟单位的时候就是当前元素文字大小(font-size)的1.5倍】
  • 这样可以让行高根据字体大小变化，更具有灵活性

优先级

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

  • 选择器相同，则执行层叠性
  • 选择器不同，则根据选择器权重执行
选择器 选择器权重
继承或者* 0,0,0,0
元素选择器 0,0,0,1
类选择器，伪类选择器 0,0,1,0
ID选择器 0,1,0,0
行内样式 style=”” 1,0,0,0
!important 重要的 ≈无穷大

注意点：

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

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

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

  4. 权重可以叠加，但是不会进位，例如10个元素选择器是0,0,0,10

  5. **继承的权重是0**，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是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
    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>优先级</title>
        <style>
            /*父亲的权重值很高，但是继承过来就是0*/
           #father {
               color: red;
           }
           p {
               color: pink;
           }
        </style>
    </head>

    <body>
        <div id="father">
            <p>你笑起来真好看</p>
        </div>
    </body>

    </html>

  6. 所以我们看元素优先执行哪个样式，先看该元素有没有被单独选择出来【a链接自带默认样式】

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

  • 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
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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>权重练习题</title>
    <style>
        /*单独选择出来了，所以不算继承出来的*/
       .nav li {
           color:red;
       }
       .nav .firstli {
           color: pink;
       }
    </style>
</head>

<body>
    <div>
        <ul class="nav">
            <li class="firstli">人生四大悲</li>
            <li>家里没宽带</li>
            <li>宽带不够快</li>
            <li>手机没流量</li>
            <li>学校没wifi</li>
        </ul>
    </div>
</body>

</html>

盒子模型【重要】

  • 能够准确阐述盒子模型的4个组成部分
  • 能够利用边框复合写法给元素添加边框
  • 能够计算盒子的实际大小
  • 能够利用盒子模型布局模块案例
  • 能够给盒子设置圆角边框
  • 能够给盒子添加阴影
  • 能够给文字添加阴影

页面布局要学习三大核心，盒子模型，浮动和定位。学习好盒子模型能非常好的帮助我们布局页面。

1.看透网页布局的本质

网页布局过程：

  1. 先准备号相关的网页元素，网页元素基本都是盒子Box
  2. 利用CSS设置好盒子样式，然后摆放到相应位置
  3. 往盒子里面装内容

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

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

image-20220327201702414

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

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

1
2
3
4
5
6
7
8
9
10
11
竹板这样一打呀
别的咱不夸
盒子模型实际开发用处非常大
border是边框
content内容哒
padding内边距
非常重要啦
边框与内容的距离主要就靠它
margin外边距
它是干啥的？
盒子与盒子的距离就靠它说话

1.边框（border）

border可以设置元素的边框。边框有三部分组成：**边框宽度（粗细）、边框样式、边框颜色**

语法

1
2
/*solid 实线边框 dashed 虚线边框 dotted 点线边框*/
border: border-width || border-style || border-color
属性 作用
border-width 定义边框粗细，单位是px
border-style 边框的样式
border-color 边框颜色

复合写法

1
2
3
4
/*整合写法*/
border: 1px solid red
/*分开写法*/
border-top | border-bottom | border-left | border-right: 1px solid red

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

  1. 测量盒子样式大小的时候，不量边框
  2. 如果测量的时候包含了边框，则需要width/height减去边框宽度

表格的细线边框

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

语法

1
border-collapse:collapse
  • collapse单词是合并的意思
  • border-collapse:collapse; 表示相邻边框合并在一起

2.内容（content）

盒子中的内容

3.内边距（padding）

padding属性用于设置内边距，即边框和内容之间的距离

语法

1
2
3
4
padding: 5px 10px 20px 30px /*上5px 右10px 下20px 左30px*/
padding: 5px 10px 20px; /*上5px 左右10px 下20px*/
padding: 5px 10px; /*上下5px 左右10px*/
padding: 5px; /*上下左右5px*/

当我们给盒子指定内边距后，发生了2件事情：

  1. 内容和边框有了距离，添加了内边距
  2. padding影响了盒子实际大小

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

好处：可以巧妙应用，因为盒子中某些文字字数不一样，我们可以给每个盒子宽度，直接给padding最合适【详见新浪导航栏案例】

解决方案

如果保证盒子跟效果图大小保持一致，则让width/height减去多出来的内边距大小即可。【比如效果图是w:240px,h:240px】

1
2
3
4
5
div {
 width: 200px;
 height: 200px;
 padding: 20px
}

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

1
2
3
4
5
6
7
8
9
10
div {
 width:300px;
 height: 100px;
 background-color: purple;
}
div p {
 padding: 30px;
 background-color: skyblue;
}

PS：没有撑开元素

4.外边距（margin）

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

外边距典型应用

1.块级盒子水平居中

外边距可以让块级盒子水平居中，但是必须满足两个条件：

  1. 盒子必须指定了宽度（width）
  2. 盒子左右的外边距都设置为auto
1
.header {width:960px; margin: 0 auto;}

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

  • margin-left: auto;margin-right: auto;
  • margin: auto;
  • margin: 0 auto;

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

外边距合并

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

主要有两种情况

  1. 相邻块元素垂直外边距的合并
  2. 嵌套块元素垂直外边距的塌陷
1.相邻块元素垂直外边距的合并
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .damao .ermao {
        width: 200px;
        height: 200px;
        background-color: pink;
    }
    .damao {
        margin-bottom: 100px;
    }
    .ermao {
        margin-top: 200px;
    }
</style>
<body>
    <div class="damao">大毛</div>
    <div class="ermao">二毛</div>
</body>
</html>

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

image-20211118191419670

**解决方案：**尽量给一个盒子添加margin值

2.嵌套块元素垂直外边距的塌陷
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .father {
        width: 400px;
        height: 400px;
        background-color: purple;
        margin-top: 50px;
    }
    .son {
        width: 200px;
        height: 200px;
        background-color: pink;
        margin-top: 100px;
    }
</style>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

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

image-20211118192426293

解决方案：

  1. 可以为父元素定义上边框
  2. 可以为父元素定义上内边距
  3. 可以为父元素添加overflow: hidden

还有其他方法，比如浮动、固定、绝对定位的盒子不会有塌陷问题

清除内外边距

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

1
2
3
4
5
/*这句话也是我们css的第一行代码*/
* {
 padding: 0; /*清除内边距*/
 margin: 0; /**清除外边距*/
}

注意：行内元素为了照顾兼容行，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内元素就可以了

3.圆角边框

CSS3新增，兼容ie9以上版本浏览器

**border-radius**属性用于设置元素的外边框圆角

语法

1
border-radius: length;

radius半径（圆的半径）原理：（椭）圆与边框的交集形成圆角效果

image-20211119142000618

  • 参数值可以为数值或百分比的形式
  • 如果想要设置一个圆，将border-radius修改为正方形宽高的一半，或者直接写为50%
  • 如果想要设置一个圆角矩形，设置长方形高度的一半即可
  • 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
  • 分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圆角边框的用法</title>
</head>
<style>
    .yuanxing {
        width: 200px;
        height: 200px;
        background-color: pink;
        /*将border-radius设置为正方形宽高的一半，就可以画出来圆*/
        border-radius: 50%;
    }
    .juxing {
        width: 300px;
        height: 100px;
        background-color: pink;
        /*圆角矩形设置为高度的一半*/
        border-radius: 50px;
    }
</style>
<body>
    <!--圆形的做法:将border-radius设置为正方形宽高的一半-->
    <div class="yuanxing"></div>
    <!--圆角矩形的做法：将border-radius设置为高度的一半-->
    <div class="juxing"></div>
</body>
</html>

4.盒子阴影

CSS3新增了盒子阴影，我们可以使用**box-shadow**属性为盒子添加阴影。

语法

1
2
/**水平位置 垂直位置 虚实程度(0是实，越大越虚) 阴影的大小 阴影的颜色 内外阴影*/
box-shadow: h-shadow v-shadow blur spread color inset
值 描述
h-shadow 必需。水平阴影的位置。允许负值
v-shadow 必须。垂直阴影的位置。允许负值
blur 可选。模糊距离
spread 可选。阴影的尺寸
color 可选。阴影的颜色。请参阅CSS颜色值
insert 可选。将外部阴影（outset）改为内部阴影

注意：

  1. 默认的是**外阴影(outset)**，但是==不可以==写这个单词，否则会导致阴影无效
  2. 盒子阴影==不会占用==空间，不会影响其他盒子排列
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
        margin: 100px auto;
        box-shadow: 10px 10px 10px 10px rgba(0,0,0,.3);

    }
</style>
<body>
    <div></div>
</body>
</html>

5.文字阴影

在CSS3中，我们可以使用**text-shadow**属性将阴影应用于文本

语法

1
text-shadow: h-shadow v-shadow blur color
值 描述
h-shadow 必需。水平阴影的位置。允许负值
v-shadow 必须。垂直阴影的位置。允许负值
blur 可选。模糊距离
color 可选。阴影的颜色。请参阅CSS颜色值

CSS浮动

  • 能够说出为什么需要浮动
  • 能够说出浮动的排列特性
  • 能够说出3种最常见的布局方式
  • 能够说出为什么需要清除浮动
  • 能够写出至少2种清除浮动的方法
  • 能够完成学成在线的页面布局

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

  • 普通流（标准流）
  • 浮动
  • 定位

2.浮动的基本概念

1.为什么需要浮动？

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

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

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

2.什么是浮动？

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

语法

1
选择器 {float: 属性值};
属性值 描述
none 元素不浮动（默认值）
left 元素向左浮动
right 元素向右浮动

3.浮动特性（重难点）

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

  1. 浮动元素会脱离标准流（脱标）
  2. 浮动的元素会一行内显示并且元素顶部对齐
  3. 浮动的元素会具有行内块元素的特性

1.脱标

设置了浮动（float）的元素最重要特性：

  1. 脱离标准普通流的控制（浮）移动到指定位置（动），（俗称脱标）
  2. 浮动的盒子不再保留原先的位置

image-20211119155258043

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box1 {
        float: left;
        width: 200px;
        height: 200px;
        background-color: pink;
    }
    .box2 {
        width: 300px;
        height: 300px;
        background-color: rgb(0,153,255);
    }
</style>
<body>
    <div class="box1">浮动的盒子</div>
    <div class="box2">标准流的盒子</div>
</body>
</html>

2.浮动元素一行排列

如果多个盒子都设置了浮动，则它们会按照属性值一行显示并且顶端对齐排列

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

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

任何元素都可以设置浮动，不管原先是什么模式的元素，添加浮动之后具有**行内块元素**相似的特性

如果行内元素有了浮动，则不需要转换块级\行内块元素就可以直接给宽度和高度

  • 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
  • 浮动的盒子中间是没有缝隙的，是紧挨着一起的
  • 行内元素同理【但是行内元素没有设置浮动前是根据自身内容设置宽度的】

4.浮动布局注意点

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

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

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

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

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

5.清除浮动

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

思考题：我们前面浮动元素有一个标准流的父元素，他们有一个共同的特点，都是有高度的。但是，所有的父盒子都必须有高度吗？

理想中的情况是让子盒子撑开父亲，有多少孩子，父盒子就有多高。但是由于浮动的原因，子盒子浮动又不占位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。

  1. 父级没高度
  2. 子盒子不浮动了
  3. 影响下面布局了，我们就应该清除浮动了

image-20211120191207968

  • 由于浮动元素不在占用原文档流的位置，所以他会对后面排版产生影响

2.清除浮动本质

  • 清除浮动的本质就是清除浮动元素造成的影响
  • 如果父盒子本身有高度，则不需要清除浮动
  • 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

语法

1
选择器 {clear: 属性值;}
属性值 描述
left 不允许左侧有浮动元素（清除左侧浮动的影响）
right 不允许右侧有浮动元素（清除右侧浮动的影响）
both 同时清除左右两侧浮动的影响

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

清除浮动的策略是：闭合浮动【只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子】

3.清除浮动方法

  1. 额外标签法也称为隔墙法，是W3C推荐的做法
  2. 父级添加overflow属性
  3. 父级添加after伪元素
  4. 父级添加双伪元素

1.额外标签法

额外标签法会在浮动元素末尾添加一个空的标签，例如

1
<div class="clear"></div>

或者其他标签【**必须是块级元素**】

1
<br/>

举例

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>

    .box {
        width: 1200px;
        border: 1px solid red;
    }

    .damao {
        float: left;
        width: 200px;
        height: 300px;
        background-color: pink;
    }

    .ermao {
        float: left;
        width: 200px;
        height: 300px;
        background-color: purple;
    }

    .clear {
        clear: both;
    }


    .daye {
        width: 1000px;
        height: 400px;
        background-color: skyblue
    }
</style>
<body>
    <div class="box">
        <div class="damao"></div>
        <div class="ermao"></div>
        <div class="clear"></div>
    </div>
    <div class="daye"></div>
</body>
</html>
  • 优点：通俗易懂，书写方便
  • 缺点：添加很多无意义的标签，结构化较差

2.父级添加overflow属性

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

子不教，父之过，注意是给父元素添加代码

  • 优点：代码简洁
  • 缺点：无法显示溢出的部分

3.:after伪元素法

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

语法

1
2
3
4
5
6
7
8
9
10
.clearfix:after {
	content: "";
	display: block;
	height： 0;
	clear: both;
	visibility: hidden;
}
.clearfix {/*IE6、7专有*/
	*zoom: 1;
}

举例

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .clearfix:after {
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

    .clearfix {
        /*IE6、7专有*/
        *zoom: 1;
    }

    .box {
        width: 1200px;
        border: 1px solid red;
    }

    .damao {
        float: left;
        width: 200px;
        height: 300px;
        background-color: pink;
    }

    .ermao {
        float: left;
        width: 200px;
        height: 300px;
        background-color: purple;
    }


    .daye {
        width: 1000px;
        height: 400px;
        background-color: skyblue
    }
</style>

<body>
    <div class="box clearfix">
        <div class="damao"></div>
        <div class="ermao"></div>
    </div>
    <div class="daye"></div>
</body>

</html>
  • 优点：没有增加标签，结构更简单
  • 缺点：照顾低版本浏览器
  • 代表网站：百度、淘宝网、网易等

4.双伪元素清除浮动

也是给父元素添加，相当于在前面也堵一道墙

语法

1
2
3
4
5
6
7
8
9
10
11
12
13
.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {/*IE6、7专有*/
    *zoom: 1;
}

举例

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .clearfix:before,
    .clearfix:after {
        content: "";
        display: table;

    }

    .clearfix:after {

        clear: both;

    }

    .clearfix {
        /*IE6、7专有*/
        *zoom: 1;
    }



    .box {
        width: 1200px;
        border: 1px solid red;
    }

    .damao {
        float: left;
        width: 200px;
        height: 300px;
        background-color: pink;
    }

    .ermao {
        float: left;
        width: 200px;
        height: 300px;
        background-color: purple;
    }


    .daye {
        width: 1000px;
        height: 400px;
        background-color: skyblue
    }
</style>

<body>
    <div class="box clearfix">
        <div class="damao"></div>
        <div class="ermao"></div>
    </div>
    <div class="daye"></div>
</body>

</html>

定位

  • 能够说出为什么要用定位
  • 能够说出定位的4种分类
  • 能够说出4种定位自身的特点
  • 能够说出为什么常用子绝父相布局
  • 能够写出淘宝轮播图布局
  • 能够说出显示隐藏的2种方式以及区别

1.定位的基本概念

1.为什么需要定位？

  1. 浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子
  2. 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子

2.定位组成

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

定位=定位模式+边偏移

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

1.定位模式

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

值 语义
static 静态定位
relactive 相对定位
absolute 绝对定位
fixed 固定定位

2.边偏移

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

边偏移属性 示例 描述
top top:80px 顶端偏移量，定义元素相对于其父元素上边线的距离
bottom bottom:80px 底端偏移量，定义元素相对于其父元素下边线的距离
left left:80px 左侧偏移量，定义元素相对于其父元素左边线的距离
right right:80px 右侧偏移量，定义元素相对于其父元素右边线的距离

3.静态定位 static （了解）

静态定位是元素的默认定位方式，无定位的意思

语法

1
选择器 {position: static}
  • 静态定位按照标准流特性摆放位置，它没有边偏移
  • 静态定位在布局时很少用到

4.相对定位 relative（重要）

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

语法

1
选择器 {position: relative;}

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

  1. 它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）
  2. 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标，继续保留原来位置）

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

5.绝对定位 absolute（重要）

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

语法

1
选择器 {position: absolute}

绝对定位的特点：(务必记住)

  1. 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document文档）
  2. 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置
  3. 绝对定位不再占有原先的位置（脱标）

**PS:**两个一样的盒子relative不会重叠，absolute会重叠

6.子绝父相

子级使用绝对定位，父级则需要相对定位

  1. 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子
  2. 父盒子需要加定位限制子盒子在父盒子内显示
  3. 父盒子布局时，需要占有位置，因此父亲是能是相对定位

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

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

7.固定定位fixed（重要）

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

语法

1
选择器 {position: fixed}

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

  1. 以浏览器的可视窗口为参考点移动元素
    1. 跟父元素没有任何关系
    2. 不随滚动条的滚动而滚动
  2. 固定定位不再占有原先的位置

固定定位也是脱标的，其实固定定位也可以看作是一种特殊的绝对定位

8.粘性定位 sticky（了解）

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

语法

1
选择器 {position: sticky;top: 10px}

粘性定位的特点：

  1. 以浏览器的可视窗口为参照点移动元素（固定定位特点）
  2. 粘性定位占有原先的位置（相对定位特点）
  3. 必须添加top、left、right、bottom其中一个才有效

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

9.定位叠放次序 z-index

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

语法

1
选择器 {z-index: 1;}
  • 数值可以是正整数、负整数或0，默认是auto，数值越大，盒子越靠上
  • 如果属性值相同，则按照书写顺序，后来居上
  • 数字后面不能加定位
  • 只有定位的盒子才有z-index属性

10.定位特殊特性

  1. 绝对定位和固定定位也和浮动类似

    1. ==行内元素==添加==绝对==或者==固定==定位，可以直接设置高度和宽度
    2. ==块级元素==添加==绝对==或者==固定==定位，如果不给宽度或者高度，默认大小是内容的大小

  2. 脱标的盒子不会触发外边距塌陷

    浮动元素、绝对定位（固定定位）元素的都不会触发外边距合并的问题

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

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

    但是绝对定位（固定定位）会压住下面标准流的盒子+内容

显示与隐藏

类似于网站广告，当我们点击关闭就不见了，但是我们重新出阿信页面，会重新出来

本质：让一个元素在页面中隐藏或者显示出来

  1. display 显示隐藏
  2. visibility 显示隐藏
  3. overflow 溢出显示隐藏

1.display属性

display属性用于设置一个元素应如何显示

  • display: none; 隐藏对象
  • display: block; 除了转换为块级元素之外,同时还有显示元素的意思

display隐藏元素后，不再占有原来的位置

2.visibility 可见性

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

  • visibility: visible; 元素可视
  • visibility:hidden; 元素隐藏

visibility隐藏元素后，继续占有原来的位置

如果隐藏元素想要原来位置，就用visiblity: hidden

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

3.overflow溢出

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

属性值 描述
visible 不剪切内容也不添加滚动条
hidden 不显示超过对象尺寸的内容，超过的部分隐藏掉
scroll 不管超出内容。总是显示滚动条
auto 超出自动显示滚动条，不超出不显示滚动条

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

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

CSS高级技巧

  • 能够使用精灵图
  • 能够使用字体图标
  • 能够写出CSS三角
  • 能够写出常见的CSS用户界面样式
  • 能够说出常见的布局技巧

精灵技术

**为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度**，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）

核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了

精灵图的使用

使用精灵图核心：

  1. 精灵技术主要针对于==背景图片==使用，就是把多个小背景图片整合到一张大图片中
  2. 这个大图片也称为sprites 精灵图或者雪碧图
  3. 移动背景图片位置，此时可以使用background-position
  4. 移动的距离就是这个目标图片的x和y坐标，注意网页中的坐标有所不同
  5. 因为一般情况下都是往上往左移动，所以数值是负值
  6. 使用精灵图的时候需要精确测量，每个小背景图片的大小和位置

字体图标

字体图标使用场景：主要用于显示网页中通用、常用的一些小图标

精灵图是有诸多优点的，但是缺点很明显

  1. 图片文件还是比较大的
  2. 图片本身放大和缩小会失真

此时，有一种技术的出现很好的解决了以上问题，就是字体图标iconfont

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

优点：

  • 轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求
  • 灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等
  • 兼容性：几乎支持所有的浏览器，请放心使用

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

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

  1. 字体图标的下载
  2. 字体图标的引入（引入到我们html页面中）
  3. 字体图标的追加（以后添加新的小图标）

推荐下载网站

具体步骤

以iconmoon举例使用

先去iconmoon中挑选图标下载，下载完毕之后，注意原先的文件不要删，后面会用

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

  2. 在CSS样式中全局声明字体：简单理解把这些字体文件通过css引入我们页面中【一定注意字体文件路径问题】

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    /* 字体声明 */
         @font-face {
      font-family: 'icomoon';
      src:  url('fonts/icomoon.eot?p4ssmb');
      src:  url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf?p4ssmb') format('truetype'),
        url('fonts/icomoon.woff?p4ssmb') format('woff'),
        url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg');
      font-weight: normal;
      font-style: normal;
      font-display: block;
    }

  3. html标签内添加小图标

    image-20211122175817726

  4. 声明字体样式

    1
    2
    3
    span {
    	font-family: 'icomoon'; /**要和font-face字体一样*/
    }

追加字体图标

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

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

image-20211122180527115

CSS三角

做法如下：

image-20211122181744815

想要朝哪边的三角，只需要将其余三个部分的颜色置为透明即可

1
2
3
4
5
6
7
8
div {
	width: 0;
	height: 0;
	line-height: 0;
	font-size: 0;
	border: 50px solid transparent;
	border-left-color: pink;
}

CSS用户界面样式

所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验

  • 更改用户的鼠标样式
  • 表单轮廓
  • 防止表单有拖拽

1.鼠标样式 cursor

1
li {cursor: pointer;}

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

属性值 描述
default 小白 默认
pointer 小手
move 移动
text 文本
not-allowed 禁止 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li style="cursor: default;">我是默认的小白鼠标样式</li>
        <li style="cursor: pointer;">我是小手样式</li>
        <li style="cursor: move;">我是移动样式</li>
        <li style="cursor: text;">我是文本样式</li>
        <li style="cursor: not-allowed;">我是禁止样式样式</li>
    </ul>
</body>
</html>

2.轮廓线 outline

给表单添加outline: 0;或者 outline: none;样式之后，就可以去掉默认的蓝色边框

3.防止拖拽文本域 resize

实际开发中，我们文本域右下角是不可以拖拽的

1
textarea {resize: none;}

vertical-align属性应用

CSS的**vertical-align**属性使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐

官方解释：用于设置一个元素的垂直对齐方式，但是它只针对与行内元素或行内块元素有效

语法

1
vertical-align: baseline | top | middle | bottom
值 描述
baseline 默认。元素放置在父元素的基线上
top 把元素的顶端与行中最高元素的顶端对齐
middle 把此元素放置在父元素的中部
bottom 把元素的顶端与行中最低元素的顶端对齐

image-20211122185312031

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    img {
        vertical-align: middle;
    }
</style>
<body>
    <img src="xxx.jpg" alt=""> 嘀嘀嘀嘀
</body>
</html>

解决图片底部默认空白缝隙问题

bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐

主要解决方法有两种：

  1. 给图片添加**vertical-align:middle|top|bottom**等 【提倡使用的】
  2. 把图片转换为块级元素 display:block;

溢出的文字省略号显示

1.单行文本溢出显示省略号

必须满足三个条件

1
2
3
4
5
6
/**1.先强制一行内显示文本【默认normal自动换行】*/
white-space: nowrap; 
/**2.超过的部分隐藏*/
overflow: hidden;
/**3.文字用省略号替代超出的部分*/
text-overflow: ellipsis;

2.多行文本溢出显示省略号

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

1
2
3
4
5
6
7
8
overflow:hidden;
text-overflow: ellipsis;
/**弹性伸缩盒子模型显示*/
display: -webkit-box;
/*限制在一个块元素显示的文本的行数*/
-webkit-line-clamp: 2;
/*设置或检索伸缩和对象的子元素的排列方式*/
-webkit-box-orient: vertical

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

常用布局技巧

巧妙利用一个技术更快更好的布局

  1. margin负值的运用
  2. 文字围绕浮动元素
  3. 行内块的巧妙运用
  4. css三角强化

1.margin负值的巧妙运用

1.浮动造成的右厚边框变成细边框

image-20211122210449187

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    ul>li {
        float: left;
        list-style: none;
        width: 200px;
        height: 500px;
        background-color: pink;
        border: 1px solid red;
        /*设定一个负边框宽度的值即可解决该问题*/
        margin-left: -1px;

    }
</style>
<body>
    
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

2.悬浮效果时边框变颜色

image-20211122211310246

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    ul>li {
        position: relative;
        float: left;
        list-style: none;
        width: 200px;
        height: 500px;
        background-color: pink;
        border: 1px solid red;
        /*设定一个负边框宽度的值即可解决该问题*/
        margin-left: -1px;

    }

    /* 如果盒子没有定位，则鼠标经过添加相对定位即可
    ul li:hover {
        position: relative;
        border: 1px solid blue;
    } */

    /* 如果盒子有定位，则用z-index设置层叠数值*/
    ul li:hover {
        z-index: 1;
        border: 1px solid blue;
    }
</style>
<body>
    
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

2.文字围绕浮动元素巧妙运用

巧妙运用浮动元素不会压住文字的特性

image-20211122213513166

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin:0;
        padding: 0;
    }
    .box {
        width: 300px;
        height: 70px;
        background-color: pink;
        margin: 0 auto;
    }
    .pic {
        float: left;
        
        width: 120px;
        height: 60px;
    }
    .pic img {
        width: 100%;
    }
</style>
<body>
    
    <div class="box">
        <div class="pic">
            <img src="../img/bg.jpg" alt="">
        </div>
        <p>【集锦】热身赛-巴西0-1秘鲁 内马尔替补两人血染赛场</p>
    </div>
</body>
</html>

3.行内块的巧妙应用

image-20211122215643292

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .box {
        text-align: center;
    }
    .box a {
        display: inline-block;
        width: 36px;
        height: 36px;
        background-color: #f7f7f7;
        border: 1px solid #ccc;
        text-align: center;
        line-height: 36px;
        text-decoration: none;
        color: #333;
        font-size: 14px;
    }
    .box .prev,
    .box .next {
        width: 85px;
    }

    .box .current,
    .box .elp {
        background-color: #fff;
        border:0
    }
    .box input {
        width: 36px;
        height: 45px;
        border: 1px solid #ccc;
        outline: none;
    }
    .box button {
        width: 60px;
        height: 36px;
        background-color: #f7f7f7;
        border: 1px solid #ccc;
    }
</style>
<body>
    <div class="box">
        <a href="#" class="prev">&lt;&lt;上一页</a>
        <!-- <a href="#">1</a>  -->
        <a href="#" class="current">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">6</a>
        <a href="#" class="elp">...</a>
        <a href="#">8</a>
        <a href="#" class="next">&gt;&gt;下一页</a>
        到第
        <input type="text">
        页
        <button>确认</button>

    </div>
</body>
</html>

4.CSS三角强化

image-20211122223740163

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box1 {
        width: 0;
        height: 0;
        /*把上边框宽度调大*/
        /* border-top: 100px solid transparent;
        border-right: 50px solid skyblue; */
        /**左边和下边的边框宽度设置为0*/
        /* border-bottom: 0 solid blue;
        border-left: 0 solid green; */
        /**只保留右边的边框有颜色*/
        border-color: transparent red transparent transparent;
        /*样式都是solid*/
        border-style: solid;
        /**上边框宽度要大，右边框 宽度稍小，其余的边框改为0*/
        border-width: 100px 50px 0 0;

    }
    .price {
        
        width: 160px;
        height: 24px;
        border: 1px solid red;
        margin: 0 auto;
        line-height: 24px;
    }

    .miaosha {
        position: relative;
        float: left;
        width: 90px;
        height: 100%;
        background-color: red;
        text-align: center;
        color: #fff;
        font-weight: 700;

    }
    .miaosha i {
        position: absolute;
        right: 0;
        top: 0;
        width: 0;
        height: 0;
        border-color: transparent #fff transparent transparent;
         /*样式都是solid*/
         border-style: solid;
        /**上边框宽度要大，右边框 宽度稍小，其余的边框改为0*/
        border-width: 24px 10px 0 0;
    }
    .origin {
        font-size: 12px;
        color: gray;
        text-decoration: line-through;
    }
</style>
<body>
    <div class="box1"></div>
    <div class="price">
        <span class="miaosha">
            ￥1650
            <i></i>
        </span>
        <span class="origin">￥5650</span>
    </div>
</body>
</html>

5.CSS初始化

不同浏览器对有些标签的默认值时不同的，为了消除不同浏览器对HTML文本呈现的差异，我们需要对CSS初始化

简单理解：CSS初始化是指重设浏览器的样式

每个网页都必须首先进行CSS初始化

以京东为例

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
/* 把我们所有标签的内外边距清零 */
* {
    margin: 0;
    padding: 0
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {
    font-style: normal
}
/* 去掉li 的小圆点 */
li {
    list-style: none
}

img {
    /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
    border: 0;
    /* 取消图片底侧有空白缝隙的问题 */
    vertical-align: middle
}

button {
    /* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
    cursor: pointer
}

a {
    color: #666;
    text-decoration: none
}

a:hover {
    color: #c81623
}

button,
input {
    /* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}

body {
    /* CSS3 抗锯齿形 让文字显示的更加清晰 */
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666
}

.hide,
.none {
    display: none
}
/* 清除浮动 */
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

.clearfix {
    *zoom: 1
}

CSS3新特性

新增选择器

CSS3给我们新增了选择器，可以更加便捷，更加自由的选择目标元素

  1. 属性选择器
  2. 结构伪类选择器
  3. 伪元素选择器

1.属性选择器

属性选择器可以根据元素特定的属性来选择元素，这样就可以不用借助于类或者id选择器

选择符 简介
E[att] 选择具有att属性的E元素
E[att=”val”] 选择具有att属性且属性值等于val的E元素
E[att^=”val”] 匹配具有att属性且值以val开头的E元素
E[att$=”val”] 匹配具有att属性且值以val结尾的E元素
E[att*=”val”] 匹配具有att属性且值中含有val的E元素

2.结构伪类选择器

结构伪类选择器主要根据文档结构来选择元素，常用于根据父级选择里面的子元素【权重为10】

选择符 简介
E:first-child 匹配父元素中的第一个子元素E
E:last-child 匹配父元素中的最后一个子元素E
E:nth-child(n) 匹配父元素中的第n个个子元素E
E:first-of-type 指定类型E的第一个
E:last-of-type 指定类型E的最后一个
E:nth-of-type(n) 指定类型E的第n个 
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /**选出第一个孩子**/
    ul li:first-child {
        background-color: pink;
    }
    /**选出最后一个孩子**/
    ul li:last-child {
        background-color: purple;
    }
    /**选出第三个孩子**/
    ul li:nth-child(3) {
        background-color: skyblue;
    }
</style>
<body>
    <ul>
        <li>我是ul的孩子1</li>
        <li>我是ul的孩子2</li>
        <li>我是ul的孩子3</li>
        <li>我是ul的孩子4</li>
        <li>我是ul的孩子5</li>
        <li>我是ul的孩子6</li>
    </ul>
</body>
</html>

**nth-child(n)**选择某个父元素的一个或多个特定的子元素

  • n可以是数字、关键字和公式
  • n如果是数字，就是选择第n个子元素，里面数字从1开始
  • n可以是关键字，even偶数,odd奇数
  • n可以是公式：常见的公式如下（如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略）
公式 取值
2n 偶数
2n+1 奇数
5n 5,10,15…
n+5 从第5个开始（包含第五个）到最后
-n+5 前五个，包括第五个

nth-child与nth-of-type的区别

  1. nth-child对父元素里面==所有==孩子排序（序号是固定的）先找到第n个孩子，然后看是否和E匹配
  2. nth-of-type对父元素里面==指定==子元素进行排序选择，先去匹配E，然后再根据E找第n个孩子

3.伪元素选择器【重要】

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构

选择符 简介
::before 在元素内部的前面插入内容
::after 在元素内部的后面插入内容

注意

  • before和after创建一个元素，但是属于行内元素
  • 新创建的这个元素在文档树种是找不到的，所以我们称为伪元素
  • 语法：element::before{}
  • before和after必须有content属性
  • before在父元素内容的前面插入元素，after在父元素内容的后面插入元素
  • 伪元素选择器和标签选择器一样，权重为1

1.伪元素选择器搭配字体图标使用

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../学成网/font/iconfont.css">
</head>
<style>

    div {
        width: 200px;
        height: 30px;
        border: 1px solid red;
    }

    div::after {
        font-family: "iconfont";
        content: "\e604";
    }
</style>

<body>
    <div></div>
</body>

</html>

PS：阿里iconfont注意将&#x与;去掉

CSS3 多列布局

  • column-count：指定了需要分割的列数。
  • column-gap：指定了列与列间的间隙。
  • column-rule-style：指定了列与列间的边框样式：
  • column-rule-width：指定了两列的边框厚度:
  • column-rule-color：指定了两列的边框颜色：
  • column-rule：是 column-rule-* 所有属性的简写。【类似于border】
  • column-span：指定元素跨越多少列
  • column-width：指定了列的宽度。

CSS3盒子模型

CSS3中可以通过box-sizing来指定盒模型，有2个值；即可指定为content-box、border-box，这样我们计算盒子大小的方式发生了改变

可以分为两种情况：

  1. box-sizing:content-box 盒子大小为width+padding+border（以前默认的）
  2. box-sizing:border-box 盒子大小为width

CSS3其他特性（了解）

1.CSS3滤镜filter

filter CSS属性将模糊或颜色偏移等图形应用于元素

语法

1
filter: 函数(); /*例如：filter:blur(5px); blur模糊处理 数值越大越模糊*/

2.CSS3计算 calc

calc() 此CSS函数让你在声明CSS属性值是执行一些计算

语法

1
width:calc(100%-80%);

3.背景颜色渐变

1.线性渐变 linear-gradient

语法

1
2
3
background: linear-gradient(起始方向,颜色1,颜色2...)
background: -webkit-linear-gradient(left,red,blue)
background: -webkit-linear-gradient(left,top,red,blue)

CSS3属性-过渡【重要】

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

过渡：是一个状态 渐渐的过渡到另外一个状态

我们现在经常和:hover一起搭配使用

语法

1
transition: 要过渡的属性 花费时间	运动曲线 何时开始;
  1. **属性：**想要变化的css属性，宽度高度 背景颜色 内外边距都可以。如果想要所有的属性来变化过渡，写一个all就可以
  2. **花费时间：**单位是 秒（必须写单位）比如 0.5s
  3. **运动曲线：**默认是ease（可以省略）
  4. **何时开始：**单位是 秒（必须要写单位） 可以设置延迟触发时间，默认是0s （可以省略）

记住过渡的使用口诀：谁做过渡给谁加

CSS3 2D转换

**转换(transform)**是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果

1.2D转换之移动 translate

2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位

语法

1
2
3
transform:translate(x,y); /*或者分开写*/
transform:translateX(n);
transform:translateY(n);

重点

  • 定义2D转换中的移动，沿着X和Y轴移动元素
  • translate最大的优点：不会影响到其他元素的位置
  • translate的百分比单位是相对于自身元素的translate:(50%,50%)
  • 对行内标签没有效果

2.2D转换之旋转 rotate

2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转

语法

1
transform:rotate/**度数**/
  • rotate里面跟度数，单位是deg 比如 rotate(45deg)
  • 角度为正时，顺时针，负时，为逆时针
  • 默认旋转的中心点是元素的中心点

3.2D转换之转换中心点 transform-origin

我们可以设置元素转换的中心点

语法

1
transform-origin: x y;

重点

  • 注意后面的参数x和y用空格隔开
  • x y默认转换的中心点是元素的中心点（50% 50%）
  • 还可以给x y设置 像素 或者 方位名词（top bottom left right center）

4.2D转换之缩放 scale

语法

1
transform:scale(x,y);

注意

  • 注意其中的x和y用逗号分隔
  • transform:scale(1,1)：宽和高都放大1倍，相当于没有放大
  • transform:scale(2,2)：宽和高都放大了2倍，相当于没有放大
  • transform:scale(2)：宽和高都放大了2倍
  • transform:scale(0.5,0.5)：缩小
  • scale缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子

5.perspective

CSS属性perspective指定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果。z>0的三维元素比正常大，而z<0时则比正常小，大小成都由该元素的值决定

5.2D转换综合写法

注意

  1. 同时使用多个转换，其格式为：

    1
    transform:translate() rotate() scale()...等

  2. 其顺序会影响转换的效果。（先旋转会改变坐标轴方向）

  3. 当我们同时有位移和其他属性的时候，记得要将位移放到最前

CSS3动画

**动画（animation）**是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，用来实现复杂的动画效果

相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果

1.动画的基本使用

制作动画分为两步：

  1. 先定义动画
  2. 再使用（调用）动画

1.用keyframes定义动画（类似定义类选择器）

1
2
3
4
5
6
7
8
@keyframes 动画名称 {
	0% {
		width:100px;
	}
	100% {
		width:200px;
	}
}

2.元素使用动画

1
2
3
4
5
6
7
8
9
10
div {
	width: 200px;
	height: 200px;
	background-color: aqua;
	margin: 100px auto;
	/*调用动画*/
	animation-name: 动画名称;
	/*持续时间*/
	animation-duration: 持续时间;
}

2.动画序列

  • 0%是动画的开始，100%是动画的完成。这样的规则就是动画序列
  • 在@keyframes中规定某项CSS样式，就能创建当前样式逐渐改为新样式的动画效果
  • 动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数
  • 请用百分比来规定变化发生的事件，或用关键字from和to，等同于0%和100%

3.动画常用属性

属性 描述
@keyframes 规定动画
animation 所有动画属性的简写属性，除了animation-play-state属性
animation-name 规定@keyframe动画的名称（必需的）
animation_duration 规定动画完成一个周期所耗费的时间（秒或毫秒），默认是0（必需的）
animation-timing-function 规定动画的速度曲线，默认是“ease”
animation-delay 规定动画何时开始，默认是0
animation-iteration-count 规定动画被播放的次数，默认是1，还有infinite
animation-decoration 归档是否在下一周期逆向播放。默认是“normal”,altmate逆播放
animation-play-state 规定动画是否正在运行或暂停，默认是“running”，还有pause
anition-fill-mode 规定动画结束后状态，保持forwards 回到起始backwards

4.动画简写属性

1
animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画其实或者结束的状态;
  • 简写属性里面不包含animation-play-state
  • 暂停动画：animation-play-state:puased;经常和鼠标经过等其他配合使用
  • 想要动画走回来，而不是直接跳回来：animation-direction:alternate
  • 盒子动画结束后，停在结束位置：animation-fill-mode: forwards

CSS3 3D转换

1.三维坐标系

三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的

  • x轴：水平向右 注意：x右边是正值，左边是负值
  • y轴：垂直向下 注意：y下面是正值，上面是负值
  • z轴：垂直屏幕 注意：往外面是正值。往里面是负值

2.3D移动 translate3d

3D移动在2D移动的基础上多加了一个可以移动的方向，也就是z方向【x,y,z不能省略，如果没有的话就写0】

  • transform:translateX(距离)【仅仅在x轴上移动】
  • transform:translateY(距离)【仅仅在y轴上移动】
  • transform:translateZ(距离)【仅仅在z轴上移动】
  • transform:translate3d(x,y,z)【在x,y,z轴上移动的距离】

3.透视 perspective

perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。

当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

值 描述
number 元素距离视图的距离，以像素计。
none 默认值。与 0 相同。不设置透视。

移动端常见布局

  • 能够知道移动web的开发现状
  • 能够写出标准的viewport
  • 能够使用移动web的调试方法
  • 能够说出移动端常见的布局方案
  • 能够描述流式布局
  • 能够独立完成京东移动端首页

基础知识

1.移动端调试方法

  • Chrome DevTools（谷歌浏览器）的模拟手机调试
  • 搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器
  • 使用外网服务器，直接IP或域名访问

2.视口

视口（viewport）就是浏览器显示页面内容的屏幕区域，视口可以分为==布局视口==，==视觉视口==和理想视口

1.布局视口 layout viewport

一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题

2.视觉视口 visual viewport

  • 字面意思，它是用户正在看到的网站的区域。**注意：是网站的区域**
  • 我们可以通过缩放取操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度

3.理想视口 ideal viewport

  • 为了使网站在移动端有最理想的浏览和阅读宽度而设定
  • 理想视口，对设备来讲，是最理想的视口尺寸
  • 需要手动添加meta视口标签通知浏览器操作
  • meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽

meta视口标签

1
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"
属性 解释说明
width 宽度设置的是viewport的宽度，可以设置device-width特殊值
initial-scale 初始缩放比，大于0的数字
maximum-scale 最大缩放比，大于0的数字
minimum-scale 最小缩放比，大于0的数字
user-scalable 用户是否可以缩放，yes或no（1或0）

移动端技术选型

1.单独制作移动端页面（主流）

  • 流式布局（百分比布局）
  • flex弹性布局（强烈推荐）
  • less+rem+媒体查询布局
  • 混合布局

2.响应式页面兼容移动端（其次）

  • 媒体查询
  • bootstrap

流式布局

  • 流式布局，就是百分比布局，也称非固定像素布局
  • 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充
  • 流式布局方式是移动web开发使用的比较常见的布局方式
  • max-width 最大宽度（max-height 最大高度）
  • min-width 最小宽度 （min-height 最小高度）

flex布局

  • 能够说出flex盒子的布局原理
  • 能够使用flex布局的常用属性
  • 能够独立完成携程移动端首页案例

1.传统布局与flex布局

1.传统布局

  • 兼容性好
  • 布局繁琐
  • 局限性，不能在移动端很好的布局

2.flex弹性布局

  • 操作方便，布局极为简单，移动端应用很广泛
  • PC端浏览器支持情况较差
  • IE 11或更低版本，不支持或仅部分支持

建议：

  1. 如果是PC端页面布局，我们还是传统布局
  2. 如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局
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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div {
        display: flex;
        width: 80%;
        height: 300px;
        background-color:pink;
        justify-content: space-around;
    }
    div span {
        flex: 1;
        /* width: 150px; */
        height: 100px;
        background-color: purple;
        margin-right: 10px;
        
    }
</style>

<body>
    <div><span>1</span><span>2</span><span>3</span></div>
</body>

</html>

2.布局原理

flex 是 flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局

  • 当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效
  • 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

采用flex布局的元素，称为flex容器，简称容器，它的所有子元素自动称为容器成员，称为flex项目，简称“项目”

总结flex布局原理：

就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

3.flex布局父项常见属性【重要】

以下有6个属性是对父元素设置的

  • **flex-direction**：设置主轴的方向
  • **justify-content**：设置主轴中子元素的的排列方式
  • **flex-wrap**：设置子元素是否换行
  • **align-content**：设置侧轴上的子元素的排列方式（多行）
  • **align-items**：设置侧轴上的子元素排列方式（单行）
  • **flex-flow**：复合属性，相当于同时设置了flex-direction和flex-wrap

1.设置主轴的方向 flex-direction【重要】

1.主轴和侧轴

在flex布局中，是分为主轴和侧轴两个方向。同样的叫法有：行和列、x轴和y轴

  • 默认主轴方向就是x轴方向，水平向右
  • 默认侧轴方向就是y轴方向，水平向下

2.属性值

**flex-direction**属性决定主轴的方向（即项目的排列方向）

注意：主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴。而我们的子元素就是跟着主轴来排列的

属性值 说明
row 默认值从左到右
row-reverse 从右到左
column 从上到下
column-reverse 从下到上

2.设置主轴上的子元素排列方式 justify-content 【重要】

justify-content属性定义了项目在主轴上的对齐方式

注意：使用这个属性之前一定要确定号主轴是哪个

属性值 说明
flex-start 默认值是从头部开始，如果主轴是x轴，则从左到右
flex-end 从尾部开始排列
center 在主轴居中对齐（如果主轴是x轴 则水平居中）
space-around 平分剩余空间
space-between 先两边贴边 再平分剩余空间（重要）

3.设置子元素是否换行 flex-wrap【重要】

flex布局中，默认的子元素是不换行的，如果装不开，会缩小子元素，放到父元素里面

属性值 说明
nowrap 默认值，不换行
wrap 换行

4.设置侧轴上的子元素的排列方式（单行） align-items【重要】

该属性是控制子项再侧轴（默认是y轴）上的排列方式，在子项为单项时使用

属性值 说明
flex-start 从上到下
flex-end 从下到上
center 挤在一起居中（垂直居中）
stretch 拉伸（默认值）【子盒子不要给高度】

5.设置侧轴上的子元素的排列方式（多行）align-content

设置子项在侧轴上的排列方式 并且只能用于子项出现换行的情况（多行），在单行下是没有效果的

属性值 说明
flex-start 默认值在侧轴的头部开始排列
flex-end 在侧轴的尾部开始排列
center 在侧轴中间显示
space-around 子项在侧轴平分剩余空间
space-between 子项在侧轴先分布在两头，再平分剩余空间
stretch 设置子项元素高度平分父元素高度

align-content和align-items区别

  • align-items适用于单行情况下，只有上对齐，下对齐、居中和拉升
  • align-content适用于换行（多行）的情况下（单行情况下无效）。可以设置上对齐、下对齐、居中、拉升以及平均分配剩余空间等属性值
  • 总结就是单行找align-items 多行找align-content

6.flex-flow

flex-flow属性是==flex-direction==和==flex-wrap==属性的复合属性

1
flex-flow:row wrap;

4.flex布局子项常见属性

  • flex子项目占的份数
  • align-self控制子项自己在侧轴的排列方式
  • order属性定义子项的排列顺序（排列顺序）

1.flex属性【重要】

flex属性定义子项目分配剩余空间，用flex来表示占多少份数

2.align-self属性

控制子项自己在侧轴上的排列方式

**align-self**属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值是auto,表示继承父元素的align-items属性。如果没有父元素，则等同于stretch

3.order属性

定义项目的排列顺序

数值**越小，排列越靠前**，默认为0

**注意：**和z-index不同

grid布局

目前css布局方案中，网格布局可以算的上是最强大的布局方案了，它可以将网页分为一个个网格，然后利用这些网格组合各种各样的布局

1.基本概念

1.容器与项目

采用网格布局的区域，称为“容器”，容器内部的采用网格定位的子元素称为“项目”

1
2
3
4
5
6
7
8
<div class="wrapper">
    <div class="item">
        1
    </div>
     <div class="item">
        2
    </div>
</div>

一旦给wrapper设置成grid布局，上面的代码中，==wrapper==就是容器，==item==就是项目

2.行、列、单元格

  • 行
  • 列
  • 单元格
  • 网格线
image-20220126105024358 image-20220126105054048

2.容器的几个重要属性

1.display

  1. grid
  2. inline-grid

2.定义行和列

  1. grid-template-columns【用来指定了列的宽度】

  2. grid-template-rows【用来指定行的高度】

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    .main {
        width: 600px;
        height: 600px;
        border: 1px solid red;
        margin: 100px auto;
        display: grid;
        /*设置行的，有几个值代表有几行，那个值代表的相应行的宽度*/
        grid-template-rows: 200px 200px 200px;
        /*设置列的，有几个值代表有几列，那个值代表的相应列的宽度*/
        grid-template-column: 200px 200px 200px;
    }

这两个属性中的值：

  • 可以是具体的数值
  • 也可以是百分比
  • 还可以是fr关键字
  • 还可以是auto

3.repeat函数

  • 把某个字重复n次

    1
    2
    3
    4
    5
    6
    /*
    第一个参数代表的是重复的次数
    第二个参数代表的是每行/每列具体的宽度/高度
    */
    grid-template-rows: repeat(3,1fr)
    grid-template-columns: repeat(3,1fr)

  • 把某种模式重复n次

    1
    2
    //把50px 100px重复两次
    grid-template-columns: repeat(2,50px,100px)

4.auto关键字

1
2
3
4
/*左右定宽，中间自适应*/
.main {
    grid-template-rows: 100px auto 100px
}

5.设置间距

  1. grid-column-gap【设置列与列之间的距离】
  2. grid-row-gap【设置行与行之间的距离】

6.设置单元格内容的对齐方式

  1. justify-items：控制单元格内容在水平方向上对齐方式

    属性值 说明
    start 从前到后
    center 居中
    end 从后到前
    stretch 拉伸（默认值）

  2. align-items：控制单元格内容在垂直方向上的对齐方式

    属性值 说明
    start 从上到下
    end 从下到上
    center 挤在一起居中（垂直居中）
    stretch 拉伸（默认值）【子盒子不要给高度】

  3. place-items：单元格内容在水平，垂直方向对齐方式的简写【place-items: justify-items align-items】

7.整个内容区域在容器中的对齐方式

  1. justify-content：控制整个内容区域在容器中的水平对齐方式
  2. align-content：控制整个内容区域在容器中的垂直对齐方式
  3. place-content：整个内容区域在容器中的水平，垂直对齐方式的简写【place-content: justify-content place-content】

对齐方式：

1
start|end|center|space-around|space-between|space-evenly|stretch

8.给网格布局指定区域

  1. grid-template-areas

    网格布局允许指定“区域”（area），一个区域由单个或多个单元格组成，grid-template-areas属性用于定义区域

    1
    2
    3
    4
    5
    6
    7
    8
    .container {
        display: grid;
        grid-template-column: 100px 100px 100px;
        grid-template-rows: 100px 100px 100px;
        grid-template-areas: 'a b c'
            				'd e f'
            				'g h i'
    }

    上面代码先划分出9个单元格，然后将其命名为a到i的9个区域，分别对应九个单元格

    多个单元格合并成几个区域

    1
    2
    3
    grid-template-areas: 'a a a'
           			 'b b b'
           			 'c c c'

    上面代码将9个单元格分成a、b、c三个区域

    如果某些区域不需要利用，则使用点（.）表示

    1
    2
    3
    grid-template-areas: 'a . a'
           			 'b . b'
           			 'c . c'

9.自由设置项目的起始位置1

  • template-row-start
  • template-row-end
  • template-column-start
  • template-column-end

讲解图：

image-20220126141343491

效果图：

image-20220126141236337

1.用网格线定义项目的位置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.main {
    display:grid;
    width: 600px;
    height: 600px;
    margin: 100px auto;
    border: 1px solid red;
    grid-template-rows: repeat(3,200px);
    grid-template-column: repeat(3,200px);
}
.item:nth-child(1) {
    background: lightseagreen;
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 2;
    grid-column-end: 3;
}

2.用区域定义项目的位置

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
.main {
    display:grid;
    width: 600px;
    height: 600px;
    margin: 100px auto;
    border: 1px solid red;
    grid-template-rows: repeat(3,200px);
    grid-template-column: repeat(3,200px);
    grid-template-areas: 'a b c'
        				'd e f'
        				'g h i'
}
.item:nth-child(1) {
    background: lightseagreen;
    grid-row-start: e-start;
    grid-row-end: e-end;
    grid-column-start: e-start;
    grid-column-end: e-end;
    /*简写1*/
    /*grid-row: e-start/e-end;
    grid-column: e-start/e-end;*/
    /*简写2*/
    /*grid-row: e;
    grid-column: e;*/
}

10.自由设置项目的起始位置2

grid-area

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.main {
    display:grid;
    width: 600px;
    height: 600px;
    margin: 100px auto;
    border: 1px solid red;
    grid-template-rows: repeat(3,200px);
    grid-template-column: repeat(3,200px);
    grid-template-areas: 'a b c'
        				'd e f'
        				'g h i'
}
.item:nth-child(1) {
    background: lightseagreen;
    grid-area: e
}

11.定义单个单元格内容的对齐方式

  • justify-left： 定义单个单元格的水平对齐方式
  • align-self：定单个单元格的垂直对齐方式
  • place-self：定义单个单元格的水平、垂直对齐方式【place-self: justify-left align-self】

移动端适配

  • 为了实现可以适配移动端，页面元素可以宽度和高度等比例缩放

  • 需要移动端适配，有如下方案：

    • rem

      市场上比较常见

      1. 需要不断修改html文字大小
      2. 需要媒体查询media
      3. 需要flexible.js

    • vw/vh

      将来（马上）趋势

      1. 省去各种判断和修改

        代表：

        b站…

rem适配布局

  • 能够使用rem单位
  • 能够使用媒体查询的基本语法
  • 能够使用使用Less的基本语法
  • 能够使用Less中的嵌套
  • 能够使用Less中的运算
  • 能够使用2种rem适配方案
  • 能够独立完成苏宁移动端首页

rem基础

rem 单位

rem（root em）是一个相对单位， 类似于em,em是父元素字体大小

不同的是**rem的基准是相对于html元素的字体大小**

例如，根元素（html）设置font-size=12px；非根元素设置width:2rem;则换成px表示24px

媒体查询

  1. 什么是媒体查询？

    媒体查询（**Media Query**）是CSS3新语法

    • 使用@media查询，可以针对不同的媒体类型定义不同的样式
    • @media可以针对不同的屏幕尺寸设置不同的样式
    • 当你重围浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
    • 目前针对手机、平板等设备都用得到多媒体查询

  2. 语法规范

    1
    2
    3
    @media mediatype and|not|only (media feature) {
        CSS-Code;
    }

    • 用@media开头 注意@符号

    • mediatype 媒体类型

    • 关键字and not only

    • media feature 媒体特性 必须有小括号包含

      1. mediatype 查询类型

        将不同的终端设备划分成不同的类型，称为媒体类型

        值 解释说明
        all 用于所有设备
        print 用于打印机和打印预览
        screen 用于电脑屏幕、平板电脑、智能手机等

      2. 关键字

        关键字将媒体类型或多个媒体特性连接到一起作为媒体查询的条件

        • and：可以将多个媒体类型连接到一起，相当于“且”的意思
        • not：排除某个媒体特性，相当于“非”的意思，可以省略
        • only：指定某个特定的媒体特性，可以省略

      3. 媒体特性

        每种媒体类型都具有不同的特性，可以通过不同类型的媒体特性设置不同的展示风格。注意他们要要加小括号包含

        举例如下：

        值 解释说明
        width 定义输出设备中页面可见区域的宽度
        min-width 定义输出设备中页面最小可见区域宽度
        max-width 定义输出设备中页面最大可见区域宽度 
        1
        2
        3
        4
        5
        6
        /*在我们屏幕上 并且 最大宽度是800px【<=800px】时 设置我们的样式*/
        @media screen and (max-width: 800px) {
            body {
                background-color: skyblue;
            }
        }

媒体查询+rem实现元素动态大小变化

  • rem单位时跟着html来走的，有了rem页面元素就可以设置不同大小尺寸
  • 媒体查询可以根据不同设备宽度来修改样式
  • 媒体查询+rem就可以实现不同设备宽度，实现页面大小的动态变化

媒体查询_引入资源

当样式比较繁多的时候，我们可以针对不同的媒体使用不同stylesheets（样式表）

原理就是直接在link中判断新设备的尺寸，然后引入不同的CSS文件

  1. 语法规范

    1
    <link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

vw/vh

  • vw/vh是一个相对单位（类似em和rem相对单位）

    **vw**是：viewport width 视口宽度单位

    **vh**是：viewport height 视口高度单位

  • 相对视口的尺寸计算结果

    1**vw=1/100视口宽度**

    1**vh=1/100视口高度**

例如：

当前屏幕视口是375像素,则1vw就是3.75像素，如果当前屏幕视口为414，则1vw为4.14像素

注意事项

和百分比有区别的，百分比是相对于父元素来说的，而vw和vh总是针对于当前视口来说的

vw/vm如何用

  • 超级简单，元素单位直接使用新单位vw/vh即可
  • 因为vw/vm是相对单位，所以不同视口（屏幕）下，宽高一起变化完成适配

如何还原设计稿

  • 题目：我们设计稿按照iphone678来设计， 有个盒子是50像素是*50像素的，如何使用vw呢？

  • 分析：

    1. 设计稿参照iphone678，所以视口宽度尺寸是375像素（**像素大厨切换到2x模式**）

    2. 那么1vw是多少像素？

      375px/100=3.75px

    3. 我们元素的目标是多少像素？

      50px*50px

    4. 那么50*50是多少个vw？

      50/3.75=13.3333vw

CSS预处理器

常见的CSS预处理器：Scss、Less、Stylus

Less

Less是一门CSS扩展语言，也称为CSS预处理器

作为CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS的语法上，为CSS加入程序式语言的特性。

它在CSS的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了CSS的编写，并且降低了CSS的维护成本，就像它的名称所说的那样，Less可以让我们用更少的代码做更多的事项

Less使用

我们首先新建一个后缀名为less的文件，在这个less文件里面书写less语句

Less变量

1
@变量名: 值;

变量命名规范

  • 必须有@为前缀
  • 不能包含特殊字符
  • 不能以数字开头
  • 大小写敏感

Less编译

本质上，Less包含一套自定义的语法及一个解析器，用户根据这些语法去定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的CSS文件

所以，我们需要把我们的less文件，编译生成为CSS，这样我们的html页面才能使用【vscode可安装easy less插件】

Less嵌套

1
2
3
4
5
6
7
8
9
10
.header {
    //1.less嵌套 子元素的样式直接写道父元素里面就好了
    a {
        color: red
        //2.如果有伪类、交集选择器、伪元素选择器，我们内层选择器的前面需要加&
        &:hover {
            color: blue
       }
    }
}

Less运算【重要】

任何数字、颜色或者变量都可以参与运算。就是Less提供了算术运算

1
2
3
4
@width: 10px + 50%
    div {
        border: @width solid red;
        }

注意：

  • 注意乘号（*****）和除号（/）的写法
  • 运算符中间左右有个空格隔开，例如1px + 5
  • 对于两个不同的单位之间的值的运算，运算结果的值取第一个值的单位
  • 如果两个值之间只有一个值有单位，则运算结果就取该单位

PS部分

PS切图

PS有很多的切图方式：==图层切图、切片切图、PS插件切图==等

1.图层切图

最简单的切图方式：右击图层->快速导出为PNG

如果存在需要选择图层+文字的情况

  1. 需要shift加选后，图层菜单->合并图层（ctrl+e）
  2. 右击->快速导出为PNG

2.切片切图

  1. 利用切片工具手动划出图片
  2. 导出选中的图片【文件菜单->导出->存储为web设备所用格式->选择我们要的图片格式->存储】

3.PS插件切图

**Cutterman**是一款运行在Photoshop中的插件

官网：http://www.cutterman.cn/zh/cutterman

**注意：**Cutterman插件要求你的PS必须是完整版，不能是绿色版，所以需要安装完整版本

开发技巧

单行文字垂直居中

解决方案：**让文字的行高等于盒子的高度** 就可以让文字在当前盒子内垂直居中【行高小于盒子高度，文字会偏上，行高大于盒子高度，文字会偏下】

1
2
3
4
a {
 height: 40px;
 line-height: 40px;
}

去掉li前面的小圆点

在开发中我们一般都会去掉li前面的小圆点

1
2
3
4
/*去掉li前面的小圆点*/
 li {
   list-style: none;
 }

去掉浏览器的内外边距

在开发之前我们一般会先去掉浏览器的内外边距再去布局

1
2
3
4
* {
    margin: 0;
    padding: 0;
}

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

为了约束浮动元素位置，我们网页布局一般采用的策略是：

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

网页布局第二准则：先设置盒子大小，之后设置盒子的位置

image-20211119163130301

CSS属性书写顺序（重点）

建议遵循以下顺序：

  1. **布局定位属性：**display/position/float/clear/visible/overflow（建议display第一个写，毕竟关系到模式）
  2. **自身属性：**width/height/margin/padding/border/background
  3. **文本属性：**color/font/text-decoration/text-align/vertical-align/white-space/break-word
  4. **其他属性(CSS3)：**content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient…

页面布局整体思路

为了提高网页制作的效率，布局时通常有以下的整体思路：

  1. 必须确定页面的版心（可视区），我们测量可得知
  2. 分析页面中的行模块，以及每个行模块中的列模块，其实这是网页布局第一准则
  3. 一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置，页面布局第二准则
  4. 制作HTML结构，我们还是遵循，先有结构，后有样式的原则，结构永远最重要
  5. 所以，先理清布局结构，再写代码尤为重要，需要多写多积累

固定定位小技巧：固定在版心右侧位置

image-20211122111634001

具体步骤

  1. 让固定定位的盒子left:50%，走到浏览器可视区（也可以看作版心）的一半位置
  2. 让固定定位的盒子margin-left:版心宽度的一半距离。多走版心宽度的一半位置

就可以让固定定位的盒子贴着版心右侧对齐了

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .w {
        width: 800px;
        height: 1400px;
        background-color: pink;
        margin: 0 auto;
    }
    .fixed {
        position: fixed;
        /**走浏览器宽度的一半*/
        left:50%;
        /**利用margin走版心的一半*/
        margin-left: 400px;
        width: 50px;
        height: 150px;
        background-color: skyblue;
    }
</style>
<body>
    <div class="fixed"></div>
    <div class="w">版心盒子 800像素</div>
</body>
</html>

绝对定位的盒子居中

image-20211122154528676

加了绝对定位的盒子，不能通过margin:0 auto水平居中，但是可以通过以下计算方法实现水平和垂直居中

第一种方法

  1. left走50%,父容器宽度的一半
  2. margin 负值往左边走 自己盒子宽度的一半
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box {
        position:absolute;
        /*1.left走50% 父容器宽度的一半*/
        left:50%;
        /*2.margin 负值 往左边走 自己盒子宽度的一半 */
        margin-left: -100px;
        width: 200px;
        height: 200px;
        background-color: pink;
        /*因为层叠性原因，所以要去掉这一行*/
        /* margin: auto; */
    }
</style>
<body>
    <div class="box"></div>
</body>
</html>

第二种方法

设置left:0;right: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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box {
        position:absolute;
        left:0;
        right:0;
        width: 200px;
        height: 200px;
        background-color: pink;
        
        margin: auto;
    }
</style>
<body>
    <div class="box"></div>
</body>
</html>

PS：垂直居中类似

练习作业

简易版小米侧边栏

核心思路

  1. 将链接a转换为块级元素，这样链接就可以单独占一行，并且有宽度和高度
  2. 鼠标经过a给链接设置背景颜色
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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>简单版小米侧边栏</title>
    <style>
        div {
            width: 230px;
            height: 400px;
            background-color: #a19f9f;
        }

        a {
            display: block;
            width: 100%;
            height: 40px;
            background-color: #55585a;
            font-size: 14px;
            color: #fff;
            text-decoration: none;
            text-indent: 2em;
            line-height: 40px;
        }

        a:hover {
            background-color: #ff6700;
        }
    </style>
</head>

<body>
    <div>
        <a href="phone">手机</a>
        <a href="TV">电视</a>
        <a href="pad">笔记本 平板</a>
        <a href="jiadian">家电</a>
        <a href="cxcd">出行 穿戴</a>
        <a href="znlyq">智能路由器</a>
        <a href="dypj">电源配件</a>
        <a href="kid">健康 儿童</a>
        <a href="ejyx">耳机 音箱</a>
        <a href="life">生活 箱包</a>
    </div>
</body>

</html>

王者荣耀_成长守护模块简单展示

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>王者荣耀背景图片_成长守护平台</title>
    <style>
       h3 {
           width: 118px;
           height: 40px;
           background-color: skyblue;
           background-image: url(../img/icon.png);
           background-position: left;
           background-repeat: no-repeat;
           line-height: 40px;
           text-indent: 1.3em;
           font-size: 14px;
       }

    </style>
</head>

<body>
   <h3>
        成长守护平台
   </h3>
</body>

</html>

超大背景图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>超大背景图片</title>
    <style>
       body {
           background-image: url(../img/bg.jpg);
           background-repeat: no-repeat;
           background-position: center 40px;
       }
    </style>
</head>

<body>
    
</body>

</html>

五彩导航

image-20211118104402314

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>模板</title>
    <style>
        a {
            display: inline-block;
            width: 120px;
            height: 58px;
            text-decoration: none;
            line-height: 47px;
            text-align: center;
            color: blanchedalmond;
           
        }
        a:hover {
            background-image: url(../img/bg11.png);
        }

        .one {
            background: url(../img/bg1.png)
        }
        .two {
            background: url(../img/bg2.png)
        }
        .three {
            background: url(../img/bg3.png)
        }
        .four {
            background: url(../img/bg4.png)
        }
        
    </style>
</head>

<body>
    <div>
        <a href="#" class="one">五彩导航</a>
        <a href="#" class="two">五彩导航</a>
        <a href="#" class="three">五彩导航</a>
        <a href="#" class="four">五彩导航</a>
    </div>

</body>

</html>

新浪导航栏

image-20211118172410838

image-20211118172439203

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .root .nav li {
        display: inline-block;
        height: 41px;
        font-size: 12px;
        color: #4c4c4c;
        padding: 0 20px;
    }
    .nav {
        border-top: 3px solid #ff8500;
        border-bottom: 1px solid #edeef0;
        height: 41px;
        background-color: #fcfcfc;
        color: #4c4c4c;
        line-height: 41px;
    }
    .root .nav li:hover{
        background-color: #eee;
        color: #ff8500;
    }
</style>
<body>
    <div class="root">
        <ul class="nav">
            <li>设为首页</li>
            <li>新浪手机网</li>
            <li>移动客户端</li>
            <li>博客</li>
            <li>微博</li>
            <li>关注我</li>
        </ul>
    </div>
</body>
</html>

小米在线模块

image-20211118224955965

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    a {
        color: #333;
        text-decoration: none;
    }

    body {
        background-color: #f5f5f5;
    }

    .box {
        width: 298px;
        height: 415px;
        margin: 100px auto;
        background-color: #fff;
    }

    .box img {
        width: 100%;
    }

    /*padding:0 28px 因为没有设置width，所以不会撑开盒子*/
    .review {
        height: 70px;
        font-size: 14px;
        padding: 0 28px;
        margin-top: 30px;
    }

    .appraise {
        font-size: 12px;
        color: #b0b0b0;
        margin-top: 20px;
        padding: 0 28px;
    }

    .info {
        font-size: 14px;
        margin-top: 15px;
        padding: 0 28px;
    }

    .info h4 {
        display: inline-block;
        font-weight: 400;
    }

    .info span {
        color: #ff6700
    }

    .info em {
        font-style: normal;
        color: #ebe4e0;
        margin: 0 6px 0 15px
    }
</style>

<body>
    <div class="box">
        <img src="../img/xiaomiimg.jpg" />
        <p class="review">
            快递牛，整体不错蓝牙可以说秒连。红米给力
        </p>
        <div class="appraise">来自于 117384232的评价</div>
        <div class="info">
            <h4><a href="#">Redmi AirDots真无线蓝...</a></h4><em>|</em><span>99.9元</span>
        </div>
    </div>
</body>

</html>

快报模块

image-20211119140621012

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>品优购快报模块</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    /*去掉li前面的小圆点*/
    li {
        list-style: none;
    }

    .box {
        width: 248px;
        height: 163px;
        border: 1px solid #ccc;
        margin: 100px auto;
    }

    h3 {
        height: 32px;
        border: 1px dotted #ccc;
        font-size: 14px;
        font-weight: 400;
        line-height: 32px;
        padding-left: 15px;
    }
    .box ul li a {
        font-size: 12px;
        color: #666;
        text-decoration: none;
    }
    .box ul li a:hover {
        text-decoration: underline;
    }
    .box ul li {
        height: 23px;
        line-height: 23px;
        padding-left: 20px;
    }
    .box ul {
        margin-top: 7px;
    }
</style>

<body>
    <div class="box">
        <h3>
            品优购快报
        </h3>
        <ul>
            <li> <a href="#">【特惠】 爆款耳机5折秒！</a></li>
            <li> <a href="#">【特惠】 母亲节，健康好礼低质5折！</a></li>
            <li> <a href="#">【特惠】 爆款耳机5折秒！</a></li>
            <li> <a href="#">【特惠】 9.9洗100张照片！</a></li>
            <li> <a href="#">【特惠】 长虹只能空调立省1000！</a></li>
        </ul>
    </div>
</body>

</html>

浮动练习1

image-20211119210629039

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    li {
        list-style: none;
    }

    .box {
        width: 1200px;
        height: 450px;
        background-color: pink;
        margin: 100px auto;
    }

    .box .type .leftul li a{
        text-decoration: none;
        color: #e3e1df;

    }

    .box .type .leftul li {
        height: 42px;
        line-height: 42px;
        padding-left: 22px;
    }

    .box .type .leftul {
        float: left;
        width: 220px;
        height: 425px;
        background-color: #a39b99;
        padding-top: 25px;
    }
    .imgDiv{
        float: left;
        width: 980px;
        height: 100%;
        background-image: url(../img/bg.jpg);
        background-position: center 0;
    }
</style>
    
<body>
    <div class="box">
        <div class="type">
            <ul class="leftul">
                <li><a href="#">手机 电话卡</a></li>
                <li><a href="#">电视 盒子</a></li>
                <li><a href="#">笔记本 平板</a></li>
                <li><a href="#">家电 插线板</a></li>
                <li><a href="#">出行 穿戴</a></li>
                <li><a href="#">智能 路由器</a></li>
                <li><a href="#">电源 配件</a></li>
                <li><a href="#">健康 儿童</a></li>
                <li><a href="#">耳机 音箱</a></li>
                <li><a href="#">生活 箱包</a></li>
            </ul>
        </div>
        <div class="imgDiv">
            <h3></h3>
        </div>
    </div>
</body>

</html>

浮动练习2

image-20211119212802327

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    li {
        list-style: none;
    }
    .box {
        width: 1226px;
        height: 285px;
        background-color: pink;
        margin: 0 auto;
    }
    .box li {
        width: 296px;
        height: 100%;
        background-color: skyblue;
        float: left;
        margin-right: 14px;
    }
    /*此写法不生效，涉及到权重*/
    /* .last {
        margin-right: 0;
    } */

    .box .last {
        margin-right: 0;
    }
</style>
<body>
    <ul class="box">
        <li></li>
        <li></li>
        <li></li>
        <li class="last"></li>
    </ul>
</body>
</html>

浮动练习3

image-20211119214752751

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    li {
        list-style: none;
    }
    .box {
        width: 1226px;
        height: 615px;
        background-color: pink;
        margin: 0 auto;
    }
    .left {
        float: left;
        width: 234px;
        height: 615px;
        background-color: purple;
    }
    .right {
        float: left;
        width: 992px;
        height: 615px;
        background-color: skyblue;
    }

    .right>div {
        float: left;
        width: 234px;
        height: 300px;
        background-color: pink;
        margin-left: 14px;
        margin-bottom: 14px;
    }

</style>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</body>
</html>

PS：margin只会上下溢出/重叠而不会左右溢出/重叠?【左右超出会被挤下去，上下不会被挤出去】

京东样式的三角

image-20211122182920000

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .jd {
        position: relative;
        width: 120px;
        height: 249px;
        background-color: pink;
    }
    .jd span {
        position: absolute;
        right: 15px;
        top: -10px;
        width: 0;
        height: 0;
        /**为了照顾兼容性*/
        line-height: 0;
        font-size: 0;
        border: 5px solid transparent;
        border-bottom-color: pink;

    }
</style>
<body>
    <div class="jd">
        <span></span>
    </div>
</body>
</html>

学成在线案例

image-20211123231056059

image-20211123231115686

导航栏注意点：

实际开发中，我们不会直接用链接a 而是用li包含链接(li+a)的做法

  1. li+a语义更清晰，一看就是有条理的列表型内容
  2. 如果直接用a，搜索引擎容易辨别为堆砌关键字嫌疑

PS：浮动的盒子没有外边距合并的问题

链接：https://pan.baidu.com/s/1QGaphlsVQaRYwqfa_0ywnA
提取码：qc5h

以伪元素方式完成仿土豆网遮罩案例

image-20211124163607238

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .tudou {
        position: relative;
        width: 448px;
        height: 252px;
    }
    .tudou img {
        width: 100%;
        height: 100%;
    }
    
    .tudou::before {
        position: absolute;
        /*隐藏遮罩层*/
        display: none;
        content: '';
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.4) url(../img/arr.png) no-repeat center;
    }
    /* 当我们鼠标经过了 土豆这个盒子，就让里面before遮罩层显示出来 */
    .tudou:hover::before {
            /* 显示元素 */
            display: block;
        }
</style>
<body>
    <div class="tudou">
        <img src="../img/tudou.jpg" alt="">
    </div>
</body>
</html>

旋转中心点案例

image-20211130143056680

第一种写法

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div {
        width: 200px;
        height: 200px;
        border: 1px solid pink;
        margin: 100px auto;
        overflow: hidden;
    }

    div::before {
        content:"嘀嘀嘀嘀";
        display: block;
        width: 100%;
        height: 100%;
        background-color: skyblue;
        transform: rotate(180deg);
        transform-origin: left bottom;
        transition: all 0.6s;
    }
    div:hover::before {
        transform: rotate(0deg);
    }
</style>

<body>
    <div></div>
</body>

</html>

第二种写法

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .fatherDiv {
        position: relative;
        width: 200px;
        height: 200px;
        border: 1px solid pink;
        margin: 100px auto;
        overflow: hidden;
    }
    .sonDiv {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: skyblue;
        transform: rotate(180deg);
        transform-origin: left bottom;
        transition: all 0.4s;
    }
    .fatherDiv:hover .sonDiv {
        transform: rotate(0deg);
    }
</style>
<body>
    <div class="fatherDiv">
        <div class="sonDiv">嘀嘀嘀嘀</div>
    </div>
</body>
</html>

携程网

image-20211201205147621

链接：https://pan.baidu.com/s/12YJQvMevwR4d5x3KnUonXQ
提取码：eml1

开发快捷工具

Snipaste

Snipaste是一个简单但强大的截图工具，也可以让你将截图贴回到屏幕上 【注意量出来的宽高比受系统设置中–显示–缩放与布局影响】

链接：https://pan.baidu.com/s/1ZHW-zmgmN35dbQxH88D7YA
提取码：bdkm

常用快捷方式

  1. F1可以截图，同时测量大小，设置箭头 书写文字等
  2. F3在桌面置顶显示
  3. 点击图片,alt可以取色,随后按下c键可以复制代码（按下shift可以切换取色模式）
  4. 按下esc 取消图片显示