zoukankan      html  css  js  c++  java

  • 前端学习第59天盒子的显隐、定位布局（了解z-index属性）、流式布局思想、hove父子悬浮

    一、盒子的显隐

    display: none;
    在页面中不占位, 采用定位布局后, 显示隐藏都不会影响其他标签布局, 不需要用动画处理时

    opacity: 0;
    在页面中占位, 采用定位布局后, 显示隐藏都不会影响其他标签布局, 需要采用动画处理时

    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>盒子的显隐</title>
    <style type="text/css">
        .box, .wrap {
            width: 200px;
            height: 200px;
            background: red;
        }
        .wrap {
            background: orange;
        }
        
        /*display: none; 通过控制盒子的显示方式来隐藏盒子*/
        /*该隐藏方式在页面中不占位*/
        .box {
            display: none;
        }
        /*opacity: 0; 通过控制盒子的透明度来隐藏盒子*/
        /*该隐藏方式在页面中占位*/
        .box {
            /*opacity: 0*/
        }
        /*注: 一般显隐操作的盒子都是采用定位布局*/
        
        /*悬浮父级显示子级*/
        body:hover .box {
            display: block;
        }


        /*将盒子藏到屏幕外: 不能通过盒模型布局, 也不建议通过浮动布局, 可以采用定位布局*/
        .box {
            /*margin-top: -208px*/
        }

    </style>
</head>
<body>
    <div class="box"></div>
    <div class="wrap"></div>
</body>
</html>

    二、定位布局（重点*****）

    1、什么是定位布局:

    可以通过上下左右四个方位完成自身布局的布局方式

    2、相对定位

    参考系: 自身原有位置
    position: relative; => 打开了四个定位方位
    1.top|bottom|left|right都可以完成自身布局, 上下取上,左右取左
    2.left = -right | top = -bottom
    3.布局后不影响自身原有位置
    4.不脱离文档流

    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>相对定位布局</title>
    <style type="text/css">
        /*定位布局的导入*/
        /*需求: */
        /*1.子级在父级的右下角显示*/
        /*2.子级完成布局后,父级做content后,子级不需要重新布局*/
        .sup {
            width: 300px;
            height: 300px;
            background: pink;
            border: 10px solid black;
        }
        .sub {
            width: 50px;
            height: 50px;
            background: red;
            margin-left: auto;
            margin-top: 150px;
        }
        /*能不能有一种定位, 让盒子可以通过上下左右四个方位均操作自身布局 => 定位布局*/
        /*什么是定位布局: 可以通过上下左右四个方位完成自身布局的布局方式*/

        .sup {
            display: none;
        }
    </style>

    <style type="text/css">
        /*相对定位布局*/
        .box {
            width: 200px;
            height: 200px;
            background: pink;
        }
        .b2 { background: orange }
        .b1 {
            /*1.设置定位属性，就会打开定位方位*/
            position: relative;
            /*2.通过定位方位完成布局*/
            top: 300px;
            left: 300px;
            /*bottom: 100px;*/
            /*right: 100px;*/
            /*margin-top: 200px;*/
            /*结论*/
            /*1.左右取左,上下取上(eg:left与right共存是,left生效)*/
            /*2.left=-right, top=-bottom*/
            /*3.参考系: 自身原有位置(不是某一个点,eg: right参考的就是原有位置的右边界)*/
            /*4.自身布局后不会影响自身原有位置*/
            /*5.不脱离文档流(脱离文档流: 不再撑开父级高度)*/
        }

    </style>
</head>
<body>

    <div class="box b1">1</div>
    <div class="box b2"></div>



    <div class="sup">
        <div class="sub"></div>
    </div>

</body>
</html>

    3、绝对定位

    参考系: 最近的定位父级
    position: absolute; => 打开了四个定位方位
    1.top|bottom|left|right都可以完成自身布局, 上下取上,左右取左
    2.父级必须自己设置宽高
    3.完全离文档流

    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>绝对定位布局</title>
    <style type="text/css">

        .box {
            width: 200px;
            height: 300px;
            background: orange;
        }

        .sup {
            width: 200px;
            height: 200px;
            background: pink;
            /*position: absolute;*/
        }
        
        .sub {
            width: 50px;
            height: 50px;
            background: red;
            /*1.开的定位*/
            position: absolute;
            /*2.采用定位方位完成布局*/
            right: 0;
            bottom: 0;
        }
        body {
            position: relative;
        }
        /*注: 一般父级采用的是相对定位布局, 一般情况下,父级不需要脱离文档流*/
        /*如果父级需要脱离文档流,用绝对定位父级完成布局,完全可以,不会影响子级相对于自身的布局,但是自身
              又要需要一个在文档流中的(不脱离文档流中的)定位参考父级 => 父相子绝    */
        /*相对定位的应用场景大部分都是辅助于子级的绝对定位*/
        .sup {
            position: relative;
        }
        .sub {
            /*left: 0;*/
            right: 0;
        }
    </style>
</head>
<body>
    <!-- 绝对定位布局一定存在父子关系 -->
    <!-- 导入定位布局时,父级设置宽高没?(设置了) 子级呢?(也设置了) => 父级的高度不再依赖于子级 =>
        子级脱离文档流 -->
    <!-- 参考系: 最近的定位父级 -->
    <div class="sup">
        <div class="sub"></div>
    </div>
    <!-- <div class="box"></div> -->
    <!-- 
    1.top|bottom|left|right都可以完成自身布局, 上下取上,左右取左
    2.父级必须自己设置宽高
    3.完全离文档流
     -->
