嚎羸的博客

因为Hexo是静态博客，部署多有不便，建议查看我的语雀文档

0%

04、CSS

发表于 更新于 分类于 ，
CSS

前言

感谢

CSS简介和发展史

CSS简介

  • CSS：Cascading Style Sheet 级联样式表

那么CSS是干什么的呢，简单来说是搞定样式的。

如果拿一座大楼来比较的话，HTML是建立框架，CSS就是内部涂装，精致装修。甚至可以说，CSS是雪中送炭的一件事情。

我们之后可以这样来进行：HTML只用来控制页面的层次布局，至于页面的样式和涂装都交给CSS

CSS的发展史

  • CSS1.x：读者可以从其他地方去使用自己喜欢的设计样式去继承地使用样式
  • CSS2.x：DIV+CSS，提出了HTML和CSS相分离，并且提出了更高级的语法比如浮动，定位等等
  • CSS3.x：模块化的发展方向，并且提出了更多的高级用法

CSS基本语法

引入CSS的方式

  1. 行内样式
  2. 内部样式
  3. 外部样式

行内样式

  • 直接在html代码中编写CSS样式

在这种情况下，这种情况下并不需要选择器，因为直接在行内代码中编写默认选择这个标签

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS基本使用</title>
</head>
<body>
    <div style="color: red">hello css</div>
</body>
</html>

内部样式

  • 在<head></head>中的<style></style>中编写代码 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS基本使用</title>

    <style>
        div{
            color: blue;
        }
    </style>
</head>
<body>

    <div>hello css</div>


</body>
</html>

外部样式

  1. 首先需要一个.css文件
  2. 使用外部链接的形式导入

    其实还有一个导入式的方式，但是已经过时了

  • HTML页面，引入CSS文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS基本使用</title>

    <link rel="stylesheet" href="CSSProject.css">
</head>
<body>

    <div>hello css</div>


</body>
</html>
  • CSS文件
1
2
3
div{
    color: yellow;
}

三种方式的优先级：就近原则，谁越接近标签优先级越高

按照这种原则，那么行内样式肯定是最高优先级，其他两个谁离得近谁优先级就高

选择器

选择器，重中之重

基本选择器

标签（元素）选择器

简单来说，就是是用HTML标签作为选择器

比如说，HTML中有标签，比如div，h1-h6，p，img，….

1
2
3
div{
    color: yellow;
}

类选择器

什么叫类选择器呢，在标签中可以有一个属性class=xxx，那么在css中就可以使用.xxx的形式来进行选择
类选择器非常常用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS基本使用</title>

    <link rel="stylesheet" href="./CSSProject.css">
</head>
<body>

    <div class="cc">hello css</div>


</body>
</html>
1
2
3
.cc{
    font-size: larger;
}

高级选择器

层次选择器

后代选择器

选择器 类型 功能描述
E F 后代选择器 选择 E 下面的 所有F
E > F 子选择器 选择 E 下面的 直接F

后代选择器和子选择器有不同

  • 后代选择器是选择E下面的所有F，包括儿子，孙子，重孙子，….
  • 子选择器是选择E下面的F，只是儿子
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS基本使用</title>

    <link rel="stylesheet" href="CSSProject.css">
</head>
<body>


    <p>0</p>

    <div class="cc">
        hello
        <p>1</p>
        <p>2</p>
        <p>3</p>
    </div>

    <div>css</div>

    <div>-----</div>


</body>
</html>
1
2
3
body p{
    color: red;
}

image-20200822091924395

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS基本使用</title>

    <link rel="stylesheet" href="CSSProject.css">
</head>
<body>


    <p>0</p>

    <div class="cc">
        hello
        <p>1</p>
        <p>2</p>
        <p>3</p>
    </div>

    <div>css</div>

    <div>-----</div>


</body>
</html>
1
2
3
body>p{
    color: red;
}

image-20200822092041223

兄弟选择器

选择器 类型 功能描述
E + F 相邻兄弟选择器 选择E平级的后面的一个F
E ~ F 通用兄弟选择器 选择和E平级的后面的所有F

相邻兄弟选择器和通用兄弟选择器不同

  • 首先兄弟选择器是平级之间的标签
  • 相邻兄弟选择器是选择和E相邻的兄弟标签，只选择下面的一个
  • 通用兄弟选择器是选择和E平级的、后面的所有兄弟标签
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">
    <title>CSS基本使用</title>

    <link rel="stylesheet" href="CSSProject.css">
