浮动布局、定位布局以及过渡动画

一：浮动布局

what | why：让块级（block）标签在父级的宽度限制下同行显示，一行显示不下，自动换行

注：要到达一行显示个数固定，一定要固定父级的宽度

语法：
子级 {
float ：left | right
}

问题：子级不再撑开父级高度（不完全脱离文档流）
脱离文档流：=>层次结构会上移，覆盖有位置重叠且没脱离文档流的标签
不完全：浮动布局后，可以重新让子级撑开父级的高度

清浮动：让不完全脱离文档流的子级重新撑开父级的高度，这种做法就叫清浮动

语法：
父级：after{
  content:"";
  display:block;  
  clear:both;      
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>浮动布局</title>
    <link rel="stylesheet" href="css/reset.css">
    <style>
        .div {
            width: 200px;
            height: 200px;
            background-color: yellow;
            margin-right: 10px;
            float: right;
        }
    </style>
    <style>
        .ul1 {
            background-color: pink;
            width: 600px;
            margin: 0 auto;
        }
        .ul1 li {
            width: 200px;
            height: 60px;
        }
        .ul1 li:nth-child(2n) {
            background-color: orange;
        }
        .ul1 li:nth-child(2n - 1) {
            background-color: red;
        }

        /*谁们需要同行排列, 谁们就用浮动布局处理*/
        .ul1 li {
            float: left;
            /*float: right;*/
        }
        /*谁的高度没有被浮动子级撑开, 谁来清浮动*/
        .ul1:after {
            content: "";
            display: block;
            clear: both;
        }


        .bro {
            width: 50px;
            height: 50px;
            background-color: black;
        }
    </style>
</head>
<body>

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

<ul class="ul1">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
<div class="bro"></div>


<!--了解-->
<!--:after | :before 伪类 -> 内容-->
<style>
    .box:after {
        /*display: block;*/
        content: "000";
    }
    .box:before {
        /*display: block;*/
        content: "***";
    }
</style>
<div class="box">123</div>
</body>
</html>

浮动布局

二：定位布局

　　2.1固定定位（小广告）

what | why：盒子相对于屏幕完成位置布局，不会随着屏幕内容的滚动而滚动（相对于屏幕窗口是静止的），且和页面内容发生重叠时，该布局下的内容显示层次更高（覆盖其他内容）

语法：
position：fixed;

固定定位总结：
1.参考系为页面窗口
2.一旦设置定位属性，top | bottom | left | right 四个方位（是定位属性盒子特有的）均可以参与布局
3.上下同时出现取上，同理左右取左
4.固定定位会完全脱离文档流（永远不会撑开父级高度 =>布局中父级一旦要自己设置高度）
5.完全脱离文档流的盒子显示层次高于不脱离文档流的盒子，两个完全脱离文档流盒子的显示层次可以z-index属性（脱离文档流盒子特有的）改变显示层次的属性（值大者覆盖值小者）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>固定定位</title>
    <!--<link rel="stylesheet" href="css/reset.css">-->
    <style>
        .info {
            width: 120px;
            height: 220px;
            background-color: orange;
            /*info采用固定定位*/
            position: fixed;
            /*当盒子开的了定位属性,
            该盒子及㐀通过 top | bottom | left | right 四个方位完成布局*/
            top: 0;
            left: 0;
            z-index: 10;
        }

        .sup {
            width: 200px;
            height: 200px;
            background-color: pink;
            /*没有脱离文档流的盒子添加z-index属性无用*/
            z-index: 1000;
        }
        /*无用*/
        /*.sup:after {*/
            /*content: "";*/
            /*display: block;*/
            /*clear: both;*/
        /*}*/
        .sub {
            width: 100px;
            height: 100px;
            background-color: black;
            position: fixed;

            left: 50px;
            right: 50px;
            bottom: 50px;
            top: 50px;

            z-index: 1;
        }
        
    </style>
</head>
<body>
    <div class="info"></div>
    <div class="sup">
        <div class="sub"></div>
    </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>

固定定位

　　2.2绝对定位

what | why：兄弟标签之间不相互影响，都参照父级的显示区域来完成布局语法：
position：absolute；

绝对定位总结：
1.参考系为最近的定位父级（父级一般采用相对定位relative来辅助自己绝对定位）
2.一旦设置定位属性，top | bottom | left | right 四个方位（是定位属性盒子特有的）均可以参与布局
3.上下同时出现取上，同理左右同时出现取左
4.绝对定位会完全脱离文档流（永远不会撑开父级高度 =>布局中父级一定要自己设置高度）
5.完全脱离文档流的盒子显示层次高于不脱离文档流的盒子，两个完全脱离文档流的盒子显示层次可以z-index属性（脱离文档流盒子特有的）改变显示层次的顺序（值大者覆盖值小者）

　　如何达到: 父级又能定位(为子级做参考), 又不脱离文档流(自身布局不受影响)

　　解决方案: 父级采用相对定位（父相子绝）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>绝对定位</title>
    <style>
        .sup {
            width: 300px;
            height: 300px;
            background-color: pink;
            margin: 0 auto;
        }
        .sub1 {
            width: 100px;
            height: 50px;
            background-color: green;
            position: absolute;
            z-index: 10;
            right: 0;
            bottom: 0;
            top: 0;
        }
        .sub2 {
            width: 50px;
            height: 100px;
            background-color: cyan;
            position: absolute;
            z-index: 11;
            left: 0;
            bottom: 0;
            top: 0;
        }

        .sup {
            position: relative;
        }

    </style>
</head>
<body>
<div class="sup">
    <div class="sub1"></div>
    <div class="sub2"></div>
</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>

绝对定位

　　2.3相对定位（了解）

what |why：核心用处 => 父相子绝

语法：
position：relative：

相对定位总结：
1.参考系为自身原有位置
2.一旦设置定位属性，top | bottom | left | right 四个方位（是定位属性盒子特有的）均可以参与布局
3.top = -bottom | left = -right（上下取上，左右取左）（也就是设置top的时候是想相对于原位置向下移动相应的像素，而设置bottom的时候是向上移动相应的像素点）
4.相对定位不脱离文档流 => 不会影响自身布局，自身布局采用的还是原来的布局
注：相对定位定位方位只会改变显示图层，不会改变盒子的原有位置，原有位置不变就不会影响兄弟盒子

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>相对定位</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            margin-left: 100px;
            margin-top: 200px;
        }
        .box {
            position: relative;
            top: 200px;
            /*bottom: -10px;*/
            /*bottom: 10px;*/
        }

        .bbb {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="bbb">123</div>
</body>
</html>

相对定位

三：过渡动画

持续时间：
transition-duration：0.5s;

延迟时间：
transition-delay：1s;

过渡属性：all | 属性1，...，属性n | eg：height，background-color
transition-property：all;

过渡曲线：ease
ease | ease-in | ease-in-out | linear
cubic-bezier(0.83, 1.46, 0, -1.29) ;   #贝塞尔曲线
transition-timing-function：cubic-bezier(0.83, 1.46, 0, -1.29);

简写：
持续时间 延迟时间  过渡时间们 运动的贝塞尔曲线
transition：2s 1s all cubic-bezier(0.83, 1.46, 0, -1.29)；

transition：.3s linear；   #linear是匀速
一般不加延迟时间，会给用户造成卡顿的感觉，用户体验不好。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>定位动画案例</title>

    <style>
        .wrap {
            width: 200px;
            height: 300px;
            background-color: #666666;
            margin: 0 auto;

            position: relative;
        }

        .box {
            width: 200px;
            /*height: 80px;*/
            height: 0;
            background-color: #ff6700;

            position: absolute;
            bottom: 0;
            left: 0;
        }

        .box {
            /*持续时间*/
            transition-duration: 3s;
            /*延迟时间*/
            /*transition-delay: 1s;*/

            /*过渡属性: 属性1, ..., 属性n | all  eg:height, background-color */
            /*transition-property: all;*/

            /*过渡曲线*/
            /*ease | ease-in | ease-out | ease-in-out | linear
            cubic-bezier(0.83, 1.46, 0, -1.29)*/
            /*transition-timing-function: cubic-bezier(0.83, 1.46, 0, -1.29);*/

            /*transition: 2s 1s all cubic-bezier(0.83, 1.46, 0, -1.29);*/

            transition: .3s linear;
        }

        .wrap:hover .box {
            height: 200px;
            background-color: red;
        }

        /*需求: 没有高度时, 将所有子级内容隐藏*/
        .box {
            /*超出自己范围的内容如何处理*/
            overflow: hidden;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="box">123</div>
</div>
</body>
</html>

定位动画案例

浮动布局、定位布局以及过渡动画

猜你喜欢