CSS盒子模型隐藏怎样做，具体方法是什么？-群英

上一篇：HTML5文本标签有哪些，怎样使用及控制呢？下一篇：CSS字体常用属性包括什么，功能及使用是什么呢？

很多朋友都对“CSS盒子模型隐藏怎样做，具体方法是什么？”的内容比较感兴趣，对此小编整理了相关的知识分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获，那么感兴趣的朋友就继续往下看吧！

前言：

合理的隐藏盒子,会有意想不到的结果

一、盒子隐藏概述

盒子的隐藏会使做出来的界面更加精致,灵活,带给用户更好的使用体验
盒子的隐藏使用css与js会有更好的动画效果

盒子隐藏的几种方式：

1.display:none;

将盒子隐藏起来,并且放弃之前占有的位置

2.visibility:hidden;

盒子隐藏起来,不放弃自己占有的位置

3.overflow:hidden;

一般用于针对盒子内的东西,如果超出盒子的大小

就对超出的部分进行隐藏,也可以对超出的部分进行,滚动浏览

这三种隐藏方式各有各的优点

二、display

display属性，作用是进行块元素与行内块元素的转换。它将盒子进行隐藏

1.赋予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>Document</title>

    <!-- 

        display盒子进行隐藏,none用于隐藏,block用于恢复盒子

     -->

    <style>

        .nav {

            width: 300px;

            height: 300px;

            background-color: aquamarine;

            display: none;

        }



        .qwe {

            width: 300px;

            height: 300px;

            background-color: blueviolet;



        }

    </style>



</head>



<body>

    <div class="nav"></div>

    <div class="qwe"></div>

</body>



</html>

2.未加display:none;效果展示

2.加display:none;效果展示

可以看出原来的第一个盒子变为了透明,并放弃了原来的位置。

三、visibility

从属性名可以看出,这个属性管理的是可视化，而hidden意思是隐藏，隐蔽（就是将盒子以隐藏的形式进行展示出来）

1.visibility: hidden;

代码如下：

<!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>Document</title>

    <!-- 

        visibility将盒子隐藏后不放弃盒子原来的位置

        使用visible进行盒子恢复

     -->

    <style>

        .nav {

            visibility: hidden;

            width: 300px;

            height: 300px;

            background-color: blueviolet;

        }

        .qwe {

            width: 300px;

            height: 300px;

            background-color: chartreuse;

        }

    </style>

</head>



<body>

    <div class="nav"></div>

    <div class="qwe"></div>

</body>



</html>

2.未加visibility: hidden;效果展示

3.加visibility: hidden;效果展示

四、overflow

这个属性就是将超出盒子边界的文字或图片进行隐藏

1.代码示例

<!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>Document</title>

    <!-- 

        overflow对盒子内部的东西进行处理,有多种模式,其中auto兼容性很强

     -->

    <style>

        .nav {

            width: 300px;

            height: 300px;

            background-color: #fff;

            /* overflow: auto; */

            overflow: hidden;

            margin: 0 auto;

            border: 1px blue solid;

        }

    </style>

</head>



<body>

    <div class="nav">

        wefbkujsadbfjdkas<br></br>

        nfkldjfklsdjfl;asdf<br>j

        ml;sdajfl;a<br>jfl;eja;

        lwefbkujsadbfjdkas<br>

        </br>nfkldjfklsdjfl;asdf<

        br>jml;sdajfl;a<br>jfl;eja;

        lfjlwe<br>wefbkujsadbfjdkas<br>

        </br>nfkldjfklsdjfl;asdf<br>jml

        ;sdajfl;a<br>jfl;eja;lfjlwe<br>

        fjlwe<br>;jflejlfjlejfl

    </div>

</body>



</html>