</head>
<body>


    <p>0</p>

    <div>
        hello
        <p>1</p>
        <p>2</p>
        <p>3</p>
    </div>

    <div class="cc">css</div>

    <div>css</div>

    <div>-----</div>


</body>
</html>
1
2
3
.cc+div{
    color: red;
}

image-20200822092436278

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">
    <title>CSS基本使用</title>

    <link rel="stylesheet" href="CSSProject.css">
</head>
<body>


    <p>0</p>

    <div>
        hello
        <p>1</p>
        <p>2</p>
        <p>3</p>
    </div>

    <div class="cc">css</div>

    <div>css</div>

    <div>-----</div>


</body>
</html>
1
2
3
.cc~div{
    color: red;
}

image-20200822092900374

结构伪类选择器

伪类

选择器 说明
E F:first-child 父元素E的第一个F子元素
E F:last-child 父元素的最后一个F子元素
E:nth-child(n) E的父级元素的第n个子元素，odd匹配奇数行，even匹配偶数行
E:nth-of-type(n) E的父元素内具有指定类型的第n个元素
E:first-of-type E的父级元素的指定类型的第一个元素
E:last-of-type E的父级元素内具有指定类型的最后一个元素 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./结构伪类选择器.css">
</head>
<body>


    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <p>p4</p>

    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>

    
</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
ul li:first-child{
    background: red;
}


ul li:last-child{
    background: green;
}

p:nth-child(3){
    background: yellow;
}


p:nth-of-type(2){
    background: blue;
}


p:first-of-type{
    background: gray;
}

p:last-of-type{
    background: orchid;
}

image-20200827142423186

伪元素

伪元素 作用
:after 元素之前添加内容
:before 元素之后添加内容
:hover 鼠标移动的效果
:first-child 第一个子类元素
:focus 元素输入的焦点

属性选择器

选择器 说明
E[attr] 选择匹配具有attr的元素
E[attr=val] 选择匹配具有属性attr且attr的值为val的元素，val区分大小写
E[attr^=val] 匹配有属性attr，且属性值以val开头的元素
E[attr$=val] 匹配有属性attr，且属性值以val结尾的元素
E[attr=*val] 匹配有属性attr，且属性值包含val的元素
E[attr~=val] 表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 val
`E[attr =val]` 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./结构伪类选择器.css">
</head>
<body>


    <p id="p">p1</p>
    <p class="class">p2</p>
    <p class="add">p3</p>
    <p class="hello">p4</p>

    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>

    
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
p[id=p]{
    background: red;
}

p[class^=c]{
    background: green;
}

p[class$=d]{
    background: yellow;
}

p[class*=h]{
    background: orange;
}

image-20200827143122919

并集选择器和全选择器

  • 并集选择器：选择器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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./结构伪类选择器.css">
</head>
<body>


    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <p>p4</p>

    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>

    
</body>
</html>
1
2
3
4
5
6
7
*{
    color: red;
}

p,li{
    background: orange;
}

image-20200827143418639

属性

属性优先级

1、*!important*拥有最高优先级，只要被这个修饰，则忽略其他的改变。但也会被权重高的!important所覆盖（也就是第三条原则，就近原则）

2、选择器的范围越宽广，优先级越低，选择器的优先级越具体，优先级越高，比如class选择器的优先级低于id选择器，标签选择器低于class选择器

3、在选择器的优先级相同时，使用就近原则

但其实，他的原理是一个叫做权重的东西

1、标签选择器和伪类选择器：1

2、class选择器：10

3、ID选择器：权重:100

注意！就算标签选择器有10个1也是10个1，而不是1个10，就算有100个标签选择器也比不上一个class选择器

颜色

颜色分为三字节和四字节两种

三字节就是RGB（Red 红色，Green 绿色，Blue 蓝色），四字节就是RGBA（Red 红色，Green 绿色，Blue 蓝色，Alpha 透明度）

比如：

  • color:#ffffff，或者color:#ffffffff
  • color:rgb(255,255,255)，或者rgb(255,255,255,1)

在Alpha中，假如要以16进制来进行表现，那么使用0-f。假如使用rgb函数来表示，那么就是0-255，但是透明度为0-1

字体

