CSS基础知识-CSDN博客

本文链接：https://blog.csdn.net/weixin_67804833/article/details/140566346

一、CSS简介

1.1什么是CSS？

CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。

1.2CSS作用

用来设置网页中元素的样式。

1.3样式分类与语法

内联样式：将样式定义在元素的style属性中。

语法如下：

style = " 属性 : 值 ; 属性 : 值 ; ……"

案例演示：

<div style="background-color: orange; width: 500px; height: 200px;">
   一个div
</div>

内部样式表：是将样式定义到HTML的<head>元素的子元素<style>里，使用选择器来定位要设置样式的元素。

案例演示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CSS内部样式表</title>
    <style>
       /* 为了让CSS可读性更强，你可以每行只描述一个属性: */
        #d1 {
            background-color: orange;
            width: 500px;
            height: 200px;
        }
    </style>
</head>

<body>
    <div id="d1">
        一个div
    </div>
</body>

</html>

外部样式表：是将css代码编写到CSS文件中，文件的扩展名为.css，然后通过link标签将css文件引入到HTML文档中。

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>CSS内部样式表</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

<body>
<div id="d1">
一个div
</div>
</body>

</html>

二、选择器

2.1基本选择器

标签选择器

结构： 标签名{css属性名：属性值；}

作用：通过标签名，找到页面中所有的这类标签，设置样式

注意：

标签选择器选择的是一类标签，而不是单独的一个
标签选择器无论嵌套关系有多深，都能够找到对应的标签

<style>
    p{
        color: red;
    }
</style>
<body>
    <p>
        标签选择器
    </p>
</body>

类选择器

结构： .类名{css属性名：属性值；}

作用：通过类名，找到页面中所有的带有这个类名的标签，设置样式

注意：

所有的标签上都有class属性，class属性的属性值成为类名（类似于起了一个名）
类名可以由数字，字母，下划线，中划线组成，但是不能以数字开头或者中划线开头
一个标签中可以同时有多个类名，类名之间用空格隔开
类名可以重复，一个类选择器可以同时选中多个标签

<style>
    .one{
        color: red;
    }
</style>
<body>
    <div class="one">
        类选择器
    </div>
</body>

id选择器

结构： #id属性值{css属性名：属性值;}

作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式

注意：

所有的标签上都有id属性
id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的
一个标签上只能有一个id属性值
一个id选择器只能选中一个标签

<style>
    #one{
        color: red;
    }
</style>
<body>
    <div id="one">
        id选择器
    </div>
</body>

通配符选择器

结构： *{css属性名：属性值}

作用：找到页面中所有的标签，然后设置样式

注意：

开发中应用极少，只有在特殊的情况下才会使用
在小页面中可能会用于去除页面中默认的margin和padding

<style>
   * {
      color: red;
   }
</style>
<body>
   <div>
      通配符选择器
   </div>
</body>

2.2复合选择器

交集选择器

语法： 选择器1选择器2{css属性名：属性值}

作用：选中页面中同时满足多个选择器的标签，紧挨着的

结果：找到标签中既能被选择器1又能被选择器2选中的标签，设置样式

注意：

之间没有任何东西隔开，紧挨着的，
交集选择器中如果有标签选择器，标签选择器必须放在前面

<style>
   p.one{
      color: red;
   }
</style>
<body>
   <p class="one">
      这个元素会被应用样式
   </p>
   <p>
      这个元素不会被应用样式
   </p>
</body>

并集选择器

语法： 选择器1,选择器2{css样式}

作用：同时选择多组标签，设置相同的样式

结果：找到选择器1和选择器2选中的标签，设置样式

注意：选择器与选择器之间用逗号隔开可以是基础选择器或者复合选择器每组选择器通常一行写一个，提高代码的可读性

<style>
   p,div{
      color: red;
   }
</style>
<body>
   <p>
      这个元素会被应用样式
   </p>
   <div>
      这个元素也会被应用样式
   </div>
</body>

2.3关系选择器

