web-7

目录
1 定位
2 装饰
3 选择器拓展

一、定位

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

定位的基本介绍
定位的基本使用
静态定位
相对定位
绝对定位
子绝父相
固定定位
元素的层级关系

1.1 网页常见布局方式

1. 标准流

1. 块级元素独占一行 → 垂直布局
1. 行内元素/行内块元素一行显示多个 → 水平布局

2. 浮动

1. 可以让原本垂直布局的块级元素变成水平布局

3. 定位

1. 可以让元素自由的摆放在网页的任意位置
1. 一般用于盒子之间的层叠情况

定位的基本介绍

小结
➢ 定位的常见应用场景是什么？

解决盒子与盒子之间的层叠问题 → 定位之后元素层级最高，可以层叠在其他盒子上
可以让盒子始终固定在屏幕中的某个位置

定位的基本使用

静态定位

小结:

静态定位能通过方位属性进行移动吗？
• 不能，静态定位的元素就是默认标准流的情况

<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>
        /* css书写: 1. 定位 / 浮动 / display ; 2. 盒子模型; 3. 文字属性 */
        .box {
            /* 静态定位, 默认值, 标准流 */
            position: static;
            left: 100px;
            top: 200px;

            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <div class="box">box</div>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
</body>

相对定位

绝对定位

<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>
        /* 如果left和right都有, 以left为准; top和bottom都有以top 为准 */
        /* css书写: 1. 定位 / 浮动 / display ; 2. 盒子模型; 3. 文字属性 */
        .box {
            position: relative;
            right: 200px;
            bottom: 400px;
            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>

5 绝对定位

绝对定位

<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>
        /* css书写: 1. 定位 / 浮动 / display ; 2. 盒子模型; 3. 文字属性 */
        .box {
            /* 绝对定位: 
                先找已经定位的父级, 如果有这样的父级就以这个父级为参照物进行定位;
                有父级, 但父级没有定位, 以浏览器窗口为参照为进行定位
            */

            position: absolute;
            /* left: 50px; */
            left: 0;
            top: 0;
            /* 
            1. 脱标, 不占位
            2. 改变标签的显示模式特点: 具体行内块特点(在一行共存, 宽高生效)
            */

            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>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
</body>

6 子绝父相
让子控件, 可以相对于父控件,设定位置

子绝父相

<head>
    <style>
        .father {
            /* 相对定位: relative*/
            position: relative;
            width: 400px;
            height: 400px;
            background-color: pink;
        }
        
        .son {
            /*  相对, 绝对 */
            /* 父级相对定位; 子级绝对定位 -- 子绝父相 */
            /* position: relative; */
            /* position: absolute; */
            /* right: 100px; */

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

        .sun {
            /* absolute: 绝对定位 */
            position: absolute; 
            /* left: 20px;
            top: 30px; */
            right: 20px;
            bottom: 50px;

            width: 200px;
            height: 200px;
            background-color: green;
        }

        /* 绝对定位查找父级的方式: 就近找定位的父级, 如果逐层查找不到这样的父级, 就以浏览器窗口为参照进行定位 */
    </style>
</head>
<body>
    <div class="father">
        <div class="son">
            <div class="sun"></div>
        </div>
    </div>
</body>

绝对定位居中

<head>
    <style>
        .box {
            /* 1. 绝对定位的盒子不能使用左右margin auto居中 */
            position: absolute;
            /* margin: 0 auto; */
            /* left: 50%, 整个盒子移动到浏览器中间偏右的位置 */
            left: 50%;
            /* 把盒子向左侧移动: 自己宽度的一半 */
            /* margin-left: -150px; */

            top: 50%;
            /* margin-top: -150px; */

            /* 位移: 自己宽度高度的一半 */
            transform: translate(-50%, -50%);
            width: 400px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>

7 固定定位

固定定位

<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>
        /* css书写: 1. 定位 / 浮动 / display ; 2. 盒子模型; 3. 文字属性 */
        .box {
            position: fixed;
            left: 0;
            top: 0;

            /* 
                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>
</body>

8 元素的层级关系

层级关系

<head>
    <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>

二: 装饰

目标：能够完成元素的装饰效果
学习路径：

垂直对齐方式
光标类型
边框圆角
overflow溢出部分显示效果
元素本身隐藏

1 垂直对齐方式

例子 0

<head>
  <style>
    /* 浏览器遇到行内和行内块标签当做文字处理, 默认文字是按基线对象 */
    input {
      height: 50px;
      /* 添加下面两句 */
      box-sizing: border-box;
      vertical-align: middle;
    }

  </style>
</head>
<body>
  <!-- 注意 一个input输入框 一个input按钮 -->
  <input type="text"><input type="button" value="搜索">
</body>

例子1 前

例子1 后

<head>
  <style>
   img {
// 添加前后
     vertical-align: middle;
   }
  </style>
</head>
<body>
  <img src="../images/1.jpg" alt=""><input type="text">
</body>

例子2 前

例子2 后

<head>
  <style>
    .father {
      width: 200px;
      height: 200px;
      background-color: pink;
    }

    input {
      /* vertical-align: middle; */
      vertical-align: top; // 添加前后
    }

  </style>
</head>
<body>
  <div class="father">
    <input type="text">
  </div>
</body>

例子3 前

例子3 后

<head>
  <style>
    .father {
      width: 400px;
      background-color: pink;
    }

    img {
      /* 浏览器把行内和行内块标签, 当做文字处理,默认基线对齐  下面两句任选其一即可*/
      /* vertical-align: middle; */
      display: block;
    }

  </style>
</head>
<body>
  <div class="father">
    <img src="../images/1.jpg" alt="">
  </div>
</body>

例子4 前

例子4 后

<head>
  <style>
    .father {
      width: 600px;
      height: 600px;
      background-color: pink;
      line-height: 600px;
      text-align: center;
    }

    img {
      /* 添加语句前后 */
      vertical-align: middle;
    }
  </style>
</head>
<body>
  <div class="father">
    <img src="../images/1.jpg" alt="">
  </div>
</body>

2 光标类型

// 放到div上面是个十字花
<head>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
/* 手型 /
/ cursor: pointer; /
/ 工字型, 表示可以复制 /
/ cursor: text; /
/ 十字型, 表示可以移动 */
cursor: move;
}
</style>
</head>
<body>
<div>div</div>
</body>

3 边框圆角

圆角例子 1

<head>
    <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>

圆角例子 2

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

            /* border-radius: 100px; */
            /* 50% : 取盒子尺寸的一半 */
            border-radius: 50%;
        }

        /* 胶囊状: 长方形, border-radius取值是高度的一半 */
        .two {
            width: 400px;
            height: 200px;
            background-color: skyblue;

            border-radius: 100px;
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
</body>

3 overflow溢出部分显示效果

默认状态

溢出隐藏

overflow: scroll / overflow: auto

<head>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: pink;

            /* 溢出隐藏 */
            /* overflow: hidden; */

            /* 滚动: 无论内容是否超出都显示滚动条的位置 */
            /* overflow: scroll; */

            /* auto: 根据内容是否超出, 判断是否显示滚动条 */
            /* overflow: auto; */
        }
    </style>
</head>
<body>
    <div class="box">我是div,测试溢出显示效果我是div,我是div,测试溢出显示效果我是div,我是div,测试溢出显示效果我是div,我是div,测试溢出显示效果我是div,我是div,测试溢出显示效果我是div,我是div,测试溢出显示效果我是div,我是div,测试溢出显示效果我是div,我是div,测试溢出显示效果我是div,我是div,测试溢出显示效果我是div,我是div,测试溢出显示效果我是div,我是div,测试溢出显示效果我是div,我是div,测试溢出显示效果我是div,我是div,测试溢出显示效果我是div,我是div,测试溢出显示效果我是div,我是div,测试溢出显示效果我是div,我是div,测试溢出显示效果我是div,我是div,测试溢出显示效果我是div,</div>
</body>

4 元素本身隐藏

不占位置隐藏

<head>
    <style>
        div {
            width: 200px;
            height: 200px;
        }

        .one {
            /* 占位隐藏 */
            /* visibility: hidden; */

            /* **** 不占位隐藏 */
            display: none;

            background-color: pink;
        }

        .two {
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="one">one</div>
    <div class="two">two</div>
</body>

三选择器拓展

1 链接伪类选择器

2 焦点伪类选择器

3 属性选择器

透明属性

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

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