文章目录

前言
一、盒子隐藏概述
二、display
- 1.赋予display none属性
- 2.未加display:none;效果展示
- 2.加display:none;效果展示
三、visibility
- 1.visibility: hidden;
- 2.未加visibility: hidden;效果展示
- 3.加visibility: hidden;效果展示
四、overflow
- 1.代码示例：
- 2.不加这个属性效果展示
- 3.加hidden效果展示
- 4.加auto效果展示
总结

前言

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

一、盒子隐藏概述

盒子的隐藏会使做出来的界面更加精致,灵活,带给用户更好的使用体验
盒子的隐藏使用css与js会有更好的动画效果盒子隐藏的几种方式
1.display:none;
将盒子隐藏起来,并且放弃之前占有的位置
2.visibility:hidden;
盒子隐藏起来,不放弃自己占有的位置
3.overflow:hidden;
一般用于针对盒子内的东西,如果超出盒子的大小
就对超出的部分进行隐藏,也可以对超出的部分进行,滚动浏览这三种隐藏方式各有各的优点

二、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>jml;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设置子盒子水平垂直居中(四种方式) 1. 使用绝对定位 <!DOCTYPE html> <html><head><meta charset=" ...
css盒子模型有几种?以及盒模型设置？
CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型. 盒子模型(Box Modle)可以用来对元素进行布局,包括内边距,边框,外边距,和实际内容这几个部分. 盒子模型分为两种: 第 ...
前端基础之CSS盒子模型
目录长度单位像素百分比 em rem 颜色单位 RGB RGBA 文档流(normalflow) 盒子模型内容区(content) 边框(border) 内边距(padding) 外边距(ma ...
【Web前端】落地成盒？达咩之——CSS盒子模型及属性
目录前言什么是盒子模型盒子的组成盒子的大小盒子成分分析 1.外边距--margin 2.padding--内边距 3.border--边框 border-style:边框样式 border- ...
css盒子样式有哪些,css盒子模型 css3盒子相关样式
1.内边距(内边距在content外,边框内) 内边距属性: padding 设置所有边距 padding-bottom 底边距 padding-left ...
CSS盒子模型及属性
CSS盒子模型目录 CSS盒子模型一.什么是盒子模型二.盒子模型的说明 CSS盒子模型的属性一.Margin(外边距) 二.Border(边框) 三.Padding(内边距) 四.Conten ...
CSS盒子模型AND浮动[附：常用工具ps]
课程目标: 熟练掌握CSS盒子模型熟练掌握CSS浮动盒子模型(CSS重点) 其实,CSS就三个大模块: 盒子模型 . 浮动 . 定位,其余的都是细节.要求这三部分,无论如何也要学的非常精通. 所谓 ...
[HTML/CSS]盒子模型，块级元素和行内元素
目录概述盒子模型块级元素行内元素可变元素总结概述在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效.虽然自己不是做前端的,但是,在项 ...
php盒子模型,CSS盒子模型介绍
什么是CSS盒子模型?CSS盒子模型是为了让我们充分理解p+css模型的定位功能,盒子模型在学习p+css布局方式中必须要学习的一个模型一.什么是CSS? CSS(Cascading Style S ...
转HTML+CSS总结/深入理解CSS盒子模型
原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...

CSS盒子模型隐藏的几种方式

文章目录

前言

一、盒子隐藏概述

二、display

1.赋予display none属性

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

2.加display:none;效果展示

三、visibility

1.visibility: hidden;

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

3.加visibility: hidden;效果展示

四、overflow

1.代码示例：

2.不加这个属性效果展示

3.加hidden效果展示

4.加auto效果展示

总结

CSS盒子模型隐藏的几种方式相关推荐

最新文章

热门文章