语法	用法	备注
父亲>儿子	儿子中的个别选择	选择器之间有大于号
祖先后代	后代全部选择	选择器之间用空格隔开
兄+弟	哥哥的弟弟被选择(弟弟必须严格相邻哥哥)	选择器之间用+隔开
兄~弟	哥哥的符合条件的所有弟弟被选择	选择器之间用波浪线隔开

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>关系选择器(兄弟、父子选择器)</title>
    <style>
        /* 父子选择 ，个别几个儿子*/
        /* div>span {
            color: blue;
            font-size: 40px;
        } */

        /* 祖先后代选择，全部 */
        /* div span {
            color: red;
        } */


        /* 必须相邻兄弟选择，是兄弟但不相邻，不选择 */
        /* div+span {
            color: greenyellow;
        } */

        /* 全兄弟选择 */
        /* p~span {
            color: rgb(3, 110, 8);
        } */

        p~* {
            color: orange;
        }
    </style>
</head>

<body>
    <div>
        我是div
        <p>
            我是div中的p
            <span>我是p中的span</span>
        </p>
        <div>我是div中的div</div>
        <span>我是div中的span1</span>
        <span>我是div中的span2</span>
    </div>
    <span>我是div之外的span1</span>
    <span>我是div之外的span2</span>

</body>

</html>

2.4 属性选择器

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        /* 第一种方法：选择含有指定属性的元素。
                语法：[属性名]{} */
        /*选择属性名为title,设置字体颜色红色  */
        [title] {
            color: red;
        }

        /* 第二种用法：选择含有指定属性及指定属性值的元素。
                语法：[属性名=属性值]{} */
        /*选择属性名为title和属性值为ab的元素 ,设置字体颜色绿色 */
        [title=ab] {
            color: green;
        }

        /* 第三种用法：选择含有指定属性及指定属性之开头的元素。
                语法：[属性名^=属性值]{}  */
        /* 选择属性名为title和属性值以ab开头的元素，设置背景色黄色 */
        [title^=ab] {
            background-color: yellow;
        }

        /* 第四种用法：选择含有指定属性及指定属性值结尾的元素。
                语法：[属性名$=属性值] */
        /* 选择属性名为title和属性值以ab结尾的元素，设置字体为30px */
        [title$=ab] {
            font-size: 30px;
        }

        /* 第五种用法：选择含有指定属性，只要含有某个属性值的元素。
                语法：[属性值*=属性名]{} */
        /* 选择属性名为title和属性值含有c的元素，设置背景色为绿色 */
        [title*=c] {
            background-color: green;
        }
    </style>
</head>

<body>
    <h1 title="a">《出塞》</h1>
    <h2 title="ab">唐·王昌龄</h2>
    <p title="abc">秦时明月汉时关，</p>
    <p title="abab">万里长征人未还。</p>
    <p title="c">但使龙城飞将在，</p>
    <p>不教胡马度阴山。</p>
</body>

</html

2.5伪类选择器

伪类：不存在的类，特殊的类

(1)伪类用来描述一个元素的特殊状态比如：第一个子元素、被点击的元素、鼠标移入的元素...

(2)伪类一般情况下都是使用:开头

元素选择伪类选择器

:前有空格代表从子类开始数，无空格代表从所在级数开始。

:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child(n) 选中第n个子元素 ,n的范围0到正无穷
            even 或 2n 表示选中偶数位的元素
        odd 或 2n+1 表示选中奇数位的元素
    
以上这些伪类都是根据所有的子元素进行选择
以下这些伪类都是在同类型元素中进行选择
:first-of-type
:last-of-type
:nth-of-type(n)

否定伪类选择器

:not()      括号里传入其他选择器，但是不支持复合选择器的传入

将符合选择器的元素排除

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>否定伪类</title>
    <style>
        div :not(p:first-of-type):not(p:last-child) {
            color: red;
        }
    </style>
</head>

<body>
    <div>
        <p>文字</p><!-- 不变红 -->
        <p>文字</p><!-- 变红 -->
        <p>文字</p><!-- 变红 -->
        <p>文字</p><!-- 不变红 -->
    </div>
</body>

</html>

a链接的伪类

:link 表示未访问过的a标签
:visited 表示访问过的a标签
以上两个伪类是超链接所独有的
由于隐私的问题，所以visited这个伪类只能修改链接的颜色
以下两个伪类是所有标签都可以使用
:hover 鼠标移入后元素的状态
:active 鼠标点击后，元素的状态

2.6伪元素选择器

虚假的元素，实际上是没有的，但是css为了设置一些样式，默认提供的，一般都用在段落标记中