属性 说明
font-family 字体类型
font-size 字体大小
font-style 字体风格
font-weight 字体粗细
font 设置所有属性，默认是12px

1、CSS在同时设置字体时，优先使用第一个，如果不认识第一个就切换到第二个，然后第三个，直到最后一个

比如我同时设置了A和B，第一种支持英文不支持中文，第二种支持中文和英文，所以英文切换成了A，中文切换成了B

假如我先设置了B然后是A，那么都是A字体

2、字体大小有单位

  • px：像素，最常用，是一种逻辑的长度，你可以认为就是屏幕的一个像素点
  • em：相对于父级元素的字体大小进行缩放
  • rem：相对于HTML根字体的大小进行缩放
  • cm：厘米
  • mm：毫米
  • pt：point，单位，老版用法
  • pc：pica，排版学，老版用法

3、字体风格

  • normal：平常
  • italic：使用文字的斜体版
  • oblique：让没有斜体版的文字也可以倾斜

4、字体粗细

  • normal：平常
  • bold：粗体
  • bolder：更粗
  • lighter：更细
  • 100、200、300、…..、900：自定义，400为normal，700为bold

这个和字体有关系，你的字体首先要支持多级粗细，它才会进行变化

5、字体

定义字体时，需要的顺序为：字体风格 字体粗细 字体大小 字体类型

注意，在写字体的时候，尽量不要使用中文，即使使用中文也要使用中文对应的英文再来一次

文本

属性 说明
color 颜色
text-align 设置元素水平对齐方式
text-indent 首行缩进
line-height 行高
text-decoration 装饰
vertical-align 垂直对齐
text-shadow 文本阴影

  • color：颜色

    • RGB：红绿蓝的配比，三者取值都为0-255，比如rgb(0,0,0)

    • RGBA：红绿蓝透明度的配比，透明度为0-1，比如rgba(0,0,0,0)

    • 十六进制：#AABBCC：A为红，B为绿，C为蓝，取值为十六进制

      十六进制，当红，绿，蓝各自相同时，可以缩写，比如

      #000000可以缩写为#000，#001122可以缩写为#012

      但是#010000不可缩写

  • text-align：文本对齐

    • left：左对齐
    • right：右对齐
    • center：中间对齐
    • justify：两端对齐

  • text-decoration：文本装饰

    • none：默认值
    • underline：下划线
    • overline：上划线
    • line-througn：中划线（删除线）

  • vertical-align：垂直对齐

    • middle：中间对齐
    • top：顶端对齐
    • bottom：底部对齐

  • text-shadow：文本阴影

    text-shadow：color x-offset y-offset blur-radius

    • color：阴影颜色
    • x-offset：x偏移量
    • y-offset：y偏移量
    • blur-radius：模糊半径

超链接伪类

伪类 说明
a:link 未单击时的超链接样式
a:visited 点击时的超链接样式
a:hover 鼠标悬浮时的超链接样式
a:active 鼠标单击未释放的超链接样式 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面美化</title></title>

    <link rel="stylesheet" href="./美化.css">
</head>
<body>
    

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

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
a:link{
    background: black;
}

a:visited{
    background:purple;
}

a:hover{
    background: yellow;
}

a:active{
    background: green;
}

列表样式

列表样式：list-style

样式 说明
list-style-type 列表样式
list-style-position 列表位置
list-style-image 列表图片
  • list-style-type
样式 说明
none 无标记符号
disc 实心圆，默认
circle 空心圆
square 实心正方形
decimal 数字
upper-roman 大写罗马
lower-alpha 小写英文字母
upper-alpha 大写英文字母

完整版来自菜鸟教程 ：

image-20200827152129681

  • list-style-position：位置
样式 说明
inside 文本内
outside 默认，文本左侧
inherit 从父元素继承
  • list-style-image：指定图片
样式 说明
url 图片路径
none 无图形被显示
inherit 从父元素继承

背景

  • background-color:背景颜色

  • background-image:url(图片路径)：背景指定为图片

  • background-repeat：重复方式

    • repeat：沿水平和垂直两个方向重复
    • no-repeat：显示一次
    • repeat-x：沿水平重复
    • repeat-y：沿垂直平铺

  • background-position：属性

    • x y：单位px

    • x% y%：百分比

    • 关键字

      • 水平：left，center，right
      • 垂直：top，center，bottom

  • background：背景全写

    顺序：background: 颜色 图片 定位 重复

  • background-size：尺寸

    • auto：默认，使用背景图片保持原样
    • percentage：使用百分比则相对于元素的宽度计算
    • cover：整个背景图片放大填充了整个元素
    • contain：让背景图片保持本身的宽高，将背景图片缩放到宽度或者高度正好适应所定义背景的区域