</body>
</html>

    4、固定定位

    参考系: 页面窗口
    position: fixed; => 打开了四个定位方位
    1.top|bottom|left|right都可以完成自身布局, 上下取上,左右取左
    2.相对于页面窗口是静止的
    3.完全脱离文档流

    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>固定定位</title>
    <style type="text/css">
        /*参考系: 页面窗口*/
        /*1.top|bottom|left|right都可以完成自身布局, 上下取上,左右取左*/
        /*2.相对于页面窗口是静止的*/
        /*3.完全脱离文档流*/
        .box {
            width: 200px;
            height: 300px;
            background: orange;
        }
        .box {
            position: fixed;
            top: 200px;
            right: 50px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
</body>
</html>

    5、z-index属性

    修改显示层级(在发生重叠时使用), 值取正整数, 值不需要排序随意规定, 值大的显示层级高

    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>z-index</title>
    <style type="text/css">
        .wrap {
            width: 200px;
            height: 200px;
            background: pink;
            /*父级做相对定位处理,并不是自己需要用定位完成布局,最主要的原因是辅助于子级完成绝对定位布局*/
            position: relative;
        }
        .box {
            width: 75px;
            height: 75px;
            font: normal 30px/75px "STSong";
            text-align: center;
            background: cyan;
            /*绝对定位需要大家脱离文档流,相互不会影响布局,每个都是独立相对于父级进行布局的个体*/
            position: absolute;
            /*top: 0;*/
            /*bottom: 0;*/
            /*left: 0;*/
        }
        .b1 {
            left: 0;
            top: 0;    
            background: red;
        }
        .b2 {
            right: 0;
            top: 0;
            background: yellow;
        }
        .b3 {
            /*虽然子级脱离了文档流,但是父子关系以及存在,子级获取100%,得到的还是父级对应的值*/
            left: calc((100% - 75px) / 2);
            top: calc((100% - 75px) / 2);;    
            background: green;
            /*z-index改变显示层级, 显示层级的值为正整数, 值越大,显示层级越高*/
            z-index: 1;
        }
        .b4 {
            left: 0;
            bottom: 0;
            background: blue;
            /*z-index: 88889;*/
        }
        .b5 {
            right: 0;
            bottom: 0;    
            background: white;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="box b1">1</div>
        <div class="box b2">2</div>
        <div class="box b3">3</div>
        <div class="box b4">4</div>
        <div class="box b5">5</div>
    </div>`
</body>
</html>

    三、流式布局思想

    1. 百分比
    2. vw | vh => max-width(height) | min-width(height)
    3. em | rem

    !DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>流式布局思想</title>
    <style type="text/css">
        html, body {
            margin: 0;
            width: 100%;
            /*辅助body内部的子级有height流式布局的基础*/
            height: 100%;
        }
        /*流式布局思想: 尽可能不去使用固定属性值*/
        /*通过父级来获取相应的属性值*/
        .b1 {
            width: 100%;
            height: 100%;
            background: red;
        }
        .b2 {
            /*view-width view-height*/
            width: 80vw;
            height: 80vh;
            background: orange;
            /*流式布局限制条件: 流式布局下宽度最大只能放大到800px,最小只能缩小到600px*/
            max-width: 800px;
            min-width: 600px;
        }
        
        html {
            font-size: 200px;
        }
        body {
            font-size: 100px;
        }
        span {
            /*设置自身字体时 em = ?px 父级字体的大小*/
            font-size: 2em;

            display: block;
            /*宽高em在自身设置字体大小后,值又会更改为相应大小*/
            /*eg: body: 100px => 设置自身字体时em=100px, */
            /*自身设置字体大小为2em,自身字体大小为200px => width=2em的em=200px*/
            /*结果自身宽度是400pk*/
            
            /*自身非设置字体时使用em单位,em值取自身字体大小*/
            width: 2em;

            /*rem = html字体的大小*/
            height: 2rem;
            background: red;
        }
    </style>
    <style type="text/css">
        .sup {
            width: 200px;
            height: 200px;
            padding: 50px;
            background: red;
        }
        .sub {
            /*父级的content是提供给子级盒子利用的*/
            margin: 0 5px;
            border: 5px solid black;
            padding: 5px;
            /*auto <= 100%*/
            width: auto;
            /* 100%;*/
            height: 50px;
            background: orange;
        }
    </style>
</head>
<body>
    <!-- <div class="b1"></div> -->

    <!-- <div class="b2"></div> -->

    <!-- <span>好的</span> -->

    <div class="sup">
        <div class="sub"></div>
    </div>
</body>
</html>

    四、hove父子悬浮

    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .sup {
            width: 120px;
            height: 40px;
            background: pink;
            position: relative;
        }
        .sub {
            width: 120px;
            height: 100px;
            background: black;
            position: absolute;
            left: 0;
            top: 40px;
            display: none;
        }
        .sup:hover .sub {
            display: block;
        }
    </style>
</head>
<body>
    <div class="sup">
        <div class="sub"></div>
    </div>
</body>
</html>
  • 相关阅读:
    vue列表排序实现中的this问题
    JavaScript：JSON 和 JS 对象
    vue项目设置每个页面的title
    webpack开发和生产两个环境的配置详解
    关于vuex的理解
    vue的路由配置
    js 的静态获取和动态获取
    7 Dockerfile指令详解 && VOLUME 指令
    HAProxy负载均衡保持客户端和服务器Session亲缘性的3种方式
    haproxy开启日志功能
  • 原文地址：https://www.cnblogs.com/ye-hui/p/10104387.html
Copyright © 2011-2022 走看看