如何區分塊級元素和行內元素

2021-08-20 13:52:56 字數 380 閱讀 3063

塊級元素 :總是以乙個塊的形式表現出來,並和同級的兄弟一次垂直排列,左右撐滿,比如,,總是不會排在同一行,而是和相鄰的垂直排列,簡單來說,就是標準文件流下它會自動換行,並不會擠在一行上.就像櫃檯買票排隊,按照正規流程,應該是自動排隊,並不能擠在一條上在同乙個視窗服務,那不是亂套了嗎?但是特殊情況下還是有的(這個就是靠浮動來實現)

行內元素: 相鄰元素之間橫向排列,到最右端自動折行,比如,,也是運用他們的時候會自動擠到同一行上,除非空間不夠了,才會去下一行.

來看下邊的圖,元素是行內元素,可以看到第乙個span元素和第二個span元素擠在了同一行上了,而元素則自動換行了

行內元素 塊級元素和行內塊級元素

而標籤的屬性是可以轉換的 display inline 轉換為行內元素 display linline block 轉換為行內塊元素 display block 轉換為塊級元素。行內元素 無法設定寬高 margin和padding上下無效,只有左右有效果 總是和相鄰的行內元素在同一行上,預設排列方式...

行內元素 塊級元素和行內塊元素

a 標籤定義鏈結 b 字型加粗 br 換行 i 斜體文字效果 img 在網頁中嵌入 input 輸入框 span 組合文件中的行內元素 small 呈現小號字型效果 big 呈現大號字型效果 sub 定義下標文字 sup 定義上標文字 div 定義文件中的分割槽或節 dl 定義列表 dt 定義列表中...

塊級元素和行內元素

塊元素一般都從新行開始,它可以容納內聯元素和其他塊元素,常見塊元素是段落標籤 p form 這個塊元素比較特殊,它只能用來容納其他塊元素。如果沒有css的作用,塊元素會順序以每次另起一行的方式一直往下排。而有了css以後,我們可以改變這種html的預設布局模式,把塊元素擺放到你想要 的位置上去。而不...