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> ...
随机推荐
- 简述ARP请求过程(同一子网和不同子网)
1. 同一子网 主机A在准备构造链路层以太网帧头时,首先根据目的IP去查找ARP表,如果找到对应项,则直接得到目的MAC地址,如果没有查到才执行上面所说的ARP广播请求.这样做是为了最大限度地减少广播 ...
- Sington单例模式(创建型模式)
一.使用Sington单例模式的动机(Motivation) 在软件系统中,经常有一些特殊的类,必须保证它们只有一个实例,才能保证它的逻辑正确性.以及良好的效率. 大多数类用的是常规的构造器,所以往往 ...
- Android中ListView的使用步骤
第一步: 首先,在 布局文件中,声明listView控件. <ListView android:id="@+id/lv" android:layout_width=&quo ...
- 按照Right-BICEP要求对实验二进行测试
我的代码实现的功能很简单,在最基本的功能上,包括有无括号(0/1),有无负数(0/1),有无乘除法(0/1)验证程序的正确性,测试用例为8个,2^3个,也就覆盖了所有的代码路径. 测试计划: 基本功能 ...
- win7,8走网络打印机出现删除设备和打印机门未关闭的解决方法
不多说,直接上干货! 用学校的内网连接, 即可. 右键,查看设备网页. 出现下面的情况: 多学学. 欢迎大家,加入我的微信公众号:大数据躺过的坑 人工智能躺过的坑 同时,大家 ...
- 微信小程序开发-概述
微信小程序开发-概述 一.小程序申请&APPID 登录微信平台申请成为小程序开发者,小程序不可直接使用服务号或订阅号的AppID,需要登录微信公众平台管理后台,在网站的"设置&quo ...
- surgemq 添加ssl
surgemq添加ssl 1.MQTT协议 消息发布订阅功能的消息队列协议 报文组成: 固定报头(控制报文类型)+可变报头(协议名称.协议级别.连接标志.保持连接)+有效载荷(clentId+will ...
- javascript快速入门1--JavaScript前世今生,HelloWorld与开发环境
JavaScript历史 大概在1992年,一家称作Nombas的公司开始开发一种叫做C--(C-minus-minus,简称Cmm)的嵌入式脚本语言. Cmm背后的理念很简单:一个足够强大可以替代宏 ...
- LinuxC中全局变量environ
Linux C中environ 变量是一个char** 类型,存储着系统的环境变量. 要想遍历环境变量可以用下面这个程序: #include <stdio.h> extern char * ...
- android开发学习笔记系列（2）-android应用界面编程
前言 本篇博客将会简要介绍andriod开发过程中的一些界面元素和编程的实现,我将大家走进安卓的XML世界,当然可能会涉及到java代码,当然本文主要是介绍XML文件的界面布局. 那么我们的XML存在 ...