布局

目录

1.浮动布局
2.定位布局
3.过渡动画

浮动布局

what|why: 让块级(block)标签在父级的宽度限制下同行显示, 一行显示不下, 自动换行
注: 要到达一行显示个数固定, 一定要固定父级的宽度
​
语法: 
子级 {
    float: left|right;
}
​
问题: 子级不再撑开父级高度 (不完全脱离文档流)
脱离文档流: => 层次结构会上移, 覆盖有位置重叠且没脱离文档流的标签
不完全: 浮动布局后, 可以重新让子级撑开父级高度
​
清浮动: 让不完全脱离文档流的子级重新撑开父级的高度, 这种做法就叫做清浮动
​
语法:
父级:after {
    content: "";
    dislpay: 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>
View Code
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>浮动案例</title>
    <link rel="stylesheet" href="css/reset.css">
    <style>
        .ul1 {
            width: 825px;
            margin: 0 auto;
            background-color: black;
        }
        .ul1 li {
            width: 200px;
            height: 120px;
            background-color: red;
            margin-right: 15px;
            float: left;
        }
        .ul1 li:first-child {
            width: 180px;
        }
        .ul1 li:last-child {
            margin-right: 0;
        }
​
        .ul1:after {
            content: "";
            display: block;
            clear: both;
        }
    </style>
    <style>
        .box1 {
            background-color: pink;
            /*line-height: 50px;*/
            padding: 10px 0;
        }
        .box1:after {
            content: "";
            display: block;
            clear: both;
        }
        .box1 h3 {
            float: left;
        }
        .box1 ul {
            float: right;
        }
        /*浮动的盒子宽度不再获取父级宽度, 由内容撑开*/
        .box1 li {
            float: left;
            margin-left: 20px;
        }
        .box1 ul:after {
            content: "";
            display: block;
            clear: both;
        }
        .box1 li:hover {
            color: #ff6700;
            cursor: pointer;
            border-bottom: 2px solid #ff6700;
        }
    </style>
</head>
<body>
<ul class="ul1">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
​
<div class="box1">
    <h3>家电</h3>
    <ul>
        <li>电视影</li>
        <li>电视影音</li>
        <li>电视</li>
        <li>电视影音</li>
    </ul>
</div>
​
​
<style>
    .box2 {
        width: 840px;
        margin: auto;
    }
    .box2:after {
        content: "";
        display: block;
        clear: both;
    }
    .left {
        width: 200px;
        height: 410px;
        margin-right: 10px;
        background-color: red;
        float: left;
    }
    .right {
        width: 630px;
        /*height: 410px;*/
        /*margin-right: 10px;*/
        background-color: red;
        float: left;
    }
​
    .right:after {
        content: "";
        display: block;
        clear: both;
    }
    .right li {
        width: 150px;
        height: 200px;
        margin: 0 10px 10px 0;
        background-color: orange;
        float: left;
    }
    .right li:nth-child(4n) {
        margin-right: 0;
    }
​
    .right li div {
        /*width: 150px;*/
        height: 95px;
        background-color: brown;
        margin-bottom: 10px;
    }
​
    li.no {
        margin-bottom: 0;
    }
</style>
<!--840px x 410px-->
<div class="box2">
    <!--200px x 410px-->
    <div class="left"></div>
    <!--630px x 410px-->
    <ul class="right">
        <!--150px x 200px 间距 10px-->
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li class="no"></li>
        <li class="no"></li>
        <li class="no"></li>
        <li class="no">
            <!--150px x 95px-->
            <div></div>
            <div></div>
        </li>
    </ul>
</div>
​
</body>
</html>
View Code

定位布局

  • 固定定位

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>
View Code

  • 绝对定位

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 {
            /*父级一般情况下只是为了给子级绝对定位提供参考系
            子级绝对定位下,必须要求参考系拥有定位
            父级可以选取fixed|absolute定位,就会成为子级的参考系,
            但是父级自身的布局就会因为fixed|absolute完全脱离文档流的特性,影响自身的布局
​
            如何达到: 父级又能定位(为子级做参考), 又不脱离文档流(自身布局不收影响)
​
            解决方案: 父级采用 相对定位
            */
            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>
View Code

  • 相对定位(了解)

what|why: 核心用处 => 父相子绝
​
语法: 
position: relative;
​
相对定位总结:
1.参考系为自身原有位置
2.一旦设置定位属性, top | bottom | left | right 四个方位(是定位属性盒子特有的)均可以参与布局
3.top = -bottom | left = -right (上下取上, 左右取左)
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>
View Code

过渡动画

/*持续时间*/
/*transition-duration: 3s;*/

/*延迟时间: 0*/
/*transition-delay: 1s;*/

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

/*过渡曲线: ease*/
/*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;
<!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>
View Code

 

posted @ 2019-01-18 19:35  zhao_peng  阅读(179)  评论(0)  编辑  收藏  举报