垂直布局

垂直方向没有等式，比较简单，父元素多少就是多少

如果父元素不设置高度，则高度被子元素内容撑开

 

如果父元素Height已经设置了高度，子元素高度超过了父元素的高度，那么将会吐出来，溢出

可以使用overflow（在父元素中设置）

overflow: visible;   默认值，溢出显示
overflow: hidden;　　溢出的内容会裁剪，隐藏
overflow:scroll;　　生成滚动条
overflow:auto;　　 按照需要生成滚动条
<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer {
            background-color: chocolate;
            height: 100px;
            overflow: auto;
            overflow-y: ;
            overflow-x: ;

        }

        .inner {
            width: 200px;
            /*width的值默认为auto */
            height: 200px;
            background-color: chartreuse;
            margin-bottom: 100px;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner"></div>
    </div>

</body>

</html>

 

 
 
posted @ 2021-02-15 01:29  俗气小博  阅读(60)  评论(0)    收藏  举报