CSS 小结笔记之元素的隐藏与显示
在网站上经常会有一些需要一定操作才会显示或隐藏的元素，这时会用到元素的隐藏与显示。主要通过以下三种属性实现。
1、display ：none|block |inline |inline-block
display常用以上四个属性值，none 是元素隐藏，且不占有位置。block 除了转换为块级元素之外，同时还有显示元素的意思。inline 和inline-block 分别是显示为行内元素和行内块元素。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
margin: 0;
} div:first-child {
background-color: aqua;
} div:nth-child(2) {
background-color: red;
display: none;
} div:last-child {
background-color: pink;
}
</style>
</head> <body>
<div></div>
<div></div>
<div></div>
</body> </html>
可以发现红色的div 消失且不占有位置，粉色的自动补上去。
2、visibility: hidden|visible
visibility 隐藏时原有的位置还会占有，不会消失
将1中的display：none ； 改为 visibility: none;结果如下图所示
可以发现红色额的div 虽然消失了，但是原有的位置还是占有的。
3、overflow: visible | auto | hidden | scroll
overflow只要是用来对超出盒子指定大小的内容做处理。
visible 是默认值，及不剪切内容也不添加滚动条。
auto 是有超出部分就添加滚动条，没有超出的部分就不添加滚动条。
hidden 是超出的部分被剪切，不显示。
scroll 是不管内容有没有超出大小，都添加滚动条。
CSS 小结笔记之元素的隐藏与显示的更多相关文章
- CSS 小结笔记之解决flex布局边框对不齐
在使用flex 进行伸缩布局的时候,经常会给子盒子设置边框,这时经常会出现上下边框对不齐的情况.本篇文章来探讨并解决这个问题. 具体出现的问题如下图所示 具体代码如下 <!DOCTYPE htm ...
- CSS 小结笔记之浮动
在css中float是一个非常好用的属性,float最基本用法是用来做文字环绕型的样式的. 基本用法:float:left | right 例如 <!DOCTYPE html> <h ...
- 如何使用T-SQL备份还原数据库及c#如何调用执行？ C#中索引器的作用和实现。 jquery控制元素的隐藏和显示的几种方法。 localStorage、sessionStorage用法总结 在AspNetCore中扩展Log系列 - 介绍开源类库的使用（一） span<T>之高性能字符串操作实测
如何使用T-SQL备份还原数据库及c#如何调用执行? 准备材料:Microsoft SQL Server一部.需要还原的bak文件一只 一.备份 数据库备份语句:user master backup ...
- js 原生： 身份证脱敏、唯一随机字符串uuid、对于高 index 元素的隐藏与显示
1. 对于高 index 元素的隐藏 与 显示 export const hideIndexEle = (cssStr)=>{ const player = getElementsByCss(c ...
- jquery控制元素的隐藏和显示的几种方法。
组织略显凌乱,请耐心看! 使用jquery控制div的显示与隐藏,一句话就能搞定,例如: 1.$("#id").show()表示为display:block, $("#i ...
- jquery控制元素的隐藏和显示的几种方法
使用jquery控制div的显示与隐藏,一句话就能搞定,例如: 方法一 显示: $("#id").show()表示为display:block, 隐藏: $("#id&q ...
- js 判断某个元素是否隐藏或显示
//判断某个元素是否显示 true:是 false:不是 var isVisible = $('#myDiv').is(':visible'); //判断某个元素是否隐藏 true:是 false:不 ...
- CSS 小结笔记之清除浮动
浮动是一个非常好用的属性,但是有时会出现一些问题,需要进行清除浮动.例如 <!DOCTYPE html> <html lang="en"> <head ...
- CSS学习笔记之元素分类
在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div> ...
随机推荐
- EJB3 阶段总结+一个EJB3案例 (2)
这篇博文接着上一篇博文的EJB案例. 在上一篇博文中,将程序的架构基本给描述出来了,EJB模块分为5层. 1)DB层,即数据库层 在则一部分,我使用的数据库为mysql.在EJB程序中,访问数据库是通 ...
- 使用mysqldump备份单表数据，并使用navicat导出单表中部分字段到excel
今天工作上遇到一个问题,客户需要将生产环境上数据库中用户表中的用户名.登录名.邮箱三个字段导出到excel中,查了一下,分两个步骤完成了任务 1. 使用mysqldump命令将生产环境的user表备份 ...
- python的字符串连接操作符+
如图, 运行后提示错误,这是“+” 是字符串连接操作符,字符串连接只能在被连接的每一个都是字符串时起作用.而以上程序试图将一个字符串同一个非字符串连接会引发一个异常,所以会报错. 正确的为: 或者是:
- Android 开发工具类 25_getJSON
获取 JSON 数据并解析 import java.io.InputStream; import java.net.HttpURLConnection; import java.net.URL; im ...
- javac后期需要重点阅读的类
(1)Annotate (300行) Enter annotations on symbols. Annotations accumulate in a queue,which is processe ...
- 《Mysql技术内幕，Innodb存储引擎》——锁
lock与latch 在数据库中lock与latch分别指不同的所. latch:可分为互斥量(mutex)和读写锁(rwlock),目的在于保证数据库内部的结构中共享资源并发时能够正确操作,其对象主 ...
- cmake:用add_subdirectory()添加外部项目文件夹
一般情况下,我们的项目各个子项目都在一个总的项目根目录下,但有的时候,我们需要使用外部的文件夹,怎么办呢? add_subdirectory命令,可以将指定的文件夹加到build任务列表中.下面是将与 ...
- MySQL的各种join
常用的是这5个join 首先join = inner join 这里有说明:点击打开链接 这里我就不用表来说明了,例子看这里 简单的说就是 inner join:不以谁为基准,只有符合关系的才会选 ...
- Shiro的Filter机制详解---源码分析
Shiro的Filter机制详解 首先从spring-shiro.xml的filter配置说起,先回答两个问题: 1, 为什么相同url规则,后面定义的会覆盖前面定义的(执行的时候只执行最后一个). ...
- 我的zsh 配置
# If you come from bash you might have to change your $PATH.# ZSH的环境变量export ZSH=/Users/lorialex/.oh ...