7.CSS定位装饰

一、定位

目标：能够说出定位的常见应用场景，并且能够说出不同定位方式的特点

1、网页常见布局方式

（1）标准流
a.块级元素独占一行 → 垂直布局
b.行内元素/行内块元素一行显示多个 → 水平布局
（2）浮动
a.可以让原本垂直布局的块级元素变成水平布局
（3）定位
a.可以让元素自由的摆放在网页的任意位置
b.一般用于盒子之间的层叠情况

2、定位的常见应用场景

可以解决盒子与盒子之间的层叠问题

• 定位之后的元素层级最高，可以层叠在其他盒子上面
可以让盒子始终固定在屏幕中的某个位置

3、使用定位的步骤

设置定位方式
➢ 属性名：position
➢ 常见属性值：

定位方式	属性值
静态定位	static
相对定位	relative
绝对定位	absolute
固定定位	fixed

设置偏移值
➢ 偏移值设置分为两个方向，水平和垂直方向各选一个使用即可
➢ 选取的原则一般是就近原则（离哪边近用哪个）

方向	属性名	属性值	含义
水平	left	数字+px	距离左边的距离
水平	right	数字+px	距离右边的距离
垂直	top	数字+px	距离上边的距离
垂直	bottom	数字+px	距离下边的距离

4、静态定位

