display可以控制標簽的顯示模式。
display:none | inline | block |inline-block
繼承性:無
display值的解釋:
none :此元素不被顯示,在文檔中被移除。
block :此元素按塊級元素顯示:前后帶換行符,自己占一行。內聯元素 →塊元素
inline :此元素按內聯元素顯示:1個挨著1個。塊元素→ 內聯元素
inline-block:按行內標簽進行排版,但是可以設置寬高,而且高度可以影響行高(以后再詳細講)。
案例1: display改變標簽的模式,行內轉塊級,塊級轉行內。
案例2:通過CSS隱藏HTML標簽
通過設置Display為none,那么可以讓這整個標簽在頁面中移除掉。
對比一下:
/*display:none;*/ /*直接把當前標簽從頁面中直接移除了,不影響頁面的布局*/
visibility:hidden; /*這個只是不顯示,但還是占用頁面的空間*/
案例3:行內塊元素設置
寬高 邊距 獨占行
行內元素: X 左右邊距 不獨占
塊級元素: √ 上下左右 獨占
行內塊元素: √ 左右 不獨占
行內元素不能設置寬高,只能通過他的內容來撐開他的寬度和高度。如果你設置了寬高是不會影響行內元素的顯示的。
新聞熱點
疑難解答