块级元素(block element)
块元素是一个元素，占用了全部宽度，在前后都是换行符。特点为：
- 总是在新行上开始；
- 高度，行高以及外边距和内边距都可控制；
- 宽度缺省是它的容器的100%，除非设定一个宽度。
- 它可以容纳内联元素和其他块元素
常见块级元素：
<div>, <center>, <form>, <h1>...<h6>, <hr>,<p>, <table>
内联元素(inline element)
内联元素只需要必要的宽度，不强制换行。特点为：
- 和其他元素都在一行上；
- 高，行高及外边距和内边距不可改变；
- 宽度就是它的文字或图片的宽度，不可改变
- 内联元素只能容纳文本或者其他内联元素
内联元素一般都是基于语义级(semantic)的基本元素，它只能容纳文本或者其他内联元素，通常被包括在块元素中使用，常见内联元素有:
<a>, <b>, <br>, <button>, <em>, <i>, <img>, <input>, <label>, <select>, <span>
对行内元素，需要注意如下
设置宽度width 无效。
设置高度height 无效，可以通过line-height来设置。
设置margin 只有左右margin有效，上下无效。
设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。
| 块级元素 | 内联元素 |
|---|---|
| 总是在新行上开始 | 和其他元素都在一行上 |
| 高度，行高以及外边框和内边距都可以控制 | 高，行高及外边距和内边距不可改变 |
| 宽度缺省是它的容器的100%，除非设定一个宽度 | 宽度就是它的文字或图片的宽度，不可改变 |
| 它可以容纳内联元素和其他块元素 | 内联元素只能容纳文本或者其他内联元素 |
当加入了css控制以后，块元素和内联元素的这种属性差异就不成为差异了。比如，我们完全可以把内联元素加上display:block这样的属性，让它也有每次都从新行开始的属性，即成为块元素。
同样我们可以把块元素加上display:inline这样的属性，让它也在一行上排列。
注意
- 一个内联元素设置为display:block是不允许有它内部的嵌套块元素。
- CSS中还有一个visibility 属性，通常其值被设置成 visible 或 hidden。
visibility: hidden 相当于 display:none，能把元素隐藏起来，但两者的区别在于：- display:none 元素不再占用空间。
- visibility: hidden 使元素在网页上不可见，但仍占用空间。
- "display: block;"比较常用于<a><span>这两个标签——因为这两个标签非块元素，如果不用"display: block;"定义一下，那么定义width、height等和长宽相关的css属性时会发现完全不生效。
Reference
百度百科：块元素
菜鸟教程：CSS Display(显示) 与 Visibility（可见性）
CSDN：什么情况需要用到"display: block;"
网友评论