行内、块级以及行内块元素区别

柔情只为你懂 2023-07-03 07:27 16阅读 0赞

#### 块级元素（block） ####

*  常见的块级元素有：

<h1>~<h6>  <p>  <div>  <ul>  <ol>  <li>等

*  块级元素的特点：
    
     *  独占一行
     *  宽度默认是容器（父级宽度）的100%
     *  可以设置宽高
     *  是一个容器及盒子，里面可以放行内或者块级元素。

*  **注意：**
    
     *  只有文字才能组成段落 因此 p 里面不能放块级元素，特别是 p不能放div
     *  同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素

#### 行内元素（inline） ####

*  常见的行内元素有：

<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等

*  行内元素的特点：
    
     *  一行可以显示多个。
     *  高、宽直接设置是无效的。
     *  默认宽度就是它本身内容的宽度。
     *  只能容纳文本或则其他行内元素

*  **注意：**
    
     *  链接里面不能再放链接

#### 行内块元素（inline-block） ####

*  常见的行内块元素有：

<img />、<input />等

*  行内块元素的特点：
    
     *  一行可以显示多个，但是之间会有空白缝隙
     *  可以设置宽高
     *  默认宽度就是它本身内容的宽度。

#### 三种模式区别总结如下： ####

<table> 
 <thead> 
  <tr> 
   <th>元素模式</th> 
   <th>元素排列</th> 
   <th>设置样式</th> 
   <th>默认宽度</th> 
   <th>包含</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>块级元素</td> 
   <td>一行只能放一个块级元素</td> 
   <td>可以设置宽度高度</td> 
   <td>容器的100%</td> 
   <td>容器级可以包含任何标签</td> 
  </tr> 
  <tr> 
   <td>行内元素</td> 
   <td>一行可以放多个行内元素</td> 
   <td>不可以直接设置宽度高度</td> 
   <td>它本身内容的宽度</td> 
   <td>容纳文本或则其他行内元素</td> 
  </tr> 
  <tr> 
   <td>行内块元素</td> 
   <td>一行放多个行内块元素</td> 
   <td>可以设置宽度和高度</td> 
   <td>它本身内容的宽度</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>