HTML之行内元素和块级元素的区别有哪些？

背景

在css基础当中，我们往往会遇到块元素和行内元素。在实际开发中，会经常把他们弄混淆，而且很难记住。那么行内元素和块级元素的区别有哪些？下面我们就来说说

常见的行内元素

<span>、<a>、<br>、<b>、<strong>、<img>、<input>、<textarea>、<select>、<sup>、<sub>、<em>、<del>

块级元素

<address>、<center>、<h1>~<h6>、<hr>、<p>、<pre>、<ul>、<ol>、<dl>、<table>、<div>、<form>

区别

 行内元素

• 设置宽高无效，宽高由字体决定
• margin-left和margin-right设置有效，padding现在浏览器可以设置(以前浏览器设置无效)
• 元素在一行显示，不会自动换行
• 可以设置display: inline-block来支持设置自定义宽高

块级元素

• 可以设置宽高，margin，padding
• 会自动换行，相当于display:block
• 多个块状，默认排列从上到下
• 如果不设置宽度，那么宽度将默认变为父级的100%,高度是内容高度

相互转换

我们可以通过display属性将块级元素(比如div)和行内元素进行相互转换(display：inline)

• 那么这个标签将变为行内元素，即：
• 此时这个div将不能设置宽度和高度了。
• 此时这个div可以和其他行内元素并排了。

同样的到了我们也可以用display将行内元素(比如span)转行成块级元素(display：block)

• 那么这个span标签将变为块级标签，即：
• 此时这个span能够设置宽度，高度。
• 此时这个span必须独占一行，其他元素无法与之并排。
• 如果不设置宽度，将占满父级。

例子

1.块级元素

<div style="background-color: burlywood;width: 100%;height: 200px;">
   <div style="background-color: aquamarine;width: 200px;height: 100px;">我是一个div元素，我设置了高度100px,宽度200px</div>
</div>

<div style="background-color: burlywood;width: 100%;height:200px;margin-top: 20px;">
  <div style="background-color: aquamarine;height: 100px;">我是一个div元素，高度100px,没有设置宽度，那么相当于父布局宽度</div>
</div>

<div style="background-color: burlywood;width: 100%;height:200px;margin-top: 20px;">
  <div style="background-color: aquamarine;height: 100px;display: inline;">我是一个div元素，高度100px,没有设置宽度，但是dispaly是inline，所以设置不起效</div>
</div>

2.行内元素

<div style="background-color: burlywood;width: 100%;height:150px;margin-top: 20px;">
  <span style="background-color: aquamarine; width: 200px;height: 200px;margin: 20px;padding: 20px;">我是一个行内元素，
    设置了宽高不起效，margin左右有效，padding有效</span>
</div> 

<div style="background-color: burlywood;width: 100%;height:150px;margin-top: 20px;">
  <span style="background-color: aquamarine;display: block; width: 200px;height: 100px;margin: 20px;padding: 20px;">我是一个行内元素，
    设置了dispaly:block,宽高起效，margin左右有效，padding有效</span>
</div> 

<div style="background-color: burlywood;width: 100%;height:150px;margin-top: 20px;">
  <span style="background-color: aquamarine;display:inline-block; width: 200px;height: 100px;margin: 20px;padding: 20px;">我是一个行内元素，
    设置了dispaly:block,宽高起效，margin有效，padding有效,但是个block有点差别</span>
</div> 

<div style="background-color: burlywood;width: 100%;height:150px;margin-top: 20px;">
  <span style="background-color: aquamarine;display:inline-block; ">我是一个行内元素，</span>
  <span style="background-color: rgb(221, 112, 10);display:inline-block; ">我也是个行内元素，</span>
</div> 

 

注意：如果在弹性布局里面，可能表现形式会有差别