CSS中的块级元素、行内元素、行内块元素

1. 块级元素 block

元素呈现“块”状，比较霸道，独占一行，所以叫块盒。可自己定义 width 和 height，可作为其他容器使用，可容纳块级元素和行内元素。

特点：

• 每个块级元素都是独占一行；
• 高度，行高，外边距（margin）以及内边距（padding）都可以控制；
• 元素的宽度如果不设置的话，默认为父元素的宽度（父元素宽度100%）；
• 多个块状元素标签写在一起，默认排列方式为从上至下；

常见的块级元素：

<address>  
 <caption>  
 <dd>      
 <div>     
 <dl>    
 <dt>    
 <fieldset>  
 <form>  
 <h1>        
 <hr>    
 <legend>    
 <li>    
 <noframes>    
 <noscript>    
 <ol>  
 <ul>   
 <p>  
 <pre>   
 <table>     
 <tbody>    
 <td>    
 <tfoot>    
 <th>    
 <thead>   
 <tr>     

2. 行内元素 inline

没有块级元素那么自由，不能自己设置宽（width）和高（height），高度宽度又包含的内容的大小决定。

特点：

• 不会独占一行，相邻的行内元素会排列在同一行里，排不下自动换行
• 高宽无效，对外边距（margin）和内边距（padding）仅设置左右方向有效 上下无效；
• 元素的宽度由内容撑开
• 行内元素中不能放块级元素

   常见的块级元素：

 <a>    
 <abbr>     
 <acronym>     
 <b>     
 <bdo>    
 <big>    
 <br>     
 <cite>     
 <code>   
 <dfn>     
 <em>    
 <i>     
 <kbd>     
 <label>    
 <q>     
 <samp>    
 <select> 
 <small>   
 <span>     
 <strong>
 <sub>    
 <sup>   
 <textarea>    
 <tt>   
 <var>  

3. 行内块级元素 inline-block

同时有两方特点，很自由，自己设置宽高，不独占一行

特点：

• 高度、行高、外边距以及内边距都可以控制；
• 默认宽度就是它本身内容的宽度，不独占一行，但是之间会有空白缝隙，设置它上一级的 font-size 为 0，会消除间隙；

   常见的行块级元素： 

<button> 
<input>   
<textarea> 
<select> 
<img>

他们用display改变：

display：block ：定义元素为块级元素

display : inline ：定义元素为行内元素

display：inline-block：定义元素为行内块级元素