第一章：定位

1.1 定位的基本介绍

1.1.1 网页常见布局方式

标准流：
- ① 块级元素独占一行 —> 垂直布局。
- ② 行内元素或行内块元素一行显示多个 —> 水平布局。
浮动：可以让原本垂直布局的 块级元素变成水平布局 。
定位：
- ① 可以让元素自由的摆放在网页的任意位置。
- ② 一般用于 盒子之间的层叠情况 。

1.1.2 定位的常见应用场景

① 可以解决盒子和盒子之间的层叠问题，即定位之后的元素层级最高，可以层叠在其他盒子上面。

② 可以让盒子始终固定在屏幕中的某个位置。

1.2 定位的基本使用

① 设置定位方式：
- 属性名：position 。
- 常见属性值： | 定位方式 | 属性值 | | —- | —- | | 静态定位 | static | | 相对定位 | relative | | 绝对定位 | absolute | | 固定定位 | fixed |
② 设置偏移值：
- 偏移值设置分为两个方向，水平和垂直方向各选一个使用即可。
- 选取的原则一般是就近原则（离那边近用那个）。 | 方向 | 属性名 | 属性值 | 含义 | | —- | —- | —- | —- | | 水平 | left | 数字 + px | 距离左边的距离 | | 水平 | right | 数字 + px | 距离右边的距离 | | 垂直 | top | 数字 + px | 距离上边的距离 | | 垂直 | bottom | 数字 + px | 距离下边的距离 |

示例：

