前端css溢出属性overflow

叶不休

于 2024-08-23 22:23:55 发布

阅读量155

点赞数 6

分类专栏：前端文章标签：前端 css html5 chrome css3 firefox 前端框架

本文链接：https://blog.csdn.net/weixin_58694594/article/details/132997687

版权

前端专栏收录该内容

60 篇文章 1 订阅

订阅专栏

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>