p::first-letter     首字符
p::first-line       首行
p::selection        选中的
::before            第一个字符之前
::after             最后一个字符之后
before和after必须配合contend一起使用(before,after所写的内容无法选中且永远在最前和最后)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>伪元素选择器</title>
    <style>
        /* 需求一：让文章的首字母一直为字体为24px */
        p::first-letter {
            font-size: 24px;
        }

        /* 需求二：让文章的第一行添加背景色灰色 */
        /* p::first-line {
            background-color: #ccc;
        } */

        /* 需求三：让选中的内容，字体为红色 */
        /* p::selection {
            color: red;
        } */

        /* 需求四：在元素开始的位置前+'你好' */
        /* p::before {
            content: '你好';
            color: red
        } */
    </style>
</head>

<body>
    <p>hello</p>
    <p>world,我们要相信明天会更好。</p>
</body>

</html>

三、盒子模型

3.1盒子模型

每一个html元素都可以叫做盒模型。页面就是由一个个盒模型堆砌起来的。

这样的优点就是可以将元素放置在任何地方，可以通过调整宽和高来充满整个屏幕

在CSS中，盒模型（Box Modle）是用来对元素进行设计和布局的，由内到外包含实际内容区、内边距、边框、和外边距四个部分。

1）内容区Content

用来放置文本或者子元素。

2）内边距padding

即内容区与边框的距离。

3）边框border

围绕在内边距外的边框。

4）外边距margin

边框以外的区域。

3.2 内容区

content，盒模型的实际内容区。
该区域可以放入文本，以及子元素。
样式属性width，height，background-color就是对该区域进行设置的

3.3 内边距

padding，定义了内容区距离边框的这一片区域，该区域是透明的，没有颜色。包含上下左右的四个内边距。

padding-top：上内边距
padding-right：右内边距
padding-bottom：下内边距
padding-left：左内边距

3.4 边框

元素的边框，在CSS中，通常由的这三个维度属性来控制。

边框宽度：border-width
边框颜色：border-color
边框样式：border-style

上下左右的边框单独设置宽，颜色，样式，属性如下：

上边框的宽，颜色，样式
border-top-width
border-top-color
border-top-style

下边框的宽，颜色，样式
border-bottom-width
border-bottom-color
border-bottom-style

左边框的宽，颜色，样式
border-left-width
border-left-color
border-left-style

右边框的宽，颜色，样式
border-right-width
border-right-color
border-right-style

边框的线条样式：

- none:  默认无边框
- dotted:  点虚线
- solid:  实线
- double  双线条
- dashed  虚线
- groove: 定义3D沟槽边框。效果取决于边框的颜色值
- ridge: 定义3D脊边框。效果取决于边框的颜色值
- inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
- outset: 定义一个3D突出边框。 效果取决于边框的颜色值

元素的可见大小，就是由边框+padding+content决定的。

3.5外边距

margin(外边距)属性定义元素周围的空间。作用一般是用来设置该元素所在网页的位置。也分为

margin-top      :上外边距
margin-right    ：右外边距
margin-bottom   ：下外边距
margin-left     ：左外边距

3.6 盒子水平布局

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

 margin-left
 border-left
 padding-left
 width
 padding-right
 border-right
 margin-right

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

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

第二种情况：有auto的情况。width,margin-left,margin-right可以设置为auto.

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

0 + 0 + 0 + auto + 0 + 0 + 0 = 800              宽的auto 则为 800
0 + 0 + 0 + auto + 0 + 0 + 200 = 800            宽的auto 则为 600

200 + 0 + 0 + auto + 0 + 0 + 200 = 800          宽的auto 则为 400
auto + 0 + 0 + 200 + 0 + 0 + 200 = 800          左外边距的auto 则为 400
auto + 0 + 0 + 200 + 0 + 0 + auto = 800         左右外边距的auto = 300

- 如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置为auto的外边距会自动为0
- 如果将三个值都设置为auto，则外边距都是0，宽度最大
- 如果将两个外边距设置为auto，宽度固定值，则会将外边距设置为相同的值

3.7 盒子垂直布局

垂直距离，相对来说，比较简单，没有水平距离复杂，只需要修改上下的外边距即可

注意：元素的整个垂直大小，要考虑上下外边距，边框的宽度，上下内边距，以及width。

