2018.12.9浮动布局,盒子显隐,定位,z-index,流式布局,小米开头

一浮动布局的总结(昨天作业)

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

一.1代码演示

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>复习预习</title>
    <!-- 1.总结display -->

    <!-- 2.浮动 -->
    <!-- 让块级标签在父级可利用的宽度(width)中进行同行排列 -->
    <!-- 针对block-level box进行布局 -->
    <!-- float: left | right => BFC 左 | 右 => marging-left | margin-right -->
    <!-- 在浮动的基础上进行盒模型布局 -->

    <!-- 3.清浮动 -->
    <!-- 浮动后的标签不再撑开父级高度,让父级获得一个合适的高度 -->
    <style type="text/css">
        /* (.sup>.sub)+.brother */

        .sup {
            /*设置固定高度*/
            height: 200px;
        }
        .brother {
            clear: both;
        }
        .sup {
            overflow: hidden;
        }
        .sup:after {
            content: "";
            display: block;
            clear: both;
        }

    </style>
    
    
    <!-- 今日 -->
    <!-- 浮动布局的作业 -->
    <!-- 盒子的显隐控制 -->
    <!-- 定位布局 ***** -->
    <!-- 流式布局思想 -->
    
    <style type="text/css">
        /*对于浮动布局,需要设置父级的宽度吗?需要设置父级的高度吗?*/
        /*宽度: 一定需要, 因为父级宽度是子级浮动的显示范围*/
        /*高度: 不需要设置, 高度由清浮动来处理*/

        /*需要设置子级的宽度吗?高度呢?*/
        /*子级的宽高均需要自身设置*/

        .box1 {
             1000px;
            margin: 0 auto;

        }
        .box1:after {
            content: "";
            display: block;
            clear: both;
        }
        .box1 div {
             200px;
            height: 100px;
            font: 900 40px/100px "STSong";
            text-align: center;
            color: white;
            background: red;
            float: left; 
        }
        div.b6 {
             600px;
            background: yellow;
            float: left;
        }
        div.b7 {
             400px;
            height: 200px;
            background: yellowgreen;
            line-height: 200px;
            float: right;
        }
        div.b8 {
             300px;
            height: 150px;
            background: #ccc;
            float: left;
        }
        div.b9 {
             300px;
            height: 150px;
            background: black;
            float: left;
        }
        div.b10 {
             400px;
            height: 150px;
            background: cyan;
            float: right;
        }
        div.b11 {
             600px;
            height: 100px;
            background: red;
            float: right;
        }
        div.b12 {
             1000px;
            height: 100px;
            background: blue;
float: right;
    }
.box1 {
display: none;
    }
    </style>
    <style type="text/css">
.box2 {
 600px;
overflow: hidden;
margin: 0 auto;
    }
.r, .y, .b {
 200px;
float: left;
    }
.red, .blue {
height: 180px;
margin-bottom: 10px;
background: red
    }
.yellow {
height: 275px;
background: yellow;
margin-bottom: 10px;
    }
.blue {
background: blue;
    }
    </style>
</head>
<body>
    <!-- 作业2 -->
    <div class="box2">
    <div class="r">
    <div class="red"></div>
    <div class="red"></div>
    <div class="red"></div>
    </div>
    <div class="y">
    <div class="yellow"></div>
    <div class="yellow"></div>
    </div>
    <div class="b">
    <div class="blue"></div>
    <div class="blue"></div>
    <div class="blue"></div>
    </div>
    </div>


    <!-- 作业1 -->
    <div class="box1">
    <div class="b1">1</div>
    <div class="b2">2</div>
    <div class="b3">3</div>
    <div class="b4">4</div>
    <div class="b5">5</div>
    <div class="b6">6</div>
    <div class="b7">7</div>
    <div class="b8">8</div>
    <div class="b9">9</div>
    <div class="b10">10</div>
    <div class="b11">11</div>
    <div class="b12">12</div>
    </div>






    <!-- 浮动细节 -->
    <style type="text/css">
.box {
background-color: orange;
/*需要: box的宽度刚刚满足内容的显示宽度*/
float: left;
    }
.wrap { overflow: hidden; }
/*1. 一般有inline类型的子内容,父级想自适应子内容的宽度, 让父级浮动起来*/
/*2. 在一个结构中, 应该避免出现既有浮动又有非浮动的兄弟标签, 如果出现,要即将浮动的标签添加父级,并对添加的父级清浮动*/
/*注: 同一结构下,如果有标签浮动,那么该结构下所有兄弟标签均是浮动布局*/

.wrap {
display: none;
    }
    </style>
    <div class="wrap">
    <div class="box">
    <a href="">百度</a>
    <span>|</span>
    <a href="">新浪</a>
    </div>
    </div>
</body>
</html>

二盒子的显隐介绍


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

二.1代码演示


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>盒子的显隐</title>
    <style type="text/css">
        .box, .wrap {
             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>

父子悬浮
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .sup {
             120px;
            height: 40px;
            background: pink;
            position: relative;
        }
        .sub {
             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>

小米网页开头


<!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 {
             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;
             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;
             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: static | relative | absolute | fixed
布局方位：left | right | top | bottom

三.1相对定位


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

三.1.1相对定位代码演示


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

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

    <style type="text/css">
        /*相对定位布局*/
        .box {
             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>

三.2绝对定位

三.2.1绝对定位代码演示


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

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

        .sup {
             200px;
            height: 200px;
            background: pink;
            /*position: absolute;*/
        }
        
        .sub {
             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>

三.3固定定位


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

三.3.1固定定位代码演示


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>固定定位</title>
    <style type="text/css">
        /*参考系: 页面窗口*/
        /*1.top|bottom|left|right都可以完成自身布局, 上下取上,左右取左*/
        /*2.相对于页面窗口是静止的*/
        /*3.完全脱离文档流*/
        .box {
             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>
</body>
</html>

四z-inde(修改显示层级)


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

四.1代码演示


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>z-index</title>
    <style type="text/css">
        .wrap {
             200px;
            height: 200px;
            background: pink;
            /*父级做相对定位处理,并不是自己需要用定位完成布局,最主要的原因是辅助于子级完成绝对定位布局*/
            position: relative;
        }
        .box {
             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流式布局思想代码演示


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

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