渐变

  • 线性渐变：从一段到另一端

    linear-gradient(方向, 颜色1, 颜色2, ...);

    • to bottom

    • to top

    • to right

    • to left

    • to bottom right

    • 角度

      角度

      image-20200827160143757

  • 径向渐变：从中心到四周

    radial-gradient(形状,颜色1，颜色2，....)

盒子

盒子介绍

image-20200827160615667

我们平时设置的height和width只是页面的元素的宽高，而内边距，边框和外边距是另外计算的

而我们可以使用box-sizing:border-box属性，一旦使用了这个属性，我们的height和width就会变为页面元素+内边距+边框的宽高，这样到页面元素到边框的长宽确定了，就会变为我们想要的结果

盒子大小

box-sizing: content-box | border-box | inherit

  • content-box：默认值，盒子的总尺度
  • border-box：元素内容的宽度或者高度
  • inherit：继承父元素的盒子模式

box-shadow：盒子阴影

box-shadow: inset x-offset y-offset blur-radius color

  • inset：阴影类型是内阴影
  • x-offset：x偏移量
  • y-offset：y偏移量
  • blur-radius：模糊范围
  • color：阴影颜色

vw和vh

在默认情况下，假如我们想要改变一个div盒子的宽度（比如改为屏幕的一半），只需要使用50%即可，但是假如我们要改变高度，那么50%是没有用的

1
2
3
4
.test{
    height: 50%;
    width: 50%; 
}

宽度为屏幕的一半，但是高度不变

这个时候我们可以使用vh来改变元素的高度，同理vw是宽度的单位

1
2
3
4
.test{
    height: 25vh;
    width: 25vw;
}

宽度和高度都改变为了一半，vw和vh就是CSS3的自适应布局

1vw为视口宽度的1%，1vh为视口高度的1%

边框

  • border-color：边框颜色

border-top-color：上边框颜色

border-right-color：右边框颜色

border-bottom-color：底部边框颜色

border-left-color：左边框颜色

border-color：全部边框颜色

  • border-width：边框粗细
  • thin：细
  • medium：中等
  • thick：厚
  • 像素
  • border-style：边框样式
  • none：没有
  • hidden：隐藏
  • dotted：点
  • dashed：虚线
  • solid：实线
  • double：双倍
  • border

边框简写，只需要记住border:1px solid red就可以自由替换了

  • border-radius：圆角
  • border-radius：10px 10px 10px 10px
  • 这四个属性从上左，上右，下右，下左顺时针排列，50px基本上就是圆
  • 或者也可以使用 border-radius: 10px 指定所有的位置
  • 可以使用百分比，比如：border-radius: 50%

边距

内边距

  • padding-top/right/bottom/left：边框的上/右/下/左内边距

外边距

  • margin-top/right/bottom/left：边框的上/右/下/左外边距

使用外边距可以令网页居中对齐，但是需要两个条件

  1. 块元素
  2. 有固定宽度

然后就可以使用：margin: 0px auto将元素对齐

浮动

行级元素和块级元素

  • 行级元素：和其他元素可以共存一行，典型代表有a，span
  • 块级元素（内联元素）：不可以和其他元素共存一行，前后带有换行符，典型代表有h1-h6，div

display

值 说明
block 块级元素的默认值，可以折行，受CSS宽高的控制
inline 行级元素，内联元素的默认值，不可以折行，不受CSS宽高的控制
inline-block 行内块，具有行级元素和块级元素的特征：既不折行，又受CSS宽高的控制
none 不会被显示
flex 新版技能

display可以控制元素行块的转变，也可以display可以控制元素的显示和隐藏

float

值 说明
left 向左浮动
right 向右浮动
none 不浮动 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面美化</title></title>

    <link rel="stylesheet" href="./美化.css">
</head>
<body>
    

    <div class="left">left</div>
    <div class="right">right</div>

</body>
</html>
1
2
3
4
5
6
7
.left{
    float: left;
}

.right{
    float: right;
}

image-20200827164629572

边框塌陷

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面美化</title></title>

    <link rel="stylesheet" href="./美化.css">