如果发生了溢出，可以使用以下属性来设置，注意，是在父元素里设置。

overflow:
    可选值:   
    visible:  默认值，表示可见
    hidden :  将溢出的内容裁剪
    scroll:   添加了上下和左右的滚动条设置
    auto:  根据需求自动添加滚动条

3.8 外边距的折叠

针对于块元素来说，都是独占一行的，因此只涉及到垂直方向上的外边距的重叠(折叠)，即两个元素的相邻外边距可以发生重叠现象。

兄弟元素

- 兄弟元素间的相邻垂直外边距会取两者之间的较大值（两者都是正值）
- 特殊情况：
   如果相邻的外边距一正一负，则取两者的和
   如果相邻的外边距都是负值，则取两者中绝对值较大的
- 兄弟元素之间的外边距的重叠，对于开发是有利的，所以我们不需要进行处理

父子元素

- 父子元素间相邻外边距，子元素的会传递给父元素（上外边距）
- 父子外边距的折叠会影响到页面的布局，必须要进行处理  （只需要父元素添加border属性）

案例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #outer {
            border: 1px solid red;
            width: 800px;
            height: 500px;
            margin: 0 auto;
        }

        #d1 {
            border: 1px solid red;
            width: 300px;
            height: 300px;
            background-color: aqua;
        }

        #d2 {
            border: 5px solid blue;
            width: 200px;
            height: 200px;
        }

        #d2 {
            margin-top: 50px;
        }
    </style>
</head>

<body>
    <div id="outer">
        <div id="d1">
            <div id="d2">
                1
            </div>
        </div>
    </div>
</body>

</html>

3.9 行内元素的盒模型

对于内联元素(行内元素)的盒模型来说。

- 行内元素不支持设置宽度和高度， 被内容数据撑起来的
- 行内元素可以设置padding，但是垂直方向padding无效
- 行内元素可以设置border，垂直方向的border无效
- 行内元素可以设置margin，垂直方向的margin无效

如果想要行内元素的宽，高或者垂直方向上的样式生效，可以使用display属性将行内元素的样式转为块元素的样式进行显示设置。

display属性的可选值如下：

none 隐藏，不再占用原有的空间。
block 变成块元素的样式显示。（注意，并不是内联元素变成了快元素）
inline 变成行内元素的样式显示
inline-block 变成行内的块元素，同时具有了内联和块元素的样式特点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行内元素的盒模型</title>
    <style>
        div{
            border: 1px red solid;
            width: 400px;
            height: 400px;
            margin: 100px auto;
        }
        #s1{
            width: 200px;
            height: 50px;
            border: 3px green solid;
            padding: 3px;
            margin: 5px;
            display: block;
        }
        div div{
            display: inline;
        }
    </style>
</head>
<body>
    <div>
        <span id="s1">我是一只鹅</span><span id="s2">你也是一只鹅</span>
        <div>1</div><div>2</div>
    </div>
</body>
</html>

3.10 轮廓和圆角

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

box-shadow 用来设置元素的阴影效果，阴影不会影响页面布局
第一个值水平偏移量设置阴影的水平位置正值向右移动负值向左移动
第二个值垂直偏移量设置阴影的水平位置正值向下移动负值向上移动
第三个值阴影的模糊半径
第四个值阴影的颜色
box-shadow: 0px 0px 50px rgba(0, 0, 0, .3) ;

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

   - border-top-left-radius
   - border-top-right-radius
   - border-bottom-left-radius
   - border-bottom-right-radius
   border-top-left-radius:50px 100px; */
border-radius 可以分别指定四个角的圆角
四个值：左上右上右下左下
三个值：左上右上/左下右下
两个值：左上/右下右上/左下

border-radius: 20px / 40px; */

将元素设置为一个圆形
border-radius: 50%;

四、元素的浮动

4.1 浮动的简介

浮动的特点：

1、浮动元素会完全脱离文档流，不再占据文档流中的位置
2、设置浮动以后元素会向父元素的左侧或右侧移动，
3、浮动元素默认不会从父元素中移出
4、浮动元素向左或向右移动时，不会超过它前边的其他浮动元素
5、如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移
6、浮动元素不会超过它上边的浮动的兄弟元素，最多最多就是和它一样高

简单总结：

