2021/3/17--前端第9天--display、visibility

最新推荐文章于 2023-06-26 19:26:26 发布

张登辉的奇妙旅程

最新推荐文章于 2023-06-26 19:26:26 发布

阅读量240

点赞数

分类专栏：前端 html5 CSS 文章标签： html css

本文链接：https://blog.csdn.net/A444477/article/details/114915061

版权

前端同时被 3 个专栏收录

34 篇文章 0 订阅

订阅专栏

CSS

17 篇文章 0 订阅

订阅专栏

html5

15 篇文章 0 订阅

订阅专栏

2021/3/17–前端第9天–display、visibility

隐藏元素：
display:none 设置显示方式消失、不占位
visibility:hidden 设置可见度：消失占位
opacity:0 设置透明度
H5新特性rgba（color，color，color，1-0.5），子元素不会变透明，其他元素不会被覆盖。

display:none和visibility:hidden(visible)两者的区别：
隐藏后一个占位一个不占位。

1、visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别

2、visibility: hidden不会影响计数器的计数，依然占着一个数字，visibility: hidden虽然让一个元素不见了，但是其计数器仍在运行。这和display: none完全不一样

<style>
        .container {
            height: 800px;
            background: pink;

        }

        .container div {
            width: 100px;
            height: 100px;

        }

        .box1 {
            background: green;
            /* 不占位隐藏 */
            /* display: none; */
            /* 占位隐藏 */
            /* visibility:hidden */
            /* 透明隐藏 */
            opacity:0;
        }
        .box2 {
            background: orange;
        }
        .box3 {
            background: skyblue;
        }
        .box4 {
            background: gold;
        }
    </style>
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="box1">box1</div>
        <div class="box2">box2</div>
        <div class="box3">box3</div>
        <div class="box4">box4</div>
    </div>
</body>

居中

关于vertical-align：
在这里插入图片描述

<style>
        /* 1单行文本居中 */
        .box1 {
            width: 200px;
            height: 200px;
            border: 1px solid black;
            /* 水平方向 */
            text-align: center;
            /* 垂直居中 */
            /* line-height: 200px; */
            vertical-align: middle;;
        }

        /* 2多行文本居中 */
        .box2 {
            width: 200px;
            /* height: 200px; */
            border: 1px solid black;
            /* 水平居中 */
            text-align: center;
            /* line-height: 30px; */
            vertical-align:middle;
            /* 垂直居中 取消高度，利用padding*/
            padding: 90px 0;
        }

        /* 盒子居中 */
        .container {
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            margin-top: 20px;
            /* 行内元素 */
            /* text-align: center ;
            line-height: 300px; */

            /* 块元素 不知道父元素高度的时候，利用padding（父元素没了） 同时子元素设置margin：0 auto;*/
            /* padding: 200px ; */

            /* 行内块水平居中 */
            text-align: center;
            line-height:300px;
            /* 注意！！：垂直居中要改变图片的对齐方式 */
            

        }

        .box3 {
            width: 100px;
            height: 100px;
            background: green;
            
            /* margin: 0 auto; */

            /* margin: 100px auto 100px; */
            /* 父容器如果已知高度，设置margin-top，不要塌陷。 */
            /* 父容器高度不确定，可在父容器设置padding居中 */
        }

        img {
            width: 120px;
            height: 80px;
            /* 注意！！：垂直居中要改变图片的对齐方式 */
            vertical-align: middle;
        }

        /* 模拟表格实现居中 */
        .ickt {
            width: 600px;
            height: 600px;
            border: 10px solid pink;
            /* 模拟表格 */
            display: table-cell;
            text-align: center;
            vertical-align: middle; 
            /* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
        }
    </style>
    <title>Document</title>
</head>
<body>
    <!-- 通过模拟表格居中 -->
    <div class="ickt">
        hello
    </div>

    <!-- 表格 -->
    <table border="1" width="500px" height = "500px">
        <tr>
            <!-- 行内文本 -->
            <th><span>hello</span> </th>
            <td align="center"><span>world</span></td>
            <!-- 块元素 -->
            <td align="center"><div>world</div></td>
            <!-- 行内块元素 -->
            <td align="center"><img src="../../pic/test.jpg" alt=""> </td>
        </tr>
    </table>

    <!-- 单行文本 -->
    <div class="box1">
        <span>hello ickt</span>
    </div>
    <hr>

    <!-- 多行文本 -->
    <div class="box2">
        hello ickt
        <br>
        helloickt
        !!!!!!!!!
        123
    </div>

    <!-- 块元素 -->
    <div class="container">
        <!-- 行内元素 -->
        <!-- <span>hello</span> -->
        <!-- 块元素 -->
        <!-- <div class="box3">hello</div> -->
        <img src="../../pic/test.jpg" alt="">
    </div>

    
</body>

P57

P58

张登辉的奇妙旅程

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021/3/17--前端第9天--display、visibility

2021/3/17–前端学习第9天笔记隐藏元素：display:none 设置显示方式消失、不占位visibility:hidden 设置可见度：消失占位opacity:0 设置透明度display:none和visibility:hidden(visible)两者的区别：隐藏后一个占位一个不占位。1、visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则
复制链接

扫一扫

专栏目录