网页布局总结&&元素的显示与隐藏

最新推荐文章于 2022-11-21 21:08:25 发布

ATTACH_Fine

最新推荐文章于 2022-11-21 21:08:25 发布

阅读量120

点赞数

本文链接：https://blog.csdn.net/qq_48094059/article/details/117117169

版权

1. 网页布局

一个完整的网页，是标准流、浮动、定位一起布局完成的，每个都有自己的专门用法。
1.标准流
可以让盒子上下排列或者左右排列，垂直的块级盒子显示就有标准流布局
2.浮动
可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局
3.定位
定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局

2 元素的显示与隐藏

本质：让一个元素在页面中隐藏或者显示出来

2.1 display属性

隐藏对象

display: none;

除了转换成块级元素外，还有显示元素的意思

display: block;

display隐藏元素后，不再占有原来的位置。

2.2 visibility可见性

  visibility: visible;  元素可视
  visibility: hidden;   元素隐藏

visibility隐藏元素之后，继续占有原来的位置。

2.3 overflow溢出

溢出部分的显示与隐藏

overflow: visible; 
overflow: hidden;
overflow: auto;  溢出的时候才显示滚动条，不溢出不🙅‍显示滚动条
overflow: scroll; 溢出的部分显示滚动条，不溢出也显示滚动条

仿土豆网显示隐藏遮罩案例

<!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>仿土豆网显示隐藏遮罩案例</title>
    <style>
        .tudou {
            position: relative;
            width: 444px;
            height: 320px;
            margin: 30px auto;
        }

        .tudou img {
            width: 100%;
            height: 100%;
        }

        .mask {
            /* 隐藏遮罩层 */
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .4) url(image/arr.png) no-repeat center;
        }

        /* 当我们的鼠标经过了 土豆这个盒子，就让里面的遮罩层显示出来 */
        .tudou:hover .mask {
            /* 不代表块元素，代表显示元素 */
            display: block;
        }
    </style>
</head>

<body>
    <div class="tudou">
        <div class="mask"></div>
        <img src="image/tudou.jpg" alt="">
    </div>
</body>

</html>

ATTACH_Fine

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页布局总结&&元素的显示与隐藏

1. 网页布局一个完整的网页，是标准流、浮动、定位一起布局完成的，每个都有自己的专门用法。1.标准流可以让盒子上下排列或者左右排列，垂直的块级盒子显示就有标准流布局2.浮动可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局3.定位定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局2 元素的显示与隐藏本质：让一个元素在页面中隐藏或者显示出来2.1 display属性隐藏对象display: none;除
复制链接

扫一扫