zoukankan html css js c++ java

web开发：定位布局

本文目录：

一、盒子的显隐

二、小米topbar

一、盒子的显隐

1.同一结构下, 如果采用浮动布局,所有的同级别兄弟标签都要采用浮动布局
2.浮动布局的盒子宽度在没有设定时会自适应内容宽度

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

二、小米topbar

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

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>topbar</title>
    <style type="text/css">
        html, body {
            margin: 0;
        }
        a {
            color: black;
            text-decoration: none;
        }
        .topbar {
            /*height: 40px;*/
            background-color: #333;
        }
        .container {
            width: 1226px;
            margin: 0 auto;
            /*height: 40px;*/
            /*overflow: hidden;*/
        }
        .container:after {
            content: "";
            display: block;
            clear: both;
        }
        /*对父级设置字体相关属性, 子级的inline类型标签会继承字体相关属性*/
        .topbar-nav, .topbar-info {
            font-size: 12px;
            /*background: orange;*/
            /*line-height: 40px;*/
            float: left;
        }
        .topbar-nav a, .topbar-info a {
            color: #b0b0b0;
            line-height: 40px;
            display: inline-block;
        }
        .topbar-nav span, .topbar-info span {
            /*padding: 0 3px;*/
            margin: 0 3px;
            color: #424242;
        }

        .topbar-car {
            float: right;
            width: 120px;
            height: 40px;
            background: pink;
        }
        .topbar-info {
            float: right;
            /*height: 40px;*/
            line-height: 40px;
            /*background: blue;*/
            margin-right: 20px;
        }
    </style>
    <style type="text/css">
        .topbar-download {
            position: relative;
            /*z-index: 1;*/
        }
        .topbar-app {
            position: absolute;
            width: 100px;
            height: 120px;
            background: pink;
            left: -25px;
            top: 40px;
            /*z-index: 666;*/
            display: none;
        }
        .topbar-download:hover .topbar-app {
            display: block;
        }
    </style>
</head>
<body>
    <div class="topbar">
        <div class="container">
            <div class="topbar-nav">
                <a href="">小米商城</a>
                <span>|</span>
                <a href="">MIUI</a>
                <span>|</span>
                <a class="topbar-download" href="">
                    下载app
                    <div class="topbar-app"></div>
                </a>
                <span>|</span>
                <a href="">Select Region</a>
            </div>
            <div class="topbar-car"></div>
            <div class="topbar-info">
                <a href="">登录</a>
                <span>|</span>
                <a href="">注册</a>
                <span>|</span>
                <a href="">消息通知</a>
            </div>
        </div>
    </div>
</body>
</html>

三、相对定位

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

参考系: 自身原有位置
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>

四、决定定位

参考系: 最近的定位父级
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>

五、固定定位

参考系: 页面窗口
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>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
</body>
</html>

六、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>

七、流式布局思想

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

八、hover父子悬浮

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

查看全文

相关阅读:
二、魔法函数
 Metaclasses
一、python中的一切皆对象
 三、鸭子类型
 SQL进行排序、分组、统计的10个新技巧
 输入地址栏可以编辑页面的js
项目开发中常用JS表单取值方法
 [导入]通用的分页存储过程
 107个常用Javascript语句
 [导入]事务处理

原文地址：https://www.cnblogs.com/wuzhengzheng/p/10273532.html