块级元素与行级元素

块级元素
每个块级元素都是独自占一行，其后的元素也只能另起一行，并不能两个元素共用一行。默认情况下，其宽度自动填满其父元素宽度
元素的高度（height）、宽度（width）、行高和顶底边距（margin、padding属性）都是可以设置的 
对应于display:block
常见的块级元素：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<li>、<dl>、<table>、<address>、<blockquote> 、<form>、<hr>、<pre>、

行级元素（内联元素）
相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化
元素的高度（height）、宽度（width）及顶部和底部边距不可设置
行内元素起边距作用的只有margin-left、margin-right、padding-left、padding-right，其它属性不会起边距效果
元素的宽度就是它包含的文字、图片的宽度，不可改变
对应于display:inline

行级-块级元素
如果又想设置高度、宽度、行高以及顶和底边距，又想元素处于一行，该怎么办呢？
此时就可以用display:inline-block将元素设置为行级-块级元素。