CSS——display（元素显示）

 display是可以更改默认的元素类型，默认的类型一般有：

1. 块级元素（block element）

特点：

• 块级元素总是从新行开始，并占据可用的全部宽度。
• <div>
• <h1> - <h6>
• <p>
• <form>
• <header>
• <footer>
• <section>

2. 行内元素（inline element）

特点：

• 行内元素不从新行开始，仅占据所需的宽度
• <span>
• <a>
• <img>

3. inline-block

• 允许在元素上设置宽度和高度
• 如果设置了inline-block，将保留上下外边距/内边距，而display-inline则不会
• inline-block 在元素之后不添加换行符，因此该元素可以位于其他元素旁边

4. 使用display转换元素

li {
  display: inline;
}

span {
  display: block;
}

• inline（转换成行内元素）
• block（转换成块级元素）
• inline-block（转换成行内块元素）
• none（不进行显示）

dispaly:none 和 visibility:hidden 的区别，前者不会占用相关的。而后者是隐藏后也会占用相应的空间，只是不显示而已。