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