分享CSS盒子模型隱藏的幾種方式
51CTO博客 發布時間：2022-02-25 14:57:23 作者：酷爾。 
我要評論
我要評論這篇文章主要分享的是CSS盒子模型隱藏的幾種方式，盒子的隱藏會使做出來的界面更加精致,靈活,帶給用戶更好的使用體驗，盒子的隱藏使用css與js會有更好的動畫效果，下面我i嗎就一起進入文章了解這些有趣的內容吧,需要的朋友也可以參考一下
前言：
合理的隱藏盒子,會有意想不到的結果
一、盒子隱藏概述
- 盒子的隱藏會使做出來的界面更加精致,靈活,帶給用戶更好的使用體驗
- 盒子的隱藏使用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>
2.不加這個屬性效果展示
3.加hidden效果展示
4.加auto效果展示
- 會對盒子與超出部分進行兼容性合并
總結：
盒子的隱藏尤為重要,可以將填好的表單隱藏起來,在點擊特定的按鈕時繼續填寫,可以做一些動態圖片效果展示,可以極大地提高用戶體驗。
到此這篇關于 分享CSS盒子模型隱藏的幾種方式的文章就介紹到這了,更多相關CSS盒子模型隱藏的幾種方式內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了詳解css盒子模型之內邊距padding及簡寫,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-10-27
這篇文章主要介紹了看完不迷糊的 CSS 盒子模型介紹,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-08-25- 下面小編就為大家帶來一篇深入理解CSS中的盒子模型。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-25
- 什么是CSS盒子模型？CSS盒子模型是為了讓我們充分理解div+css模型的定位功能，盒子模型在學習div+css布局方式中必須要學習的一個模型2016-05-10
- 這篇文章主要介紹了css盒子模型的使用方法,需要的朋友可以參考下2014-04-22
- 這篇文章主要介紹了css盒子模型詳解加示例,W3C組織建議把所有的網頁上的對象都放在一個盒子中,在定義盒子寬高的時候，要考慮到內填充，邊框，邊界的存在,這里講了一個盒子2014-04-15
- 盒子模型，是XHTML+CSS布局頁面中的核心！要想學會用CSS布局頁面，就首先要理解盒子模型！2010-01-07
最新評論