display:
我們不能為行內(nèi)元素設(shè)置width君编、height、margin-top和margin-bottom川慌。
我們可以通過修改display來修改元素的性質(zhì)吃嘿。
可選值:
-block:設(shè)置元素為塊元素
-inline:設(shè)置元素為行內(nèi)元素
-inline-block:設(shè)置元素為行內(nèi)塊元素
-none:隱藏元素
visibility
visibility屬性主要用于元素是否可見祠乃。
和display不同,使用visibility隱藏一個(gè)元素兑燥,隱藏后其在文檔所占的位置會依然保持亮瓷,不會被其他元素覆蓋。
可選值:
-visible:可見的
-hidden:隱藏的
overflow
當(dāng)相關(guān)標(biāo)簽里面的內(nèi)容超出了樣式的寬度和高度時(shí)降瞳,就會發(fā)生一些奇怪的事情嘱支,瀏覽器會讓內(nèi)容溢出盒子。
可以通過overflow來控制內(nèi)容溢出的情況挣饥。
可選值:
-visible:默認(rèn)值
-scroll:添加滾動條
-auto:根據(jù)需要添加滾動條
文檔流
文檔流指的是文檔中可現(xiàn)實(shí)的對象在排列時(shí)所占用的位置除师。
將窗口自上而下分為一行行,并在每行中按從左到右的順序排放元素扔枫,即為文檔流汛聚。
也就是說在文檔流中元素默認(rèn)會緊貼到上一個(gè)元素的右邊,如果右邊不足以放下元素短荐,元素則會另起一行倚舀,在新的一行中繼續(xù)從左至右擺放。
這樣一來每一個(gè)元素都會另起一行忍宋,那么我們?nèi)绻朐谖臋n流中進(jìn)行布局就會變得比較麻煩痕貌。
浮動
所謂的浮動指的是使元素脫離原來的文本流,在父元素中浮動起來讶踪。
浮動使用float屬性芯侥。
可選值:
-none:不浮動
-left:向左浮動
-right:向右浮動
塊級元素就行內(nèi)元素都可以浮動,當(dāng)一個(gè)行內(nèi)元素浮動以后將會自動變?yōu)橐粋€(gè)塊級元素乳讥。
當(dāng)一個(gè)塊級元素浮動以后柱查,寬度會默認(rèn)被內(nèi)容撐開,所以當(dāng)漂浮一個(gè)塊級元素時(shí)我們都會為其指定一個(gè)寬度云石。
當(dāng)一個(gè)元素浮動以后唉工,其下方的元素會上移。元素中的內(nèi)容將會圍繞在元素的周圍汹忠。
浮動會使元素完全脫離文本流淋硝,也就是不再文檔中在占用位置。
元素設(shè)置浮動以后宽菜,會一直向上漂浮直到遇到父元素的邊界或者其他浮動元素谣膳。
元素浮動以后即完全脫離文本流,這時(shí)不會再影響父元素的高度铅乡。也就是浮動元素不會撐開父元素继谚。
浮動元素默認(rèn)會變?yōu)閴K元素,即使設(shè)置display:inline以后其依然是個(gè)塊元素阵幸。