上一次介紹了css中的div和span標籤和二者在使用中的區別,本文介紹關於顯示模式和顯示模式之間的轉換。
接著div和span,二者引出兩個概念,塊級元素和行內元素。
塊級元素:獨佔一行,如果沒有設定寬高度,那麼預設和父元素一樣寬高,如果設定了寬高,那麼就按照設定來顯示。這個對於的是容器級標籤。
行內元素:不會獨佔一行,如果沒有設定高度和寬度,那麼預設和嗎、內容一樣寬,行內元素是不可以設定寬度和高度的。對於的是文本級標籤。
行內塊級元素:為了能夠讓元素既能夠不獨佔一行,又可以設定寬度和高度,在行內元素中前提高塊級元素,這樣就可以達到設定寬度和高度的目的。
display的常用取值:
block 塊級
inline 行內
inline-block 行內塊級
part1 塊和行內元素 預設顯示結果
make it possible!
nothing is impossible!
除錯結果:
顯示模式之間的轉換:
塊級和行內之間互相轉換位置:
make it possible!
nothing is impossible!
除錯結果:
行內塊元素:
nothing is impossible!
make it possible!
除錯結果:
css的顯示模式
1.在html中所有標籤分為兩類,一類是容器級標籤,另一類是文本級標籤 2.在css中所有標籤分為兩類,一類是塊級元素,另一類是行內元素 1.塊級元素會獨佔一行,而行內元素不會獨佔一行 2.容器級元素 div ul ol dl 文本級元素 p span huis stong ins em del 3...
CSS顯示模式
css顯示模式 塊元素 獨佔一行 高度,寬度,外邊距以及內邊距都能控制 寬度預設是100 是乙個容器及盒子,裡面可以放行內或者塊級元素 行內元素 一行可以顯示多個 寬高無法設定 預設高度是本身內容的寬度 行內元素只能容納文字或行內元素 行內塊元素 寬高可調 一行多個 預設高度是本身內容的寬度 css...
css標籤的顯示模式
塊級元素 block 常見的塊元素,等,最典型的就是div 特點 1 總是從新行開始 2 高度,行高,外邊距以及內邊距都可以控制 3 預設寬度是容器100 行內元素 inline 常見的行內元素,等,最典型的就是特點 1 高度,寬度設定不會顯示效果 2 預設的寬度就是本身內容的寬度 3 和相鄰行內元...