前端之CSS篇(六)——页面布局总结&元素的显示隐藏

今晚务必早点睡

已于 2022-10-03 10:14:41 修改

阅读量790

点赞数

分类专栏：前端文章标签： css 前端 vscode

于 2022-10-03 10:13:51 首次发布

本文链接：https://blog.csdn.net/m0_57021623/article/details/127149568

版权

前端专栏收录该内容

34 篇文章 10 订阅

订阅专栏

1.网页布局总结

通过盒子模型，清楚知道大部分html标签是一个盒子。

通过CSS浮动、定位可以让每个盒子排列成为网页。

一个完整的网页，是标准流、浮动、定位一起完成布局的，每个都有自己的专门用法

1.标准流

可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。

2.浮动

可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局。

3.定位

定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由的在某个盒子内移动，就用定位布局。

2.元素的显示与隐藏

类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！

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

1.display 显示隐藏

2.visibility 显示隐藏

3.overflow 溢出显示隐藏

2.1 display 属性

display属性用于设置一个元素如何显示。

display:none; 隐藏对象
display: block; 除了转换为块级元素之外，同时还有显示元素的意思

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

后面应用及其广泛，搭配JS可以做很多的网页特效

执行代码：



    <!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>显示隐藏元素之display</title>
        <style>
            .one {
                /* display隐藏元素后，不再占有原来的位置 */
                display: none;
                /* display: block 会将隐藏的元素显示出来 */
                /* display: block; */
                width: 200px;
                height: 200px;
                background-color: rgb(218, 56, 204);
            }
    
            .two {
                width: 200px;
                height: 200px;
                background-color: rgb(39, 235, 202);
            }
        </style>
    </head>
    
    <body>
        <div class="one">第一个盒子</div>
        <div class="two">第二个盒子</div>
    </body>
    
    </html>

效果显示
在这里插入图片描述

2.2 visibility 可见性

visibility 属性用于指定一个元素应可见还是隐藏。

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

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

如果隐藏元素想要原来的位置，就用 visibility: hidden

如果隐藏元素不想要原来的位置，就用display:none（用处更多，重点）

执行代码：



    <!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>显示隐藏元素之display</title>
        <style>
            .first {
                visibility: hidden;
                width: 200px;
                height: 200px;
                background-color: rgb(204, 47, 204);
            }
    
            .second {
                width: 200px;
                height: 200px;
                background-color: rgb(202, 221, 30);
            }
        </style>
    </head>
    
    <body>
        <div class="first">第一个</div>
        <div class="second">第二个</div>
    </body>
    
    </html>

显示效果：
在这里插入图片描述

2.3 overflow 溢出

overflow属性指定了如果内容溢出一个元素的框(超过其指定高度及宽度)时，会发生什么。

属性值描述
visible 不剪切内容也不添加滚动条
hidden 不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll 不管超出内容与否，总是显示滚动条
auto 超出自动显示滚动条，不超出不显示滚动条

一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。

但是如果有定位的盒子，请慎用overflow:hidden 因为它会隐藏多余的部分。(学成在线首页精品推荐的hot部分)

执行代码：




    <!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>显示隐藏元素之overflow</title>
        <style>
            .drama {
                /* 系统默认 */
                /* overflow: visible; */
                /* 把溢出的部分隐藏 */
                /* overflow: hidden; */
                /* scroll溢出的部分显示滚动条   不溢出也显示滚动条 */
                overflow: scroll;
                /* 在需要的时候添加滚动条 */
                /* auto溢出的时候显示滚动条，不溢出的时候不显示滚动条 */
                /* overflow: auto; */
                width: 200px;
                height: 200px;
                border: 3px solid greenyellow;
                margin: 100px auto;
            }
    
            .demo {
                /* overflow: auto; */
                overflow: scroll;
                width: 200px;
                height: 200px;
                border: 3px solid greenyellow;
                margin: 100px auto;
            }
        </style>
    </head>
    
    <body>
        <div class=drama>
            全书主要描写了孙悟空出世及大闹天宫后，遇见了唐僧、猪八戒、沙僧和白龙马，西行取经，
            一路上历经艰险、妖怪魔法高强，经历了九九八十一难，终于到达西天见到如来佛祖，最终五
            圣成真的故事。该小说以“玄奘取经”这一历史事件为蓝本，通过作者的艺术加工，深刻地描绘
            了明代社会现实。
        </div>
        <div class="demo">
            该小说以“玄奘取经”这一历史事件为蓝本，通过作者的艺术加工，深刻地描绘
            了明代社会现实。
        </div>
    </body>
    
    </html>

效果展示：
在这里插入图片描述

display 显示隐藏元素，但是不保留位置
visibility 显示隐藏元素，但是保留原来的位置
overflow 溢出显示隐藏，但是只是对于溢出的部分处理

2.4土豆网案例

需求：土豆网鼠标经过显示遮罩

在这里插入图片描述

技能：

1.练习元素的显示与隐藏

2.练习元素的定位

核心原理：原先半透明的黑色遮罩看不见，鼠标经过大盒子，就显示出来

遮罩的盒子不占有位置，就需要用绝对定位和display配合使用。

visibility [ˌvɪzəˈbɪləti] 可见度; 能见度; 能见距离;
mask [mɑːsk] 面具; 面罩; 假面具; 护肤膜;

执行代码：



    <!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>
            .tudo {
                /* 子绝父相 */
                position: relative;
                width: 444px;
                height: 320px;
                background-color: rgb(45, 209, 67);
                /* 让盒子居中 ，可以使用auto的前提条件：必须设置了宽度 */
                margin: 30px auto;
            }
    
            /* 因为图片比较大，给强制转化大小 */
            /* 方法一：     缺点：如果盒子大小改变，图片也要跟着改 */
            /* .tudo img {
                width: 444px;
                height: 320px;
            } */
            /* 方法二 */
            .tudo img {
                /* 和父亲一样大 */
                width: 100%;
                height: 100%;
            }
    
            /* 制造遮罩 */
            .mask {
                /* 隐藏遮罩层 */
                display: none;
                /* 改成绝对定位，不占用空间 */
                position: absolute;
                top: 0;
                left: 0;
                /* 和父亲一样大 */
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, .3) url(../access/arr.png) no-repeat center;
    
            }
    
            /* 当我们鼠标经过了 土豆 这个盒子，就让里面的遮罩层显示出来 */
            .tudo:hover .mask {
                /* 显示元素 */
                display: block;
            }
        </style>
    </head>
    
    <body>
        <div class="tudo">
            <div class="mask"></div>
            <img src="../access/tudou.jpg">
        </div>
    </body>
    
    </html>