浮动目前来讲它的主要作用就是让页面中的元素可以水平排列，通过浮动可以制作一些水平方向的布局

4.2 浮动的其他特点

-浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以利用浮动来设置文字环绕图片的效果
比如：哥哥元素设置浮动
弟弟元素里的文字会自动环绕哥哥，而不会被哥哥元素覆盖
- 元素设置浮动以后，将会从文档流中脱离，从文档流中脱离后，元素的一些特点也会发生变化

脱离文档流的特点：
-- 块元素：
1、块元素不在独占页面的一行
2、脱离文档流以后，块元素的宽度和高度默认都被内容撑开

-- 行内元素：
行内元素脱离文档流以后，其特点和浮动的块元素特点一样

五、元素定位

5.1 相对定位

- 相对定位：
- 当元素的position属性值设置为relative时则开启了元素的相对定位
- 相对定位的特点：
1.元素开启相对定位以后，如果不设置偏移量元素不会发生任何的变化
2.相对定位是参照于元素在文档流中的位置进行定位的
3.相对定位会提升元素的层级
4.相对定位不会使元素脱离文档流
5.相对定位不会改变元素的性质块还是块，行内还是行内

- 偏移量（offset）
- 当元素开启了定位以后，可以通过偏移量来设置元素的位置
top
- 定位元素和定位位置上边的距离
bottom
- 定位元素和定位位置下边的距离

- 定位元素垂直方向的位置由top和bottom两个属性来控制
通常情况下我们只会使用其中一
- top值越大，定位元素越向下移动
- bottom值越大，定位元素越向上移动
left
- 定位元素和定位位置的左侧距离
right
- 定位元素和定位位置的右侧距离

- 定位元素水平方向的位置由left和right两个属性控制
通常情况下只会使用一个
- left越大元素越靠右
- right越大元素越靠左