</head>
<body>
        
    <div style="background: grey;">
        
        <div class="left">left</div>
        <div class="right">right</div>

    </div>
    
</body>
</html>
1
2
3
4
5
6
7
.left{
    float: left;
}

.right{
    float: right;
}

image-20200827170741708

这种情况显然不是我们想要看到的，所以解决方法：

解决元素塌陷的情况

  1. clear

left：清除左侧浮动元素

right：清除右侧浮动元素

both：清除两侧浮动元素

none：不变

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面美化</title></title>

    <link rel="stylesheet" href="./美化.css">
</head>
<body>
        
    <div style="background: grey;">
        
        <div class="left">left</div>
        <div class="right">right</div>
        
        <div class="clear"></div>    
    </div>
    
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
.left{
    float: left;
}

.right{
    float: right;
}

.clear{
    clear: both;
}

image-20200827170844726

  1. 设置父元素的高度，降低扩展性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面美化</title></title>

    <link rel="stylesheet" href="./美化.css">
</head>
<body>
        
    <div style="background: grey; height: 100px;">
        
        <div style="float: left;">left</div>
        <div style="float: right;">right</div>
        
    </div>
    
</body>
</html>

image-20200827171047730

  1. 父级元素添加overflow（溢出处理），下拉框不能用
属性 说明
visible 默认，什么也不变
hidden 超出不可见
scroll 出现滚动条
auto 假如超出则出现滚动条 
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">
    <title>页面美化</title></title>

    <link rel="stylesheet" href="./美化.css">
</head>
<body>
        
    <div style="background: grey;overflow: hidden;">
            
        <div style="float: left;">left</div>
        <div style="float: right;">right</div>
    </div>
</body>
</html>

image-20200827171305596

  1. 添加伪类after，复杂，但是没有副作用
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">
    <title>页面美化</title></title>

    <link rel="stylesheet" href="./美化.css">
</head>
<body>
        
    <div class="clear">
            
        <div style="float: left;">left</div>
        <div style="float: right;">right</div>
    </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
.clear{
    background: gray;
}

.clear::after{
    content: '';    /*clear后面添加空内容*/
    display: block; /*转为块*/
    clear: both;    /*清除浮动*/
}
  1. 打不过就加入，缺点很明显
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">
    <title>页面美化</title></title>

    <link rel="stylesheet" href="./美化.css">
</head>
<body>
        
    <div style="background: grey;float: left;">
            
        <div style="float: left;">left</div>
        <div style="float: right;">right</div>
    </div>
</body>
</html>

image-20200827171216890

  1. 在之后加一个div，会造成代码冗余
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">
    <title>页面美化</title></title>

    <link rel="stylesheet" href="./美化.css">
</head>
<body>
        
    <div style="background: gray;">
            
        <div style="float: left;">left</div>
        <div style="float: right;">right</div>
        <div>&nbsp;</div>
    </div>
</body>
</html>

image-20200827171830839

margin塌陷

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">
    <title>页面美化</title></title>

    <link rel="stylesheet" href="./美化.css">
</head>
<body>
        

    ---------------------------------------
    <div style="background: gray;height: 100px;">
        <div style="margin-top: 20px;background: red;height: 50px;"></div>
    </div>
</body>
</html>

image-20200827172914134

想让子元素离开父元素，结果父元素却离开了上面，子元素没离开父元素，这种情况叫做margin塌陷

解决方式

  1. 父元素设置overflow
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">
    <title>页面美化</title></title>

    <link rel="stylesheet" href="./美化.css">
</head>
<body>
        

    ---------------------------------------
    <div style="background: gray;height: 100px;overflow: hidden;">
        <div style="margin-top: 20px;background: red;height: 50px;"></div>
    </div>
</body>
</html>

image-20200827173021805

  1. 给父元素设置边框
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">
    <title>页面美化</title></title>

    <link rel="stylesheet" href="./美化.css">
</head>
<body>
        

    ---------------------------------------
    <div style="background: gray;height: 100px;border: 1px solid white;">
        <div style="margin-top: 20px;background: red;height: 50px;"></div>
    </div>
</body>
</html>

image-20200827173021805

定位

static定位

元素的默认定位，不会受到 top, bottom, left, right影响。

