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> ...
随机推荐
- python strip()函数的用法
函数原型 声明:s为字符串,rm为要删除的字符序列 s.strip(rm) 删除s字符串中开头.结尾处,位于 rm删除序列的字符 s.lstrip(rm) 删除s字符串中 ...
- CVPR2019 | Libra R-CNN 论文解读
作者 | 文永亮 学校 | 哈尔滨工业大学(深圳) 研究方向 | 目标检测.GAN 推荐理由 这是一篇发表于CVPR2019的paper,是浙江大学和香港中文大学的工作,这篇文章十分有趣,网友戏称 ...
- js便签笔记（2）——DOM元素的特性（Attribute）和属性（Property）
1.介绍: 上篇js便签笔记http://www.cnblogs.com/wangfupeng1988/p/3626300.html最后提到了dom元素的Attribute和Property,本文简单 ...
- 7-nginx-keepalived配置主从双击热备
nginx的高可用解决方案 keepalive 是 VRRP 协议的完美实现, 通过vip(虚拟ip)来实现主从双击热备, 自动切换的高可用方案, nginx的主从是通过keepalived实现的 通 ...
- mysql查看权限的命令
mysql查看用户权限的命令 1.这里用来查看用户存储过程: show grants for 用户; eg: show grants for root@'localhost';#这样就会把root用户 ...
- typeof null 为什么等于 object?
之前只知道typeof null = object,但是却从来不知道是为什么.最新查阅资料的时候,看到了这个原理,记录下来,方便自己以后查看. 原理是这样的,不同的对象在底层都表示为二进制,在 Jav ...
- Deep Residual Learning for Image Recognition(残差网络)
深度在神经网络中有及其重要的作用,但越深的网络越难训练. 随着深度的增加,从训练一开始,梯度消失或梯度爆炸就会阻止收敛,normalized initialization和intermediate n ...
- 在Docker平台实现MySQL Replication(复制)
MySQL Replication提供了数据库之间复制数据的功能,通过这个功能可以让一个数据库的数据更改自动同步到另外一个数据库.通常用这个功能来实现数据备份.数据容灾.数据冗余,进一步实现数据的读写 ...
- 把AspDotNetCoreMvc程序运行在Docker上-part4：实现负载均衡
在上一part<把AspDotNetCoreMvc程序运行在Docker上-part3:使用独立的存储容器>,我们利用MySql容器和Volume实现了真正意义上的数据存储.整个结构非常简 ...
- UIKit 框架之UITableView二
// // ViewController.m // UITableView // // Created by City--Online on 15/5/21. // Copyright (c) 201 ...