（1）介绍：静态定位是默认值，就是之前认识的标准流。
（2）代码：position: static;
（3）注意点：

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

    <style>
        /* .css书写：1.定位/浮动/display；2、盒子模型；3、文字属性 */
        .box{
            /* 静态定位, 默认值，标准流*/
            position: static;
            left: 100px;
            top: 200px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>

运行结果：

运行结果：没有通过方位属性进行移动

5、相对定位

（1）介绍：自恋型定位，相对于自己之前的位置进行移动
（2）代码：position: relative;
（只写这个定位，但是不写偏移值就还是标准流的形式）
（如果left和right都有，以left为准
如果top和bottom都有，以top为准）
（3）特点：
<1>需要配合方位属性实现移动
<2>相对于自己原来位置进行移动
<3>在页面中占位置 → 没有脱标
(4)应用场景：

配合绝对定位组CP（子绝父相）
用于小范围的移动

    <style>
        /* .css书写：1.定位/浮动/display；2、盒子模型；3、文字属性 */
        .box{
            position: relative;
            left: 100px;
            top: 200px;
            /* 相对定位：
            1、占有原来的位置；
            2、仍然具有标签原来的显示模式特点
            3、改变位置参照自己原来的位置 */
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <div class="box">box</div>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
</body>

运行结果：

6、绝对定位

（1）介绍：拼爹型定位，相对于非静态定位的父元素进行定位移动
（2）代码：position: absolute;
（3）特点：
<1>需要配合方位属性实现移动
<2>默认相对于浏览器可视区域进行移动
<3>在页面中不占位置 → 已经脱标
（4）应用场景：

配合绝对定位组CP（子绝父相）
（5）注意
绝对定位相对于谁移动？
祖先元素中没有定位 → 默认相对于浏览器进行移动
祖先元素中有定位 → 相对于最近的有定位的祖先元素进行移
（绝对定位查找父级的方式：
就近定位的父级，
如果逐层查找不到这样的父级，就以浏览器窗口为参照进行定位）

<style>
        .father{
            position: relative;
            width: 400px;
            height: 400px;
            background-color: pink;
        }
        .son{
            /* 相对，绝对 */
            /* 父级相对定位；子级绝对定位--子绝父相 */
            /* position: relative; */
            /* position: absolute; */
            /* right: 100px; */
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }
        .sun{
            position: absolute;
            /* left: 20px;
            top: 30px; */
            right: 20px;
            bottom: 50px;
            height: 200px;
            width: 200px;
            background-color: green;
        }

        /* 绝对定位查找父级的方式：就近定位的父级，如果逐层查找不到这样的父级，就以浏览器窗口为参照进行定位 */

    </style>
</head>
<body>
    <div class="father">
        <div class="son">
            <div class="sun"></div>
        </div>
    </div>
</body>

运行结果：

7、子绝父相介绍

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

8、（拓展）子绝父绝特殊场景

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

9、（案例）卡片模块的hot图标定位案例

➢ 需求：根据设计图，通过PxCook量取数据，在 day05-作业-卡片模块案例基础上，定位hot图片完成一致的效果

index.html

                <li>
                    <a href="#"><img src="./images/course07.png" alt="">
                    <h3>Think PHP 5.0 博客系统实战项目演练</h3>
                    <p><span>高级</span>  •  1125人在学习</p>
                    <!-- 定位hot小图 -->
                    <img src="./images/hot.png" alt="" class="hot">
                    </a>
                </li>

index.css

/* 课程模块 hot 定位小图 */
.box .content li{
    position: relative;
}
.box .content li .hot{
    position: absolute;
    right: -4px;
    top: 4px;
}

10、（案例）子绝父相水平居中案例

➢ 需求：使用子绝父相，让子盒子在父盒子中水平居中（父子元素任意宽度下都能实现）

解决方法：

子绝父相
先让子盒子往右移动父盒子的一半
• left：50%
再让子盒子往左移动自己的一半
• 普通做法：margin-left：负的子盒子宽度的一半
缺点：子盒子宽度变化后需要重新改代码
• 优化做法：transform：translateX(-50%)
优点：表示沿着X轴负方向（往左）始终移动自己宽度的一半，子盒子宽度变化不需要更改代码
例子：

.box{
            /* 绝对定位的盒子不能使用左右margin auto 居中 */
            position: absolute;
            /* margin: 0 auto; */
            /* left: 50%; 整个盒子移动到浏览器中间偏右的位置 */
            left: 50%;
            /* 把盒子向左侧移动：自己宽度的一半 */
            margin-left: -150px;
            top: 50%;
            margin-top: -150px;
            width: 300px;
            height: 300px;
            background-color: pink;
        }

    <style>
        .box{
            /* 绝对定位的盒子不能使用左右margin auto 居中 */
            position: absolute;
            /* margin: 0 auto; */
            /* left: 50%; 整个盒子移动到浏览器中间偏右的位置 */
            left: 50%;
            /* 把盒子向左侧移动：自己宽度的一半 */
            top: 50%;
            /* 位移：自己宽度高度的一半 */
            transform: translate(-50%, -50%);
            /* transform: translateX(-50%); */
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>

11、（案例）导航二维码居中定位案例

➢ 需求：根据设计图，在 day06-作业-微金所导航案例基础上，定位二维码图片完成一致的效果

<!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>
    * {
      margin: 0;
      padding: 0;
    }

    /* 因为有通栏：占满一行的边框，所以需要有一个通栏：占满一行的盒子 */
    .nav {
      height: 40px;
      border-bottom: 1px solid #ccc;
    }

    /* 因为ul中所有的内容都是在网页的宽度固定并且水平居中的盒子内部，所以设置ul为宽度固定并且水平居中的效果（后面项目中所用到的版心） */
    ul {
      list-style: none;
      width: 1200px;
      margin: 0 auto;
    }

    ul li {
      float: left;
      width: 20%;
      height: 40px;
      border-right: 1px solid #ccc;
      /* 自动内减 */
      box-sizing: border-box;
      text-align: center;
      line-height: 40px;
    }

    ul .last {
     border-right: none;
    }

    ul li a {
      /* a标签默认是行内元素，宽高由内容撑开，并且无法设置宽高，此时默认情况用户只能点击文字区域才能调整 */
      /* 如果把a标签转换成块级元素，此时可以设置宽高，会让a标签范围更大，用户可以点击调整的区域也越大 */
      display: block;
      /* 宽度不设置块元素会默认占满一行 */
      height: 40px;
      text-decoration: none;
      color: #000;
    }
    ul li .app{
        position: relative;
    }
    .code{
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 42px;

    }
  </style>
</head>
<body>
  <!-- 导航 -->
  <div class="nav">
    <ul>
      <li><a href="#">我要投资</a></li>
      <li><a href="#">平台介绍</a></li>
      <li><a href="#">新手专区</a></li>
      <li><a href="#" class="app">手机微金所 <img src="../../rescours/day08/01-案例/images/code.jpg" alt="" class="code"></a></li>
      <li class="last"><a href="#">个人中心</a></li>
    </ul>
  </div>

</body>
</html>

12、（案例）底部半透明遮罩效果

➢ 需求：根据设计图，通过代码在网页中完成一致的效果

➢ 注意点：定位的元素会脱标（如：绝对定位），脱标后的元素宽高默认由内容撑开

<!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>
        .banner{
            position: relative;
            margin: 0 auto;
            width: 1226px;
            height: 600px;
        }
        .mask{
            position: absolute;
            left: 0;
            bottom: 0;
            /* 绝对定位的盒子显示模式具备行内块特点，如果没有宽度也没有内容，盒子的宽度尺寸就是0 */
            /* width: 1226px; */
            /* 如果子级和父级的宽度相同 */
            width: 100%;
            height: 150px;
            background-color: rgba(0, 0, 0, 0.5);
        }
    </style>
</head>
<body>
    <div class="banner">
        <img src="../../rescours/day08/01-案例/images/bg.jpg" alt="">
        <div class="mask"></div>
    </div>
</body>
</html>

13、固定定位

（1）介绍：死心眼型定位，相对于浏览器进行定位移动
（2）代码：position：fixed；
（2）特点：
<1>需要配合方位属性实现移动
<2>相对于浏览器可视区域进行移动
<3>在页面中不占位置 → 已经脱标
（3）应用场景：

<1>让盒子固定在屏幕中的某个位置

<style>
        /* .css书写：1.定位/浮动/display；2、盒子模型；3、文字属性 */
        .box{
            position: fixed;
            left: 0;
            top: 0;
            /* 
            1、脱标：不占位置
            2、改变位置参考浏览器窗口
            3、具备行内块的特点
            */
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>

14、元素层级问题

➢ 不同布局方式元素的层级关系：
• 标准流 < 浮动 < 定位
➢ 不同定位之间的层级关系：
• 相对、绝对、固定默认层级相同
• 此时HTML中写在下面的元素层级更高，会覆盖上面的元素

14.1更改定位元素的层级

➢ 场景：改变定位元素的层级
➢ 属性名：z-index
➢ 属性值：数字
➢代码：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;
        }
        .one{
            position: absolute;
            left: 20px;
            top: 50px;

            z-index: 1;

            background-color: pink;
        }
        .two{
            position: absolute;
            left: 50px;
            top: 100px;
            background-color: skyblue;
        }
        /* 
        默认情况下，定位的盒子 后来者居上
        z-index：整数；取值越大，显示顺序越靠上,z-index的默认值是0
        注意；z-index必须配合定位才生效
        */
    </style>
</head>
<body>
    <div class="one">one</div>
    <div class="two">two</div>
</body>
</html>

运行结果：

二、装饰

目标：能够完成元素的装饰效果

1、认识基线（了解）

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

2、文字对齐问题

➢ 场景：解决行内/行内块元素垂直对齐问题

➢ 问题：当图片和文字在一行中显示时，其实底部不是对齐的

➢浏览器把行内和行内块标签当作文字处理，默认基线对齐

有时候用display：block；也可以解决问题
如：当高度并没有设置，由内容撑开时，但是并不对齐

3、垂直对齐方式

➢ 属性名：vertical-align
➢ 属性值：

属性值	效果
baseline	默认，基线对齐
top	顶部对齐
middle	中部对齐
bottom	底部对齐

4、（拓展）项目中 vertical-align 可以解决的问题

文本框和表单按钮无法对齐问题
input和img无法对齐问题
div中的文本框，文本框无法贴顶问题
div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题
使用line-height让img标签垂直居中问题
➢ 注意点：
• 学习浮动之后，不推荐使用行内块元素让div一行中显示，因为可能会出现垂直对齐问题
• 推荐优先使用浮动完成效果

5、光标类型

➢ 场景：设置鼠标光标在元素上时显示的样式
➢ 属性名：cursor
➢ 常见属性值：

属性值	效果
default	默认值，通常是箭头
pointer	小手效果，提示用户可以点击
text	工字型，提示用户可以选择文字
move	十字光标，提示用户可以移动

    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
            /* 手型 */
            /* cursor: pointer; */
            /* 工字型，表示可以复制 */
            /* cursor: text; */
            /* 十字型，表示可以移动 */
            cursor: move;
        }
    </style>
</head>
<body>
    <div>div</div>
</body>

6、边框圆角

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

(4)原理：

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

<style>
        .box{
            margin: 50px auto;
            width: 200px;
            height: 200px;
            background-color: pink;
            
            /* 一个值：表示4个角是相同的 */
            /* border-radius: 10px; */
            
            /* 4值：左上 右上 右下 左下--从左上顺时针转一圈 */
            /* border-radius: 10px 20px 40px 80px; */
            
            /* border-radius: 10px 40px 80px; */
            
            border-radius: 10px 80px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>

7、边框圆角的常见应用

（1）画一个正圆：
<1>盒子必须是正方形
<2>设置边框圆角为盒子宽高的一半 → border-radius:50%（数值最大就是50%）
（2）胶囊按钮：
<1>盒子要求是长方形
<2>设置 → border-radius：盒子高度的一半

    <style>
        .one{
            width: 200px;
            height: 200px;
            background-color: pink;

            border-radius: 100px;
            /* 50%:取盒子尺寸的一半 */
            border-radius: 50%;
        }
        .two{
            width: 400px;
            height: 100px;
            background-color: skyblue;

            /* 胶囊状：长方形，border-radius 取值是高度的一半 */
            border-radius: 50px;
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
</body>

8、溢出部分显示效果

（1）溢出部分：指的是盒子 内容部分 所超出盒子范围的区域
（2）场景：控制内容溢出部分的显示效果，如：显示、隐藏、滚动条……
（3）属性名：overflow
（4）常见属性值：

属性值	效果
visible	默认值，溢出部分可见
hidden	溢出部分隐藏
scroll	无论是否溢出，都显示滚动条
auto	根据是否溢出，自动显示或隐藏滚动条

<style>
        .box{
            width: 300px;
            height: 300px;
            background-color: pink;
            
            /* 溢出 隐藏 */
            /* overflow: hidden; */
            
            /* 滚动：无论内容是否超出都显示滚动条 */
            /* overflow: scroll; */
            
            /* auto:  根据内容是否超出，判断是否显示滚动条 */
            overflow: auto;
        }
    </style>

运行结果：

9、元素本身隐藏

（1）场景：让某元素本身在屏幕中不可见。如：鼠标:hover之后元素隐藏
（2）常见属性：
<1>visibility：hidden
<2>display：none
（3）区别：
<1>visibility：hidden 隐藏元素本身，并且在网页中占位置
<2>display：none 隐藏元素本身，并且在网页中不占位置
(4)注意点：
• 开发中经常会通过 display属性完成元素的显示隐藏切换
• display：none；（隐藏）、 display：block；（显示）
隐藏的元素和hover必须是父子关系

    .code{
        display: none;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 42px;
    }
    /* 鼠标悬停a 显示二维码图片 */
    .nav li a:hover img {
        display: block;
    }
  </style>

10、（拓展）元素整体透明度

➢ 场景：让某元素整体（包括内容）一起变透明
➢ 属性名：opacity
➢ 属性值：0~1之间的数字
• 1：表示完全不透明
• 0：表示完全透明
➢ 注意点：
• opacity会让元素整体透明，包括里面的内容，如：文字、子元素等……

    <style>
        div{
            width: 400px;
            height: 400px;
            background-color: green;

            opacity: 0.5;
        }
    </style>
</head>
<body>
    <div>
        <img src="../../rescours/day08/01-案例/images/product.png" alt="">
        这个字透明吗
    </div>
</body>

运行结果：

11、（拓展）边框合并

➢ 场景：让相邻表格边框进行合并，得到细线边框效果

➢ 代码：border-collapse：collapse；

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 204,590评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 86,808评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,151评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,779评论 1赞 277
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,773评论 5赞 367
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,656评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,022评论 3赞 398
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,678评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 41,038评论 1赞 299
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,659评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,756评论 1赞 330
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,411评论 4赞 321
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,005评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,973评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,203评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,053评论 2赞 350
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,495评论 2赞 343

7.CSS定位装饰

一、定位

1、网页常见布局方式

2、定位的常见应用场景

3、使用定位的步骤

4、静态定位

5、相对定位

6、绝对定位

7、子绝父相介绍

8、（拓展） 子绝父绝特殊场景

9、（案例）卡片模块的hot图标定位案例

10、（案例）子绝父相水平居中案例

解决方法：

11、（案例）导航二维码居中定位案例

12、（案例）底部半透明遮罩效果

13、固定定位

14、元素层级问题

14.1更改定位元素的层级

二、装饰

1、认识基线（了解）

2、文字对齐问题

3、垂直对齐方式

4、（拓展）项目中 vertical-align 可以解决的问题

5、光标类型

6、边框圆角

7、边框圆角的常见应用

8、溢出部分显示效果

9、元素本身隐藏

10、（拓展）元素整体透明度

11、（拓展）边框合并

推荐阅读更多精彩内容

8、（拓展）子绝父绝特殊场景