block块级元素、inline行内元素和inline-block盒模型

一、block的特点

       ① 总在新的一行开始（换行）

       ② 行高以及顶和底边距离都可控制

       ③ 如果用户不设置宽度，则会默认为整个容器的100%，设置就按设置的值显示

       ④ 常用的块元素：<div><p><h1><from><ul><li>等

a{
   width: 100px;
   height: 20px;
}

   <p>
        <a href="#">管理应用</a>
	<a href="#">财务应用</a>
	<a href="#">物流应用</a>
	<a href="#">教育应用</a>
	<a href="#">计算机应用</a>
  </p>

此时的效果为：

                  

因为<a>标签是行内元素，若加上display属性：

a{
   display:block;
   width: 100px;
   height: 20px;
}

此时的效果为：

                   

二、inline的特点

      ① 和其他元素都在一行上（不换行）

      ② 行高以及顶和底边距不可改变

      ③ 宽度就是它的文字或者图片的宽度，不可改变

      ④ 常用的行内元素：<span><a><label><input><img><strong>等       

<p>轻轻的我走了，正如我轻轻地来</p>
<p>我挥一挥衣袖，不带走一片云彩</p>

此时的效果为：

                 

因为<p>标签是块内元素，所以加上display：inline；则有如下效果：

                  

三、inline-block的特点

       ① 和其它元素在一行上（不换行）

       ② 行高以及顶和底边距离都可控制

       ③ 可以设置宽和高

       ④ 默认它们的底部都将会在同一水平线上，为了让顶端对齐，可使用vertical-align:top;