css9. display和overflow和visibilit

时光无错孤独难谈

于 2020-02-13 10:50:19 发布

阅读量273

点赞数

分类专栏： html5 && css

本文链接：https://blog.csdn.net/qq_43745403/article/details/104291948

版权

html5 && css 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <style type="text/css">
            a{
                background-color: pink;
                /* 
                    将内联元素变成块元素
                    通过display样式修改元素类型
                        -可选值:
                            inline:可以将一个元素作为内联元素显示
                            block:可以将元素作为块显示
                            inline-block:可以将元素转换为行内块元素
                                -既可以设置宽高又可以，又不会独占一行
                            none:此元素不会被显示，且元素不会占有位置
                */
                display: block;
                /* 设置宽高 */
                width: 500px;
                height: 500px;
            }

            .box1{
                width: 100px;
                height: 100px;
                background-color: burlywood;
                /* 
                    display: none;
                        使用该方式隐藏的元素，不会在页面中显示，并且不再占据页面位置
                */
                /* 
                    visibility: 
                        可选值：
                            visible:默认值，元素会在页面显示
                            hidden：使用他隐藏的元素，虽然不会显示，但是位置依然保存
                */
                visibility: hidden;
            }
            

            .box2{
                width: 200px;
                height: 200px;
                background-color: #bfa;
                /* 
                    子元素默认存在于父元素内容区，理论上子元素最大等于等元素大小
                    如果子元素大小超过父元素内容区，会在父元素以外的位置显示
                        超出父元素的内容称为溢出内容，在父元素外显示
                                通过overflow可以设置父元素如何处理溢出内容
                                    可选值:
                                        visible:默认值，不会对溢出内容处理，元素在父元素外显示
                                        hidden:溢出的内容不会显示
                                        scroll:回为父元素添加滚动条，通过拖动滚动条查看，无论内容是否溢出都会有滚动条
                                        auto:根据需要添加滚动条
                */
                overflow: auto;
            }
            .box3{
                width: 100px;
                height: 500px;
                background-color:red;
            }
        </style>


    </head>
        
    <body>
        <a href="#">我是一个大大的超链接1</a>
        <div class="box1"></div>

        <div class="box2">
            <div class="box3"></div>
        </div>
        
    </body>


</html>

时光无错孤独难谈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css9. display和overflow和visibilit

<!DOCTYPE html><html> <head> <meta charset="UTF-8"/> <style type="text/css"> a{ background-color: pink; /...
复制链接

扫一扫