前端css溢出属性overflow

news2024/9/24 21:24:03

overflow: visible;默认是显示溢出

overflow:hidden;溢出隐藏

overflow: scroll; 出现滚动条，就算内容不超过盒子都显示滚动条

overflow: auto;内容多了自动出现滚动条

overflow: inherit;继承父元素效果

<!DOCTYPE html>
<html lang="en">
<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>
        div{
            width: 200px;
            height: 200px;
            background-color: yellow;
            /* overflow: visible;默认是显示溢出 */
            /* overflow:hidden;溢出隐藏 */
            /* overflow: scroll; 出现滚动条，就算内容不超过盒子都显示滚动条*/
            /* overflow: auto;内容多了自动出现滚动条 */
            /* overflow: inherit;继承父元素效果 */
        }
        .box{
            overflow-x: auto;
            overflow-y: hidden;
            /* 单独对于每个轴进行隐藏 */
        }
    </style>
</head>
<body>
    <div>
        lorem ipsum dolor sit amet consectetur, adipisicing elit. Cum porro quod id, fuga placeat inventore atque. Molestiae sequi quidem quod laboriosam fugit, dolorem sit ad laborum iure incidunt libero dicta!lorem ipsum dolor sit amet consectetur, adipisicing elit. Cum porro quod id, fuga placeat inventore atque. Molestiae sequi quidem quod laboriosam fugit, dolorem sit ad laborum iure incidunt libero dicta!
    </div>
    <div class="box">
        <img src="/css/7.盒子模型/big.png" alt="">
    </div>
</body>
</html>