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;
/*为其设置一个宽和高*/
100px;
height: 100px;
}
/**
* display: none;box不进行显示，
*/
.box1 {
100px;
height: 100px;
background-color: red;
display: none;
}
/**
* visibility: hidden 元素隐藏
*/
.box {
100px;
height: 100px;
background-color: green;
visibility: hidden;
}
/**
* visibility: hidden 元素显示
*/
.box2 {
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
可运行下看看效果。