<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a {
background-color: #bfa;
/*
将一个内联元素变成块元素
通过display样式可以修改元素的类型
可选值：
inline：可以将一个元素设置为内联元素显示
block：可以将一个元素设置为块元素显示
inline-block：讲一个元素转换为行内块元素
- 可以使一个元素既有行内元素的特点又有块元素的特点
既可以设置宽高，又不会独占一行 例如 img
none：不显示元素，并且元素不会在页面中继续占有位子
*/
display: inline-block;
width: 500px;
height: 500px;
}
.box {
width: 100px;
height: 100px;
background-color: yellow;
/*
使用该方式隐藏的元素，不会在页面中显示，并且不会在占据页面的位子
*/
/* display: none; */
/*
visibility
- 可以用来设置元素的隐藏和显示的状态
- 可选值：
visible 默认值，元素默认会在页面显示
hidden 元素会隐藏不显示
使用visibility:hidden；隐藏的元素虽然不会在页面中显示，但是他的位子会依然保持
*/
visibility: hidden;
}
</style>
</head>
<div class="box"></div>
<a href="#">我是一个大大的超链接</a>
<span>hello</span>
</html>
网友评论