當前位置：
首頁 >
display:inline display:block
發布時間：2023/12/10
46
豆豆
生活随笔
收集整理的這篇文章主要介紹了
display:inline display:block
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
display:inline; 元素會被顯示為內聯元素，元素前后沒有換行符.
display:block 元素將顯示為塊級元素，此元素前后會帶有換行符.
<span style="display:block">11111111</span><span>2222222222222</span>
按照常理來說 上面二個span應該是一行顯示，因為span本來就是內聯元素.(相當于天生就有display:inline屬性一樣);可是給其中一個span加了display:block后。加過display:block的span他就會獨占一行。
2.display:inline
<div style="display:inline">11111111</div><div style="display:inline">22222222</div>
常理，上面代碼在瀏覽器中應該是二行，但是加了display:inline后，就會顯示在一行
display:block 元素將顯示為塊級元素，此元素前后會帶有換行符.
舉例：
<span style="display:block">11111111</span><span>2222222222222</span>
按照常理來說 上面二個span應該是一行顯示，因為span本來就是內聯元素.(相當于天生就有display:inline屬性一樣);可是給其中一個span加了display:block后。加過display:block的span他就會獨占一行。
2.display:inline
<div style="display:inline">11111111</div><div style="display:inline">22222222</div>
常理，上面代碼在瀏覽器中應該是二行，但是加了display:inline后，就會顯示在一行
總結
以上是生活随笔為你收集整理的display:inline display:block的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 三孩纳入个人所得税是什么意思
- 下一篇： 深入浅出MFC文档/视图架构之文档