相对定位

  • 相对于自己的初始位置定位

  • 元素偏移之后，原来的位置会保留下来（它周围的元素会以它原来的位置进行定位）

  • 层级提高，可以把标准文档流中的元素节浮动元素盖在下面

  • 一般很少单独使用，都是配合绝对定位

  • position:relative
  • 偏移量设置：top，left，right，bottom
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面美化</title></title>

    <link rel="stylesheet" href="./美化.css">
</head>
<body>
    <span style="background: gray;position: relative;top: 20px;">-------------</span>

    kkkkkkkkkkkkkkkk
</body>
</html>

image-20200827174620301

绝对定位

  • 相对于父级的第一个不是static定位元素进行定位，假如没有设置定位父级则相对浏览器窗口定位
  • 元素发生偏移之后，原来的位置不保留
  • 层级提高，可以把标准文档流中的元素节浮动元素盖在下面
  • 脱离文档流
  • 一般用于下拉菜单，焦点图轮播，弹出数字气泡，特别花边等场景
  • position:absolute
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面美化</title></title>

    <link rel="stylesheet" href="./美化.css">
</head>
<body>
        

    <span style="background: gray;position: absolute;top: 20px;">-------------</span>

    kkkkkkkkkkkkkkkk
</body>
</html>

image-20200827174636061

固定定位

  • 相对浏览器窗口定位
  • 偏移量不会随着滚动条变化
  • position:fixed
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面美化</title></title>

    <link rel="stylesheet" href="./美化.css">
</head>
<body>
        

    <span style="background: gray;position: fixed;top: 20px;">-------------</span>

    kkkkkkkkkkkkkkkk
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>

    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>

    <br>
    <br>
    <br>
    <br>
    <br>
    <br>

    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>

</body>
</html>

image-20200827174847455

z-index

  • 调整元素层级关系，默认为0
  • 设置了position时，可以设置各个元素之间的重叠关系
  • 值大的层覆盖值小的层
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面美化</title></title>

    <link rel="stylesheet" href="./美化.css">
</head>
<body>
        

    <span style="background: gray;position: absolute;top: 20px;z-index: -1;">-------------</span>

    <span style="background: red;z-index: 0;">kkkkkkkkkkkkkkkk</span>
</body>
</html>

image-20200827175158191

Flex

基本概述

传统方式就是我们刚才讲的，盒状模型+display+position+float，来实现页面的总体布局，对于一些特殊的布局来讲，不太容易实现。

W3C提出了一项新的方案:Flex布局（弹性布局），依托于Flex布局，可以轻松实现各种响应式布局方案。

Flex布局分为两种：

  • flex：用于块级元素
  • inline-flex：用于行级元素

我们在使用时，只需要设置display属性即可

1
2
3
.test{
    display: flex;
}

设置Flex布局之后，子元素的float，clear，vertical-align都将会失效

实现原理

1、display设置为Flex布局的元素称为Flex容器：flex container，容器内部的子元素都称为Flex项目：flex item

2、容器中我们有两个轴，一条水平的轴为主轴：main axis，一条垂直的轴交叉轴：cross axis，主轴和交叉轴的方向我们都可以设置

3、项目默认按照主轴排列，单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size

img

Flex的属性

容器上有六个属性，项目上有六个属性

容器六大属性

flex-direction

决定主轴的方向（也就是默认的项目排列方向），可以设置为从左到右，从右到左，从上到下，从下到上四种类型

属性值 方向
row（默认值） 从左到右
row-reverse 从右到左
column 从上到下
column-reverse 从下到上

我们只需要记住row和column即可，因为其他两个都是reverse之后的

flex-warp

容器内的项目排列都在一条线上，但是假如项目过多，就需要考虑到换行的问题，他有三种方式：不换行、换行、换行（但是第一行在下面）

属性值 换行方式
nowrap 不换行
wrap 普通换行
wrap-reverse 换行，但是第一行在下面

flex-flow

上面的flex-direction和flex-wrap可以使用一个属性来代替：flex-flow，它的默认值为 row nowrap，比如：

1
2
3
.test{
    flex-flow: row nowrap;
}

justify-content

我们也可以对项目进行水平轴对齐方式的改变

属性值 对齐方式
flex-start 按照主轴的开始点对齐
flex-end 按照主轴的结束点对齐
center 居中
space-between 两端对齐
space-around 项目间隔相等
img

align-items

我们也可以设置项目在交叉轴上的对齐方式

