发布日期：2021-05-04 01:05:47 浏览次数：33 分类：技术文章

本文共 860 字，大约阅读时间需要 2 分钟。

默认情况下父元素的高度被内容撑开

    
       
       
       Document        
           
    
     第一个inner
    
        
    
     第二个inner

在这里插入图片描述

再看下一个代码

    
       
       
       Document

在这里插入图片描述

与水平布局不同，子元素的高度如果大于父元素的高度，会溢出。所以我们需要用overflow属性来设置父元素如何处理子元素溢出。

visible

这个是overflow的默认值，会有上图的显示效果。

hidden

这个会将溢出内容裁剪掉

.box1{            width: 200px;            height: 200px;            border: 10px orange solid;            overflow:hidden        }

在这里插入图片描述

这个是生成两个滚动条，用来查看完整内容。

.box1{            width: 200px;            height: 200px;            border: 10px orange solid;            overflow:scroll        }

在这里插入图片描述

前面的scroll会在水平方向也生成滚动条，但实际上我们并不需要，所以可以用auto，它会根据需要生成滚动条。

.box1{            width: 200px;            height: 200px;            border: 10px orange solid;            overflow:auto        }

在这里插入图片描述

这是处理水平和垂直方向溢出的，不多解释。

转载地址：https://blog.csdn.net/weixin_45034895/article/details/116309865 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！

上一篇：前端学习笔记38-外边距的折叠

下一篇：前端学习笔记36-水平方向的布局

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！