【静态页面架构】CSS之显示与溢出

最新推荐文章于 2024-02-21 11:07:10 发布

weixin_34383618

最新推荐文章于 2024-02-21 11:07:10 发布

阅读量130

点赞数

文章标签：操作系统

原文链接：https://segmentfault.com/a/1190000016184518

版权

CSS架构

显示与溢出；

1.显示；

display属性；

以display设置隐藏效果和元素类型

<style>
        div {
            width: 200px;
            height: 200px;
        }
        #qq {
            background-color: blue;
        }
        #yy {
            background-color: red;
            /*
                display: none 设置当前元素为隐藏效果
                * 这种方式将元素设置为隐藏后，该元素不会再占有页面空间
                通过display属性将元素显示
                * block - 将元素设置为块级元素
                * inline - 将元素设置为内联元素
                * inline-block - 将元素设置为行内元素
             */
            display: inline-block;
        }
        #cc {
            background-color: yellow;
        }

    </style>

visibility属性；

以visibility设置，元素显示或隐藏和同时占据原有位置

<style>
        div{
            width: 200px;
            height: 200px;
        }
        #qq{
            background-color: blue;
        }
        #yy{
            background-color: red;
            visibility: visible;
            <!--设置属性元素可见-->
        }
        #cc{
            background-color: yellow;
        }
    </style>
</head>
<body>
<div id="qq"></div>
<div id="yy"></div>
<div id="cc"></div>
</body>

示意图；

2.溢出；

overflow属性;

以overflow设置溢出的内容，是否剪掉内容和显示滚动条


 <style>
        #qq{
            width: 200px;
            height: 200px;
            background-color: blue;
            overflow: hidden;
            /*hedden：将溢出的部分隐藏；隐藏的无法看到
                    scroll：以一个滚动条显示溢出内容；一直都有滚动条
                    auto：浏览器自行处理；
                    如果内容溢出；提供相应的滚动条
                    如果内容没有溢出；不做任何处理*/
        }
    </style>
<body>
<div id="qq">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur consequuntur ducimus enim eos error iusto maiores minima minus mollitia necessitatibus nisi obcaecati perferendis quaerat quibusdam suscipit, tempore ullam veritatis voluptatibus.</div>

</body>

示意图；

text-overflow属性；

以text-overflow设置为显示的溢出内容，可被剪切，以一个省略号表示

<style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            line-height: 35px;
            /*设置行高*/
            white-space: nowrap;
            /*强制将文本内容占一行*/
            overflow: hidden;
            /*overflow属性的值必须是hidden(表示超出部分隐藏)*/
            text-overflow: ellipsis;
            /*显示省略符号（...）来表示被切掉的文本*/
        }
    </style>
</head>
<body>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing  .</div>
</body>
</html>

示意图；

weixin_34383618

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【静态页面架构】CSS之显示与溢出

CSS架构显示与溢出；1.显示；display属性；以display设置隐藏效果和元素类型<style> div { width: 200px; height: 200px; } #qq { bac...
复制链接

扫一扫