属性值 对齐方式
stretch 如果项目未设置高度或设为auto，将占满整个容器的高度
flex-start 交叉轴的起点对齐
flex-end 交叉轴的终点对齐
center 居中
baseline 项目的第一行文字的基线对齐。
img

align-content

多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。也就是说项目在多个容器中该如何对齐

属性值 对齐方式
stretch 轴线占满整个交叉轴
flex-start 与交叉轴的起点对齐
flex-end 与交叉轴的终点对齐
center 居中对齐
space-between 与交叉轴两端对齐，轴线之间的间隔平均分布
space-around 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍

项目六大属性

order

定义项目的排列顺序。数值越小，排列越靠前，默认为0

flex-grow

定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

假如有些项目为0，有些项目为1，那么为1的项目则均分剩下的空间

假如全部项目为1，那么它们将均分剩余的空间

假如有个项目为1，有个项目为2，那么剩余空间将会首先分割为1：2划分，2的占多

flex-shrink

定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。负值无效。

假如项目为0，那么不缩小。

flex-basis

定义了在分配多余空间之前，可以使用这个判断项目占据的主轴空间（main size），浏览器根据这个属性，计算主轴是否有多余空间然后进行分配

它的默认值为auto，即项目的本来大小，假如给一个固定值，那么项目将占据固定空间

flex

flex-grow、flex-shrink、flex-basis的简写，默认值为0 1 auto。后两个属性可选。

该属性有两个快捷值

  • auto：1 1 auto
  • none：0 0 auto

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值

align-self

允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性

默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

动画

CSS变形

  • 位移
1
2
3
4
5
<div style="height: 100px;width: 100px;background: red;transform: translate(0,50px);"></div>

<div style="height: 100px;width: 100px;background: green;transform: translateX(10px)"></div>

<div style="height: 100px;width: 100px;background: black;transform: translateY(10px)"></div>

image-20200827175624924

  • 缩放
1
2
3
<div style="margin: 10px;height: 100px;width: 100px;background: red;transform:scale(2,1)"></div>
<div style="margin: 10px;height: 100px;width: 100px;background: black;transform:scaleX(2)"></div>
<div style="margin: 10px;height: 100px;width: 100px;background: green;transform:scaleY(2)"></div>

image-20200827180230516

  • 旋转
1
2
3
<div style="margin: 10px;height: 100px;width: 100px;background: red;transform: rotate(40deg)"></div>
<div style="margin: 10px;height: 100px;width: 100px;background: black;transform:rotateX(50deg)"></div>
<div style="margin: 10px;height: 100px;width: 100px;background: green;transform:rotateY(40deg)"></div>

image-20200827180712672

  • 倾斜
1
2
3
<div style="height: 100px;width: 100px;background: red;transform: skew(30deg,30deg)"></div>
<div style="height: 100px;width: 100px;background: black;transform: skew(50deg)"></div>
<div style="height: 100px;width: 100px;background: green;transform: skew(40deg)"></div>

image-20200827180821960

CSS过渡

过渡，是一种动画转换的效果

transition: 过渡属性 过渡时间 过渡函数

  • 过渡属性
    • width，height，background-color，…..
    • all
  • 过渡时间，单位为秒（s）
  • 过渡动画
    • ease：快到慢
    • linear：均衡
    • ease-in：慢到快
    • ease-in-out：慢到快到慢
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面美化</title></title>

    <link rel="stylesheet" href="./美化.css">
</head>
<body>

    <div class="animation"></div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
.animation{
    height: 100px;
    width: 100px;
    background: red;
    transition: width 0.5s ease;
}

.animation:hover{
    width: 300px;
}

录制_2020_08_27_18_19_21_768

动画可以通过伪类触发，通过JS触发，通过@media属性判断设备的尺寸，方向触发

CSS动画

  1. 需要关键帧
  2. 需要animation属性调用关键帧
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">
    <title>页面美化</title></title>

    <style>
        @keyframes myfirst
        {
            from {background: red;}
            to {background: yellow;}
        }
        
        @-webkit-keyframes myfirst /* Safari 与 Chrome */
        {
            from {background: red;}
            to {background: yellow;}
        }

        .animation{
            height: 100px;
            width: 100px;
            background: red;
            animation: myfirst 2s ease;
        }

    </style>
</head>
<body>

    <div class="animation"></div>
</body>
</html>

录制_2020_08_27_18_28_11_7