显示
CSS的display属性指定了HTML元素的显示方式，visibility属性指定一个元素应可见还是隐藏。
display属性常用值：
- block：声明一个元素以块级元素显示，块级元素前后带有换行符。
- inline：声明一个元素以内联元素显示，行级元素宽高属性不可用。
- inline-block：具有行级元素的特点，但是宽高可以设置，比如
<img>标签。 - flex：元素以弹性元素容器显示，CSS3新增属性。
- none：元素不显示在文档流中，且不会占用原来的空间。
visibility属性值：
- hidden：元素在浏览器渲染层隐藏，但元素依然会占用原来的空间。
- visible：元素按正常的模式渲染。
元素隐藏
隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。这两种方法会产生不同的结果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
<style>
</style>
</head>
<body>
<h1>这一行正常显示的标题</h1>
<h1 style= "display: none;">隐藏元素且不占用空间</h1>
<h1>这一行正常显示的标题</h1>
<h1 style= "visibility: hidden;">隐藏元素但占用空间</h1>
<h1>这一行正常显示的标题</h1>
</body>
</html>
块级元素
块级元素总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示。 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制。 常见的块级元素：address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr, ol , p , pre , table , ul , li。块级元素的display属性默认block，修改其默认值可以改变其原来的显示特性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
<style>
</style>
</head>
<body>
<h1 style="display: inline;">这一行正常显示的标题</h1>
<h1 style="display: inline;">这一行正常显示的标题</h1>
<h1 style="display: inline;">这一行正常显示的标题</h1>
</body>
</html>
内联元素
内联元素只需要必要的宽度（宽度由内容撑开），不强制换行。常用的内联元素：a , code , em , i , img , input , label , q , select , small , span ,strong , sub , sup ,textarea , tt , u 。通过修改其display属性也能改变显示特性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
<style>
</style>
</head>
<body>
<span style="display:block;">这是一个span元素</span>
<span style="display:block;">这是一个span元素</span>
<span style="display:block;">这是一个span元素</span>
</body>
</html>
注意：变更元素的显示类型先看该元素是如何显示，它是什么样的元素。
网友评论