HTML 行內元素和塊狀元素的理解

1 行內元素和塊級元素的定義

任何HTML (超文本標記語言) 元素都有其默認的display屬性，大多數都是行內元素（inline）或塊級元素（block）。一個行內元素只占據它對應標簽的邊框所包含的空間，而一個塊級元素占據其父元素（容器）的整個空間，因此創建了一個“塊”。

2 行內元素和塊級元素的區別

內容

一般情況下，行內元素只能包含數據和其他行內元素。而塊級元素可以包含行內元素和其他塊級元素。這種結構上的包含繼承區別可以使塊級元素創建比行內元素更”大型“的結構。

格式

默認情況下，行內元素不會以新行開始，而塊級元素會新起一行。

常見元素

行內元素：<b>、<span>、<i><small>、<big>、<img>、<button>、<input>、<lable>、<select>、<textarea>等

塊級元素：<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<div>、<p>、<address>、<acticle>、<ol>、<ul>、<output>、<form>（比較特殊，它只能用來容納其他塊元素） 、<table>、<canvas>、<footer>等

用法

1、一般情況下，行內元素設置width和height屬性無效，塊級元素可以設置width和height屬性。（注意，塊級元素設置了width寬度屬性后仍然是獨占一行的）

2、塊級元素可以設置margin 和 padding.  行內元素的水平方向的padding-left,padding-right,margin-left,margin-right 都產生邊距效果，但是豎直方向的padding-top,padding-bottom,margin-top,margin-bottom都不會產生邊距效果。（水平方向有效，豎直方向無效）

3 行內元素和塊級元素的相互轉化

display: none; 不顯示該元素

display: block; 可將行內元素轉化為塊級元素

display: inline; 可將塊級元素轉化為行內元素

display: inline-block; 轉化為行內塊級元素（即不默認換行，但是可以設置width、height、margin、padding等屬性）

此外，還可以通過給行內元素設置float:left/right、positon:absolute/fixed屬性，也可以使行內元素轉化為塊級元素，但是不默認繼承父級元素的寬度，可以設置width、height、margin、padding等屬性。但是替換時，還需要注意這個方法轉換為塊級元素只是float與position的副作用，他們本身的作用還會干擾布局效果。

<div class="child">
    <span class="test">行內元素</span>
 </div>
 <div class="child">塊級元素</div>

.test{
  background-color: #000000;
  color: #FFFFFF;
  float:left;
  width:90px;
}
.child{
  background-color: #125645;
  width: 150px;
  height: 40px;
  color: #FFFFFF;
  margin: 10px;
  overflow: hidden;
  display: inline-block;
}

參考：https://www.jianshu.com/p/274614a078f3

　　　https://blog.csdn.net/liuying1802028915/article/details/78222833