个人笔记2020 6-1

overflow属性

overflow属性用来指定对盒中容纳不下的内容的显示办法

1.hidden值:超出容纳范围的文字将被隐藏
用法如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>溢出</title>
    <style>
        div{
            width:100px;
            height:100px;
            background-color:green;
            overflow:hidden;
        }
    </style>
</head>
<body>
    <div>溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出</div>

</body>
</html>

效果如图:
个人笔记2020 6-1_第1张图片
2.scroll值:出现水平以及垂直滚动条
用法:将上述代码中hidden改成scroll
效果如图:
个人笔记2020 6-1_第2张图片
3.auto值:根据需要出现垂直滚动条或者水平滚动条
效果如图:
个人笔记2020 6-1_第3张图片
4.visible:和不使用overflow时一致
效果如图:
个人笔记2020 6-1_第4张图片

你可能感兴趣的:(个人笔记)