display屬性(重點)
阿新 • • 發佈:2019-01-30
圖片 元素 文字 css 分類 除了 屬性 知識 寬度
行內元素和塊級元素的區別:(非常重要)
行內元素:
- 與其他行內元素並排;
- 不能設置寬、高。默認的寬度,就是文字的寬度。
塊級元素:
- 霸占一行,不能與其他任何元素並列;
- 能接受寬、高。如果不設置寬度,那麽寬度將默認變為父親的100%。
塊級元素和行內元素的分類:
在以前的HTML知識中,我們已經將標簽分過類,當時分為了:文本級、容器級。
從HTML的角度來講,標簽分為:
- 文本級標簽:p、span、a、b、i、u、em。
- 容器級標簽:div、h系列、li、dt、dd。
PS:為甚麽說p是文本級標簽呢?因為p裏面只能放文字&圖片&表單元素,p裏面不能放h和ul,p裏面也不能放p。
現在,從CSS的角度講,CSS的分類和上面的很像,就p不一樣:
-
行內元素:除了p之外,所有的文本級標簽,都是行內元素。p是個文本級,但是是個塊級元素。
-
塊級元素:所有的容器級標簽都是塊級元素,還有p標簽。
塊級元素和行內元素的相互轉換
我們可以通過display
屬性將塊級元素和行內元素進行相互轉換。display即“顯示模式”。
塊級元素可以轉換為行內元素:
一旦,給一個塊級元素(比如div)設置:
display:
inline;
那麽,這個標簽將立即變為行內元素,此時它和一個span無異。inline就是“行內”。也就是說:
- 此時這個div不能設置寬度、高度;
- 此時這個div可以和別人並排了
行內元素轉換為塊級元素:
同樣的道理,一旦給一個行內元素(比如span)設置:
display: block;
那麽,這個標簽將立即變為塊級元素,此時它和一個div無異。block”是“塊”的意思。也就是說:
- 此時這個span能夠設置寬度、高度
- 此時這個span必須霸占一行了,別人無法和他並排
- 如果不設置寬度,將撐滿父親
PS:標準流裏面的限制非常多,導致很多頁面效果無法實現。如果我們現在就要並排、並且就要設置寬高,那該怎麽辦呢?辦法是:移民!脫離標準流!
css中一共有三種手段,使一個元素脫離標準文檔流:
- (1)浮動
- (2)絕對定位
- (3)固定定位
display屬性(重點)