<!DOCTYPE html>
<html lang="">
<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>
<style>
/*
元素定位的学习：
1. 定位是一个相对来说比较高级的页面布局属性
2. 可以使元素在页面的任意位置。
3. 属性名为position，
可选值有：
static: 静态的，表示元素静止不动
relative: 相对的，表示元素的相对定位
absolute: 绝对的，表示元素的绝对定位
fixed: 固定的，表示元素的固定定位
sticky: 粘滞的，表示元素的粘滞定位

相对定位：
- 当position的属性值位relative时，就开启的元素的相对定位
- 相对定位的特点：
1. 如果设置了相对定位，没有改变偏移量，则元素不会移动
2. 相对的位置是元素所在文档流的位置。
3. 设置了相对定位的元素，不会脱离文档流
4. 设置了相对定位的元素提高了自己的层级
5. 设置了相对定位的元素，本身的性质不会改变，块依旧是块元素，行内依旧是行内元素

偏移量(offset)：
top:
指元素距离相对位置的顶端的偏移量
bottom：
指元素距离相对位置的低端的偏移量
left：
指元素距离相对位置的左边的偏移量
right
指元素距离相对位置的右边的偏移量

总结：
left的值越大，越向右移动
top的值越大，越向下移动

bottom的值越大越向上移动
right的值越大，越想左移动
*/
.box1{
width: 200px;
height: 200px;
background-color: blueviolet;
}
.box2{
width: 200px;
height: 200px;
background-color:brown;
position: relative;
right: 50px;
}
.box3{
width: 200px;
height: 200px;
background-color:chartreuse;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>

5.2 绝对定位

绝对定位
- 当元素的position属性值设置为absolute时，则开启了元素的绝对定位
- 绝对定位的特点：
1.开启绝对定位后，如果不设置偏移量元素的位置不会发生变化
2.开启绝对定位后，元素会从文档流中脱离
3.绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开
4.绝对定位会使元素提升一个层级
5.绝对定位元素是相对于其包含块进行定位的

包含块( containing block )
- 普通情况下(不涉及定位)：
包含块就是离当前元素最近的祖先块元素
<div>
   <div>
       <div></div>
   </div>
</div>
<div><span><em>hello</em></span></div>

- 绝对定位的包含块:
包含块就是离它最近的开启了定位的祖先元素，
如果所有的祖先元素都没有开启相对定位则根元素就是它的包含块

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

<!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>
<style>
/*
绝对定位的学习：
当position的值为absolute时，则该元素开启了绝对定位
开启绝对定位的元素有以下特点：
1. 如果设置了绝对定位，不改变偏移量，则该元素不会移动
2. 设置了绝对定位的元素会脱离文档流
3. 设置了绝对定位的元素的位置是相对于所在的包含块。
4. 设置了绝对定位的元素的性质会发生改变。行内元素变成块元素，此时所有的元素宽和高默认都是内容撑开的。
5. 设置了绝对定位的元素提高了层级。

包含块：
如果设置了绝对定位，那么该元素是相对于距离他最近的设置了相对定位的祖先块元素。
如果所有的祖先块元素都没有设置定位，那么就是相对HTML这个根元素来说的。

最近的设置了相对定位的祖先块称之为包含块。
HTML：是所有元素的初始包含块。
*/
.box1{
width: 200px;
height: 200px;
background-color: blueviolet;
}
.box2{
width: 200px;
height: 200px;
background-color:brown;
position: absolute;
left:100px;
top:100px;

}
.box3{
width: 300px;
height: 300px;
background-color:chartreuse;
}
.box4{
width: 300px;
height: 300px;
background-color:chocolate;
position: relative;
}
.box5{
width: 300px;
height: 300px;
background-color:darkblue;
position: relative;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box4">4
<div class="box5">5
<div class="box2">2</div>
</div>
</div>
<div class="box3">3</div>
</body>
</html>

5.3 固定定位

- 将元素的position属性设置为fixed则开启了元素的固定定位
- 固定定位也是一种绝对定位，所以固定定位的大部分特点都和绝对定位一样
唯一不同的是固定定位永远参照于浏览器的视口进行定位
固定定位的元素不会随网页的滚动条滚动。

比较适合广告位的设置。
*/
.box1{
width: 200px;
height: 200px;
position: fixed;
background-color: blueviolet;
left: 100px;
top: 100px;
}
.box2{
width: 200px;
height: 2000px;
background-color:brown;
}
.box3{
width: 200px;
height: 200px;
background-color:chartreuse;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>

5.4 粘滞定位

- 当元素的position属性设置为sticky时则开启了元素的粘滞定位
- 粘滞定位和相对定位的特点基本一致，
不同的是粘滞定位可以在元素到达某个位置时将其固定

<!DOCTYPE html>
<html lang="">
<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>
<style>
/*
粘滞定位的学习：
当position的值为sticky时，则开启的元素的粘滞定位
粘滞定位的特点：
1. 粘滞定位的特点和相对定位的特点差不多。
2. 粘滞定位的不同之处，在于当到达某一个固定位置时，粘住不动。
*/
.box1{
width: 200px;
height: 200px;
background-color: blueviolet;
}
.box2{
width: 200px;
height: 200px;
background-color:brown;
position:sticky;
/* 当元素移动到距离视口顶端50px时，则被粘住，不动*/
top: 50px;
}
.box3{
width: 200px;
height: 2000px;
background-color:chartreuse;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>

5.5 绝对定位元素的布局

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

- 当我们开启了绝对定位后:
水平方向的布局等式就需要添加left 和 right 两个值
此时规则和之前一样只是多添加了两个值：
当发生过度约束：
如果9个值中没有 auto 则自动调整right值以使等式满足
如果有auto，则自动调整auto的值以使等式满足

- 可设置auto的值
margin width left right

- 因为left 和 right的值默认是auto，所以如果不指定left和right
则等式不满足时，会自动调整这两个值
垂直方向布局的等式的也必须要满足
top + margin-top/bottom + padding-top/bottom + border-top/bottom + height = 包含块的高度

<!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>
<style>
.box1{
margin:0 auto;
width: 800px;
height: 800px;
background-color: darkturquoise;
position: relative;
}
/*
box2在box1里面，并开启了绝对定位, 如果想要box2布局到box1里，那么box1就需要开启相对定位

那么就必须满足一个等式
水平方向上：两个偏移量+两个外边距+两个边框+两个内边距+本身的width = 父元素的width;
left+right+ margin+border+padding+width = 父元素的width；
垂直方向上：
两个偏移量+两个外边距+两个边框+两个内边距+本身的height = 父元素的height;
top+bottom+margin+border+padding+height = 父元素的height


如果在这个等式中，发生了过度约束，也就是说所有的值加起来不等于父元素的width或者height
则会强制调整成满足的状态。
可以设置auto的值有以下几个：
left,right,margin(4个方向),width,height

-1. 如果都没有设置成auto，则right强制变为auto
-2. left和right本身的默认值是auto。如果这两个值都没有设置，那么都被强制为auto值。
有使元素居中的效果。

*/
.box2{
width: 300px;
height: 300px;
background-color: deeppink;
position: absolute;
left:auto;
right: auto;
top: auto;
bottom: auto;
margin: 50px;
padding: 50px;
border: 50px solid black;

}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>

5.6 元素的层级

对于开启了定位元素，可以通过z-index属性来指定元素的层级
z-index需要一个整数作为参数，值越大元素的层级越高
元素的层级越高越优先

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

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

兄弟元素：
z-index的值越大，层级越高
父子元素：
父元素的z-index的值再大，也不会覆盖子元素(也不会高过子元素的层级)

*/

.box1{
width: 200px;
height: 200px;
background-color: black;
position: absolute;

}

.box2{
width: 200px;
height: 200px;
background-color:pink;
position: absolute;
left:50px;
top: 50px;
z-index: 2;
}

.box3{
width: 100px;
height: 100px;
background-color:blue;
position: absolute;
left: 100px;
top:100px;
z-index: 1;
}

</style>
</head>
<body>
<div class="box1"></div>
<div class="box2">
<div class="box3"></div>
</div>
</body>
</html>

六动画

6.1 过渡

过渡（transition）
- 通过过渡可以指定一个属性发生变化时的切换方式
- 通过过渡可以创建一些非常好的效果，提升用户的体验
transition-property: 指定要执行过渡的属性
多个属性间使用,隔开
如果所有属性都需要过渡，则使用all关键字
大部分属性都支持过渡效果，注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡
transition-duration: 指定过渡效果的持续时间
时间单位：s 和 ms 1s = 1000ms
transition-timing-function: 过渡的时序函数
指定过渡的执行的方式
可选值：
ease 默认值，慢速开始，先加速，再减速
linear 匀速运动
ease-in 加速运动
ease-out 减速运动
ease-in-out 先加速后减速
cubic-bezier() 来指定时序函数
https://cubic-bezier.com
steps() 分步执行过渡效果
可以设置一个第二个值：
end ，在时间结束时执行过渡(默认值)
start ，在时间开始时执行过渡
transition-delay: 过渡效果的延迟，等待一段时间后在执行过渡
transition 可以同时设置过渡相关的所有属性，只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟。

6.2 动画

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

设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行每一个步骤
@keyframes test{
/* from表示动画的开始位置也可以使用 0% */
from{
margin-left: 0;
background-color: orange;
}

/* to动画的结束位置也可以使用100%*/
to{
background-color: red;
margin-left: 700px;
}
}
animation-name: 要对当前元素生效的关键帧的名字
animation-duration: 动画的执行时间
animation-delay
animation-timing-function: ease-in-out
animation-iteration-count
animation-direction
指定动画运行的方向
可选值：
normal 默认值从 from 向 to运行每次都是这样
reverse 从 to 向 from 运行每次都是这样
alternate 从 from 向 to运行重复执行动画时反向执行
alternate-reverse 从 to 向 from运行重复执行动画时反向执行
animation-play-state: 设置动画的执行状态
可选值：
running 默认值动画执行
paused 动画暂停
animation-fill-mode: 动画的填充模式
可选值：
none 默认值动画执行完毕元素回到原来位置
forwards 动画执行完毕元素会停止在动画结束的位置
backwards 动画延时等待时，元素就会处于开始位置
both 结合了forwards 和 backwards

6.3 变形

变形就是指通过CSS来改变元素的形状或位置
- 变形不会影响到页面的布局
- transform 用来设置元素的变形效果
- 平移：
translateX() 沿着x轴方向平移
translateY() 沿着y轴方向平移
translateZ() 沿着z轴方向平移
- 平移元素，百分比是相对于自身计算的
z轴平移，调整元素在z轴的位置，正常情况就是调整元素和人眼之间的距离，
距离越大，元素离人越近
z轴平移属于立体效果（近大远小），默认情况下网页是不支持透视，如果需要看见效果
必须要设置网页的视距

6.4 旋转

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