HTML行內元素和塊級元素

 

---

1 常見的行內元素和塊級元素

	特點	注意
塊級元素 div h1~h6 p ul ol li	比較霸道；自己獨佔一行 高度，寬度、外邊距以及內邊距都可以控制 寬度默認是容器（父級寬度）的100% 是一個容器及盒子，裏面可以放行內或者塊級元素	文字類的元素內不能使用塊級元素；<p> 標籤主要用於存放文字，因此 <p> 裏面不能放塊級元素，特別是不能放<div>；同理<h1>~<h6>等都是文字類塊級標籤，裏面也不能放其他塊級元素
行內(內聯)元素 span a strong b em i del s ins u	相鄰行內元素在一行上，一行可以顯示多個 高和寬直接設置是無效的 默認寬度就是它本身內容的寬度 行內元素只能容納文本或其他行內元素	鏈接裏面不能再放鏈接；特殊情況鏈接 <a> 裏面可以放塊級元素，但是給 <a> 轉換一下塊級模式最安全
行內塊元素 img input td button	和相鄰行內元素（行內塊）在一行上，但是他們之間會有空白縫隙；一行可以顯示多個（行內元素特點） 默認寬度就是它本身內容的寬度（行內元素特點） 高度，行高、外邊距以及內邊距都可以控制（塊級元素特點）

元素模式	元素排列	設置樣式	默認寬度	包含
塊級元素	一行只能放一個塊級元素	可以設置寬度高度	容器的100%	容器級可以包含任何標籤
行內元素	一行可以放多個行內元素	不可以直接設置寬度高度	它本身內容的寬度	容納文本或則其他行內元素
行內塊元素	一行放多個行內塊元素	可以設置寬度和高度	它本身內容的寬度

• 轉換爲塊元素 : display:block
• 轉換爲行內元素 : display:inline
• 轉換爲行內塊 : display: inline-block

測試塊級元素、行內元素、行內塊元素

<!--塊級-->
<div>div</div>
<div>div</div>
<hr>
<!--行內-->
<span>1</span>
<span>1</span>
<hr>
<!--行內塊-->
<button>button</button>
<button>button</button>

<style>
    div {
        height: 50px;
        width: 100px;
        background-color: pink;
    }
    span {
        height: 50px;
        width: 100px;
        background-color: pink;
    }
    button {
        height: 50px;
        width: 100px;
        background-color: pink;
    }
</style>

 

 

https://blog.csdn.net/weixin_44307807/article/details/85872703