垂直方向布局 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>垂直方向布局</title>
        <style type="text/css">
            /* 
                垂直方向布局
                    如果不为父元素指定高度，则父元素会自动适应子元素的高度，确保能容纳所有子元素
                    如果为父元素指定了高度，则指定多少就是多少，此时如果子元素的大小超过了父元素，则会
                        导致子元素从父元素中溢出，溢出的子元素不会影响到页面的布局
                        
                    使用overflow设置溢出内容的的处理方式
                        可选值
                            visible默认值，溢出的内容不会被裁剪直接在父元素的外部显示
                            hidden溢出的内容会被裁剪，超出父元素的不会显示
                            scroll生成滚动条，可以通过滚动条查看完整内容
                            auto根据需要生成滚动条
             */
            .box{
                width: 100px;
                height: 200px;
                border: 2px solid red;
                overflow: auto;
            }
            
            .box1{
                /* width: 100px; */
                width: 50px;
                height: 300px;
                border: 2px yellow solid;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="box1"></div>
        </div>
    </body>
</html>

 

posted @ 2022-05-09 15:01  氯丙嗪  阅读(24)  评论(0)    收藏  举报