前端学习 -- Css -- display和Visibility
display
将一个内联元素变成块元素，通过display样式可以修改元素的类型。
可选值：
1 inline：可以将一个元素作为内联元素显示。
2 block: 可以将一个元素设置块元素显示。
3 inline-block：将一个元素转换为行内块元素。
- 可以使一个元素既有行内元素的特点又有块元素的特点,既可以设置宽高，又不会独占一行。
4 none: 不显示元素，并且元素不会在页面中继续占有位置。
visibility
可以用来设置元素的隐藏和显示的状态
可选值：
1 visible 默认值，元素默认会在页面显示
2 hidden 元素会隐藏不显示
使用 visibility:hidden;隐藏的元素虽然不会在页面中显示，但是它的位置会依然保持。
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a {
background-color: #FF0000;
display: block;
/*为其设置一个宽和高*/
width: 100px;
height: 100px;
}
/**
* display: none;box不进行显示，
*/ .box1 {
width: 100px;
height: 100px;
background-color: red;
display: none;
}
/**
* visibility: hidden 元素隐藏
*/ .box {
width: 100px;
height: 100px;
background-color: green;
visibility: hidden;
}
/**
* visibility: hidden 元素显示
*/ .box2 {
width: 100px;
height: 100px;
background-color: blue;
visibility: visible;
}
</style>
</head> <body> <div class="box"></div>
<div class="box1"></div>
<div class="box2"></div>
<a href="#">我是soyoungboy</a> <span>超级帅小伙</span> </body> </html>
效果：
代码：
https://github.com/soyoungboy/htmlCssStudy/blob/master/HelloHBuilder/lesson17.html
可运行下看看效果。
前端学习 -- Css -- display和Visibility的更多相关文章
- vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记（一） web攻击 web安全之XSS JSONP && CORS css 定位 react小结
vue—你必须知道的 目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...
- CSS display和visibility的用法和区别
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt408 大多数人很容易将CSS属性display和visibility混淆,它 ...
- 前端学习---css基本知识
css基本知识 我们先看一个小例子: <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- 前端学习——css实用技术
一,css控制文本样式 文本相关的css属性有很多,包括: color;font-size;font-weight;text-transform(大小写uppercase等);text-decorat ...
- Web前端学习——CSS
一.CSS简介CSS全称cascading style sheeding,层叠样式列表.CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化.二.CSS组成1.选择器(1) ...
- 前端学习——css(初级)
1.Css盒模型(box model) web开发中,html的每个元素都是盒子,盒子可以装内容(content).可以有填充物(padding).有外壳(border) 和 外保护层(margin) ...
- 前端学习——css基础知识，选择器与html模板、值得收藏的html标签
一.css需要的html(采用html5标准) DTD,文档类型声明: <!Doctype html> 文本编码声明: <meta charset="utf-8" ...
- 前端学习 -- Css -- 高度坍塌问题的产生以及解决
在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高. 但是当为子元素设置浮动以后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷. 由于 ...
- 前端学习 -- Css -- 浮动
块元素在文档流中默认垂直排列,所以这个三个div自上至下依次排开,如果希望块元素在页面中水平排列,可以使块元素脱离文档流. 使用float来使元素浮动,从而脱离文档流 可选值: none,默认值,元素 ...
随机推荐
- 20155204 王昊《网络对抗技术》EXP2 后门原理与实践
20155204 王昊<网络对抗技术>EXP2 后门原理与实践 一.实验内容 准备工作(试用ncat.socat) 1. 使用netcat获取主机操作Shell,cron启动. 明确目标: ...
- 20155207 EXP7 网络欺诈技术防范
20155207 EXP7 网络欺诈技术防范 实验内容 本实践的目标理解常用网络欺诈背后的原理,以提高防范意识,并提出具体防范方法. 具体有 (1)简单应用SET工具建立冒名网站 (2)etterca ...
- 2017-2018-2 20155224『网络对抗技术』Exp5：MSF基础应用
基础问题回答 用自己的话解释什么是exploit,payload,encode? exploit就相当于是载具,将真正要负责攻击的代码传送到靶机中,我觉得老师上课举的火箭和卫星的例子非常形象,火箭只是 ...
- 2017-2018-2 《网络对抗技术》 20155319 第二周 Exp1 PC平台逆向破解(5)M
2017-2018-2 <网络对抗技术> 20155319 第二周 Exp1 PC平台逆向破解(5)M 一.实践目标 1.1实践介绍 本次实践的对象是一个名为pwn1的linux可执行文件 ...
- 20155321 《网络攻防》 Exp4 恶意代码分析
20155321 <网络攻防> Exp4 恶意代码分析 计划任务监控 在C盘根目录下建立一个netstatlog.bat文件(先把后缀设为txt,保存好内容后记得把后缀改为bat),内容如 ...
- 20155333 《网络对抗》 Exp8 Web基础
20155333 <网络对抗> Exp8 Web基础 基础问题 (1)什么是表单? 表单在网页中主要负责数据采集功能. 一个表单有三个基本组成部分: 表单标签,这里面包含了处理表单数据所用 ...
- 20155334 《网络攻防》 Exp7 网络欺诈防范
20155334 <网络攻防> Exp7 网络欺诈防范 一.基础问题回答 通常在什么场景下容易受到DNS spoof攻击 同一局域网下,以及各种公共网络. 在日常生活工作中如何防范以上两攻 ...
- python基础学习1-流程控制和判断
python for循环和 if流程控制用法 Ages=22 for i in range(10): inputAges = int(input("输入年龄")) if input ...
- [CF1007D]Ants[2-SAT+树剖+线段树优化建图]
题意 我们用路径 \((u, v)\) 表示一棵树上从结点 \(u\) 到结点 \(v\) 的最短路径. 给定一棵由 \(n\) 个结点构成的树.你需要用 \(m\) 种不同的颜色为这棵树的树边染色, ...
- SpringBoot整合EHcache学习笔记
为了提高系统的运行效率,引入缓存机制,减少数据库访问和磁盘IO.下面说明一下ehcache和SpringBoot整合配置 前言介绍 EhCache 是一个纯Java的进程内缓存框架,具有快速.精干等特 ...