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> ...
随机推荐
- Java学习之路(十二)：IO流<三>
复习:序列流 序列流可以把多个字节输入整合成一个,从序列流中读取到数据时,将从被整合的第一个流开始读取,读完这个后,然后开始读取第二个流,依次向后推. 详细见上一篇文章 ByteArrayOutput ...
- ubuntu 安装JDK8
1.下载JDK选择下载Linux版本-64位:jdk-8u65-linux-x64.tar.gz下载链接:http://www.oracle.com/technetwork/java/javase/d ...
- 【链表】Reorder List
题目: Given a singly linked list L: L0→L1→…→Ln-1→Ln,reorder it to: L0→Ln→L1→Ln-1→L2→Ln-2→… You must do ...
- Postman安装及简介
Postman简介 不管web自动化测试还是APP自动化端,测试过程中都会涉及到接口测试.接口测试分为服务器端测试和客户端测试.今天给大家介绍一个测试服务器端的小工具--Postman.它可以构造各类 ...
- Web自动化 - 选择操作元素 1
文章转自 白月黑羽教Python 所有的 UI (用户界面)操作 的自动化,都需要选择界面元素. 选择界面元素就是:先让程序能找到你要操作的界面元素. 先找到元素,才能操作元素. 选择元素的方法 程序 ...
- Root-NFS: Unable to get mountd port number from server, using default
问题描述: 以前下载到开发板linux内核启动好好地,今天突然启动不了了,到达Root-NFS: Unable to get mountd port number from server, using ...
- NLP Attention
一.概述 自动摘要可以从很多角度进行分类,例如单文档摘要/多文档摘要.单语言摘要/跨语言摘要等.从技术上说,普遍可以分为三类: i. 抽取式摘要(extractive),直接从原文中抽取一些句子组成摘 ...
- Hadoop MapReduce流程及容错
shuffle流程 输入分片(input split):在进行map计算之前,mapreduce会根据输入文件计算输入分片(input split),每个输入分片(input split)针对一个ma ...
- Nodejs学习笔记（十六）—Pomelo介绍&入门
前言&介绍 Pomelo:一个快速.可扩展.Node.js分布式游戏服务器框架 从三四年前接触Node.js开始就接触到了Pomelo,从Pomelo最初的版本到现在,总的来说网易出品还算不错 ...
- HihoCoder - 1040 矩形判断
矩形判断 给出平面上4条线段,判断这4条线段是否恰好围成一个面积大于0的矩形. Input 输入第一行是一个整数T(1<=T<=100),代表测试数据的数量. 每组数据包含4行,每行包含4 ...