分享CSS盒子模型隱藏的幾種方式
51CTO博客 發(fā)布時(shí)間：2022-02-25 14:57:23 作者：酷爾。 
我要評(píng)論
我要評(píng)論這篇文章主要分享的是CSS盒子模型隱藏的幾種方式，盒子的隱藏會(huì)使做出來(lái)的界面更加精致,靈活,帶給用戶(hù)更好的使用體驗(yàn)，盒子的隱藏使用css與js會(huì)有更好的動(dòng)畫(huà)效果，下面我i嗎就一起進(jìn)入文章了解這些有趣的內(nèi)容吧,需要的朋友也可以參考一下
前言：
合理的隱藏盒子,會(huì)有意想不到的結(jié)果
一、盒子隱藏概述
- 盒子的隱藏會(huì)使做出來(lái)的界面更加精致,靈活,帶給用戶(hù)更好的使用體驗(yàn)
- 盒子的隱藏使用css與js會(huì)有更好的動(dòng)畫(huà)效果
盒子隱藏的幾種方式：
1.display:none;
將盒子隱藏起來(lái),并且放棄之前占有的位置
2.visibility:hidden;
盒子隱藏起來(lái),不放棄自己占有的位置
3.overflow:hidden;
一般用于針對(duì)盒子內(nèi)的東西,如果超出盒子的大小
就對(duì)超出的部分進(jìn)行隱藏,也可以對(duì)超出的部分進(jìn)行,滾動(dòng)瀏覽
這三種隱藏方式各有各的優(yōu)點(diǎn)
二、display
display屬性，作用是進(jìn)行塊元素與行內(nèi)塊元素的轉(zhuǎn)換。它將盒子進(jìn)行隱藏
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盒子進(jìn)行隱藏,none用于隱藏,block用于恢復(fù)盒子
-->
<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;效果展示
可以看出原來(lái)的第一個(gè)盒子變?yōu)榱送该?并放棄了原來(lái)的位置。
三、visibility
從屬性名可以看出,這個(gè)屬性管理的是可視化，而hidden意思是隱藏，隱蔽（就是將盒子以隱藏的形式進(jìn)行展示出來(lái)）
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將盒子隱藏后不放棄盒子原來(lái)的位置
使用visible進(jìn)行盒子恢復(fù)
-->
<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
這個(gè)屬性就是將超出盒子邊界的文字或圖片進(jìn)行隱藏
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對(duì)盒子內(nèi)部的東西進(jìn)行處理,有多種模式,其中auto兼容性很強(qiáng)
-->
<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>
2.不加這個(gè)屬性效果展示
3.加hidden效果展示
4.加auto效果展示
- 會(huì)對(duì)盒子與超出部分進(jìn)行兼容性合并
總結(jié)：
盒子的隱藏尤為重要,可以將填好的表單隱藏起來(lái),在點(diǎn)擊特定的按鈕時(shí)繼續(xù)填寫(xiě),可以做一些動(dòng)態(tài)圖片效果展示,可以極大地提高用戶(hù)體驗(yàn)。
到此這篇關(guān)于 分享CSS盒子模型隱藏的幾種方式的文章就介紹到這了,更多相關(guān)CSS盒子模型隱藏的幾種方式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
詳解css盒子模型之內(nèi)邊距padding及簡(jiǎn)寫(xiě)
這篇文章主要介紹了詳解css盒子模型之內(nèi)邊距padding及簡(jiǎn)寫(xiě),本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-10-27
這篇文章主要介紹了看完不迷糊的 CSS 盒子模型介紹,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-08-25- 下面小編就為大家?guī)?lái)一篇深入理解CSS中的盒子模型。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-25
- 什么是CSS盒子模型？CSS盒子模型是為了讓我們充分理解div+css模型的定位功能，盒子模型在學(xué)習(xí)div+css布局方式中必須要學(xué)習(xí)的一個(gè)模型2016-05-10
- 這篇文章主要介紹了css盒子模型的使用方法,需要的朋友可以參考下2014-04-22
- 這篇文章主要介紹了css盒子模型詳解加示例,W3C組織建議把所有的網(wǎng)頁(yè)上的對(duì)象都放在一個(gè)盒子中,在定義盒子寬高的時(shí)候，要考慮到內(nèi)填充，邊框，邊界的存在,這里講了一個(gè)盒子2014-04-15
- 盒子模型，是XHTML+CSS布局頁(yè)面中的核心！要想學(xué)會(huì)用CSS布局頁(yè)面，就首先要理解盒子模型！2010-01-07
