css溢出效果
溢出部分:指的是盒子内容部分所超出盒子范围的区域
场景:控制内容溢出部分的显示效果,如: 显示、隐藏、滚动条…
属性名: overflow
注意点:如果没有设置溢出效果,那么溢出的部分内容类似于不占位置,类似于脱标,不会影响到后面的布局,会覆盖到其上面。
常见属性值:
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 211px;
height: 211px;
background-color: pink;
/* 溢出隐藏,工作常用 */
overflow: hidden;
/* 滚动:无论内容是否超出都显示滚动条的位置 */
overflow: scroll;
/* auto:根据内容是否超出,判断是否显示滚动条 */
overflow: auto;
}
</style>
</head>
<body>
<div class="box">
我说div,测试溢出显示效果
我说div,测试溢出显示效果
我说div,测试溢出显示效果
我说div,测试溢出显示效果
我说div,测试溢出显示效果
我说div,测试溢出显示效果
我说div,测试溢出显示效果
我说div,测试溢出显示效果
我说div,测试溢出显示效果
我说div,测试溢出显示效果
我说div,测试溢出显示效果
我说div,测试溢出显示效果
我说div,测试溢出显示效果
我说div,测试溢出显示效果
</div>
</body>
</html>