<!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>
        div {
            width: 200px;
            height: 200px;
        }
        .box1 {
            position: relative;
            background-color: red;
        }
        .box2 {
            position: absolute;
            left: 50%;
            top: 50%;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

1.3 静态定位（了解）

静态定位是默认值，即标准流。
代码：position:static;。

注意：

① 静态定位就是之前的标准流，不能通过方位属性进行移动。
② 之后说的定位不包括静态定位，一般特指后几种：相对、绝对、固定。

1.4 相对定位

相对定位：自恋型定位，相对于自己之前的位置进行移动。
代码：position: relative; 。
特点：
- ① 需要配置方位属性实现移动。
- ② 相对于自己原来位置进行移动。
- ③ 在页面中占位置，即没有脱标。
应用场景：
- ① 配置绝对定位组（子绝父相）。
- ② 用于小范围的移动。
示例：

<!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>
        .box {
            /* 相对定位 */
            /* 
                ① 占有原有的问题
                ② 仍然具有标签原有的显示模式的特点
                ③ 改变位置参照自己原来的位置
            */
            position: relative;
            left: 100px;
            top: 100px;

            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi minima voluptatibus quos rem facere nemo
        cupiditate, in fuga atque illum numquam, soluta minus ducimus maxime dolorum voluptates. Nihil, voluptatum quod?
    </p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dignissimos cumque consectetur nam libero perferendis
        eligendi necessitatibus quasi ad dolores repudiandae tempora, molestias corrupti sequi harum asperiores impedit
        ab, modi omnis.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium corrupti tenetur quo. Officia quod, eum,
        doloribus quisquam voluptatum qui illo consequatur enim, a debitis illum voluptas corporis saepe. Nihil.</p>
    <div class="box">box</div>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dignissimos cumque consectetur nam libero perferendis
        eligendi necessitatibus quasi ad dolores repudiandae tempora, molestias corrupti sequi harum asperiores impedit
        ab, modi omnis.</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dignissimos cumque consectetur nam libero perferendis
        eligendi necessitatibus quasi ad dolores repudiandae tempora, molestias corrupti sequi harum asperiores impedit
        ab, modi omnis.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis animi nesciunt delectus tempora doloribus in
        corrupti voluptas reprehenderit aspernatur. Fugit saepe vitae nihil commodi necessitatibus nesciunt aut cum,
        illum nam.</p>
</body>

</html>

1.5 绝对定位

介绍：拼爹型定位，相对于非静态定位的父元素进行定位移动。
代码：position: absolute; 。
特点：
- ① 需要配合方位属性实现移动。
- ② 默认相对于浏览器可视区域进行移动。
- ③ 在页面中不占位置，即脱标。
应用场景：配置绝对定位组（子绝父相）。
示例：

<!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>
        .box {
            /* 
                绝对定位：
                    先找已经定位的父级，如果有这样的父级，就以这个父级为参照物进行定位。
                    有父级，但是父级没有定位，以浏览器窗口为参照进行定位。
            */
            position: absolute;
            left: 0;
            top: 0;

            /* 
                ① 脱标。
                ② 改变标签的显示模式特点：行内块元素的特点。
            */

            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi minima voluptatibus quos rem facere nemo
        cupiditate, in fuga atque illum numquam, soluta minus ducimus maxime dolorum voluptates. Nihil, voluptatum quod?
    </p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dignissimos cumque consectetur nam libero perferendis
        eligendi necessitatibus quasi ad dolores repudiandae tempora, molestias corrupti sequi harum asperiores impedit
        ab, modi omnis.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium corrupti tenetur quo. Officia quod, eum,
        doloribus quisquam voluptatum qui illo consequatur enim, a debitis illum voluptas corporis saepe. Nihil.</p>
    <div class="box">box</div>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dignissimos cumque consectetur nam libero perferendis
        eligendi necessitatibus quasi ad dolores repudiandae tempora, molestias corrupti sequi harum asperiores impedit
        ab, modi omnis.</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dignissimos cumque consectetur nam libero perferendis
        eligendi necessitatibus quasi ad dolores repudiandae tempora, molestias corrupti sequi harum asperiores impedit
        ab, modi omnis.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis animi nesciunt delectus tempora doloribus in
        corrupti voluptas reprehenderit aspernatur. Fugit saepe vitae nihil commodi necessitatibus nesciunt aut cum,
        illum nam.</p>
</body>

</html>

1.6 子绝父相

场景：让子元素相对于父元素进行自由移动。
含义：
- 子元素：绝对定位。
- 父元素：相对定位。
子绝父相的好处：父元素是相对定位，对网页布局影响最小。

注意：子绝父绝的特殊场景

场景：在使用子绝父相的时候，发现父元素进行有绝对定位了，此时直接子绝即可！
原因：父元素已经有定位，满足要求，如果盲目修改父元素定位方式，可能会影响之前写好的布局。

示例：

<!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 {
            width: 400px;
            height: 400px;
            background-color: pink;
        }

        .box2 {
            position: relative;

            width: 300px;
            height: 300px;
            background-color: skyblue;
        }

        .box3 {
            position: absolute;
            right: 20px;
            bottom: 30px;

            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2">
            <div class="box3"></div>
        </div>
    </div>
</body>

</html>

1.7 固定定位

介绍：死心眼型定位，相对于浏览器可视区域进行定位移动。
代码：position: fixed; 。
特点：
- ① 需要配合方位属性实现移动。
- ② 相对于浏览器可视区域进行移动。
- ③ 在页面中不占位置，即脱标。
应用场景：让盒子固定在屏幕中的某个位置。
示例：

<!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>
        body {
            height: 1500px;
        }

        .nav {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 50px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fuga doloribus quia quasi quis perspiciatis alias
        inventore, sint fugiat! Quibusdam, veritatis? Eum, tenetur rerum velit quisquam ad architecto minima vel alias.
    </p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fuga doloribus quia quasi quis perspiciatis alias
        inventore, sint fugiat! Quibusdam, veritatis? Eum, tenetur rerum velit quisquam ad architecto minima vel alias.
    </p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fuga doloribus quia quasi quis perspiciatis alias
        inventore, sint fugiat! Quibusdam, veritatis? Eum, tenetur rerum velit quisquam ad architecto minima vel alias.
    </p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fuga doloribus quia quasi quis perspiciatis alias
        inventore, sint fugiat! Quibusdam, veritatis? Eum, tenetur rerum velit quisquam ad architecto minima vel alias.
    </p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fuga doloribus quia quasi quis perspiciatis alias
        inventore, sint fugiat! Quibusdam, veritatis? Eum, tenetur rerum velit quisquam ad architecto minima vel alias.
    </p>
    <div class="nav"></div>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fuga doloribus quia quasi quis perspiciatis alias
        inventore, sint fugiat! Quibusdam, veritatis? Eum, tenetur rerum velit quisquam ad architecto minima vel alias.
    </p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fuga doloribus quia quasi quis perspiciatis alias
        inventore, sint fugiat! Quibusdam, veritatis? Eum, tenetur rerum velit quisquam ad architecto minima vel alias.
    </p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fuga doloribus quia quasi quis perspiciatis alias
        inventore, sint fugiat! Quibusdam, veritatis? Eum, tenetur rerum velit quisquam ad architecto minima vel alias.
    </p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fuga doloribus quia quasi quis perspiciatis alias
        inventore, sint fugiat! Quibusdam, veritatis? Eum, tenetur rerum velit quisquam ad architecto minima vel alias.
    </p>
</body>

</html>

1.8 元素的层级关系

1.8.1 元素层级问题

不同布局方式元素的层级关系：标准流 < 浮动 < 定位。
不同定位之间的层级关系：
- 相对、绝对、固定默认层级相同。
- 此时 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>
        div {

            width: 200px;
            height: 200px;
        }

        .box1 {
            position: absolute;
            left: 20px;
            top: 50px;
            background-color: pink;
        }

        .box2 {
            position: absolute;
            left: 50px;
            top: 100px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <!-- 默认情况下，定位的盒子：后来者居上 -->
    <div class="box2">box2</div>
    <div class="box1">box1</div>
</body>

</html>

1.8.2 更改定位元素的层级

场景：改变定位元素的层级。
属性名：z-index 。
属性值：数字，数字越大，层级越高。
示例：

<!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>
        div {
            width: 200px;
            height: 200px;
        }

        .box1 {
            position: absolute;
            left: 20px;
            top: 50px;
            background-color: pink;
        }

        .box2 {
            /* 
                z-index 改变定位元素的层级，单位是数字，数字越大，层级越高
                z-index 的默认值是 0
                z-index 需要配合定位才能生效
             */
            z-index: 1000;
            position: absolute;
            left: 50px;
            top: 100px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <!-- 默认情况下，定位的盒子：后来者居上 -->
    <div class="box2">box2</div>
    <div class="box1">box1</div>
</body>

</html>

第二章：装饰

2.1 垂直对齐方式

2.2.1 认识基线（了解）

基线：浏览器文字类型元素排版中存在用于对齐的基线（baseline）。

1.2.2 文字对齐问题

场景：解决行内、行内块元素元素垂直对齐问题。
问题：当图片和文字在一行显示的时候，底部不是对齐的。
示例：

<!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>
    <img src="./images/1.jpg" alt="">呵呵哒
</body>

</html>

1.2.3 垂直对齐方式

属性名：vertical-align 。
属性值： | 属性值 | 说明 | | —- | —- | | baseline | 默认，基线对齐 | | top | 顶部对齐 | | middle | 中部对齐 | | bottom | 底部对齐 |

示例：

<!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>
        img {
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <img src="./images/1.jpg" alt="">呵呵哒
</body>

</html>

1.2.4 项目中 `vertical-align` 可以解决的问题

① 文本框和表单按钮无法对齐的问题。
② input 和 img 无法对齐的问题。
③ div 中的文本框，文本框无法贴顶问题。
④ div 不设置高度由 img 标签撑开，此时 img 标签下面会存在额外的间隙问题。
⑤ 使用 line-height 让 img 标签垂直居中问题。

注意：

学习浮动之后，不推荐使用行内块元素让 div 一行显示，因为可能会出现垂直对齐问题。
推荐优先使用浮动完成效果。

2.2 光标类型

场景：设置鼠标在元素上时显示的样式。
属性名：cursor 。
属性值： | 属性值 | 说明 | | —- | —- | | default | 默认值，通常是箭头 | | pointer | 小手效果，提示用户可以点击 | | text | 工字型，提示用户可以选择文字 | | move | 十字光标，提示用户可以移动 |

示例：

<!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>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 光标类型，手型 */
            cursor: pointer;
        }

        p {
            /* 光标类型，工字型，表示可以复制 */
            cursor: text;
        }
    </style>
</head>

<body>
    <div>div</div>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum sed, quis saepe officia inventore sunt ad harum
        quasi quo magnam! Cupiditate id corrupti corporis tempora? Porro ea amet cumque iste!</p>
</body>

</html>

2.3 边框圆角

场景：让盒子四个角变得圆滑，增加页面细节，提升用户体验。
属性名：border-radius 。
常见取值：数字 + px 、百分比。
原理：

赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角！
示例：

<!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>
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;

            /* 一个值：表示 4个角都相同 */
            /* border-radius: 50%; */

            /* 4 个值，按照顺时针从左上角开始，没有赋值的看对角 */
            border-radius: 10px 20px 30px 40px;
        }
    </style>
</head>

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

</html>

2.4 overflow 溢出部分显示效果

溢出部分：指的是盒子 内容部分 超出盒子范围的区域。
场景：控制内容溢出部分的显示效果，如：显示、隐藏、滚动条……
属性名：overflow 。
常见属性值： | 属性值 | 说明 | | —- | —- | | visible | 默认值，溢出部分可见 | | hidden | 溢出部分隐藏 | | scroll | 无论是否溢出，都显示滚动条 | | auto | 根据是否溢出，自动显示或隐藏滚动条 |

示例：

<!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>
        .box {
            width: 400px;
            height: 200px;
            background-color: pink;
            /* 溢出部分显示效果 */
            /* 
                | visible | 默认值，溢出部分可见               |
                | hidden  | 溢出部分隐藏                       |
                | scroll  | 无论是否溢出，都显示滚动条         |
                | auto    | 根据是否溢出，自动显示或隐藏滚动条 |
            */
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div class="box">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti alias, veritatis natus
        repudiandae cumque ullam eius enim quos? Incidunt debitis ratione dolorum nemo. Doloremque consectetur
        reiciendis harum laborum quas! Veniam?
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore dicta debitis reprehenderit nisi, nesciunt ut
        illum nobis sunt illo doloribus recusandae obcaecati blanditiis odio ea! Atque itaque soluta vitae in?
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi animi numquam quasi aspernatur asperiores quod
        atque, explicabo vero aut distinctio. Sunt, illum nesciunt fugiat hic libero blanditiis atque ducimus corrupti!
    </div>
</body>

</html>

2.5 元素本身隐藏

场景：让某些元素本身在屏幕中不可见。
常见属性：
- visibility：hidden; 隐藏元素本身，并且在网页中 占位置 。
- display：none; 隐藏元素本身，并且在网页中 不占位置 。

注意:

① 实际开发的时候经常会使用 display：none; 完成元素的显示隐藏切换。
② display：none; 表示隐藏，display：block; 表示显示。

示例：

<!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>
        .father {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .father:hover .son {
            display: block;
        }

        .son {
            display: none;

            width: 100px;
            height: 100px;
            background-color: green;

        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>

Java学科

CSS 定位和装饰

第一章：定位

1.1 定位的基本介绍

1.1.1 网页常见布局方式

1.1.2 定位的常见应用场景

1.2 定位的基本使用

1.3 静态定位（了解）

1.4 相对定位

1.5 绝对定位

1.6 子绝父相

1.7 固定定位

1.8 元素的层级关系

1.8.1 元素层级问题

1.8.2 更改定位元素的层级

第二章：装饰

2.1 垂直对齐方式

2.2.1 认识基线（了解）

1.2.2 文字对齐问题

1.2.3 垂直对齐方式

1.2.4 项目中 `vertical-align` 可以解决的问题

2.2 光标类型

2.3 边框圆角

2.4 overflow 溢出部分显示效果

2.5 元素本身隐藏

CSS 定位和装饰

第一章：定位

1.1 定位的基本介绍

1.1.1 网页常见布局方式

1.1.2 定位的常见应用场景

1.2 定位的基本使用

1.3 静态定位（了解）

1.4 相对定位

1.5 绝对定位

1.6 子绝父相

1.7 固定定位

1.8 元素的层级关系

1.8.1 元素层级问题

1.8.2 更改定位元素的层级

第二章：装饰

2.1 垂直对齐方式

2.2.1 认识基线（了解）

1.2.2 文字对齐问题

1.2.3 垂直对齐方式

1.2.4 项目中 vertical-align 可以解决的问题

2.2 光标类型

2.3 边框圆角

2.4 overflow 溢出部分显示效果

2.5 元素本身隐藏

1.2.4 项目中 `vertical-align` 可以解决的问题