實驗室分享 float

2021-10-08 22:41:02 字數 1188 閱讀 8288

實驗室分享–居中對齊

實驗室分享–偽類、偽元素

實驗室分享–display:flex

例子:盒子浮動

邊框浮動

(1)包裹性

例子:

"border:4px solid red;">"border:4px solid orange;float:left;">

從這就能看float的包裹性。已知block元素不指定width的話,預設是100%,一旦讓該div浮動起來,它就會像inline元素一樣產生包裹性,寬度會跟隨內容自適應。如果再加乙個div:和之前一樣,圖3會包裹著浮動元素2

(2)高度欺騙性

例子:高度欺騙性1

我們可以看到,黑色邊框未設定寬度,所以預設為100%,由於圖2加了float,使得該img對包裹它的div有了高度欺騙性,對黑框來說,它的內部沒有內容撐起它,所以黑框的高度為0。

"border:5px solid red;">

"border:5px solid black;">

當在黑框中加上文字時:黑框中有了內容,其高度由文字撐起來。

當設定了黑框的寬度讓其變短,文字依然像流水一樣環繞著浮動元素。

實驗室分享–居中對齊

實驗室分享–偽類、偽元素

實驗室分享–display:flex

實驗室分享 display flex

實驗室分享 居中對齊 實驗室分享 偽類 偽元素 實驗室分享 display flex flex direction flex wrap flex flow 前兩個屬性合起來一起寫 justify content align items align content 1 flex direction 決...

實驗室分享 居中對齊

實驗室分享 居中對齊 實驗室分享 偽類 偽元素 實驗室分享 display flex 1 display flex 這裡用到的是兩個屬性 1 justify content center 定義了專案在主軸上的對齊方式。2 align items center 定義專案在交叉軸上如何對齊。d第一種 c...

雲計算實驗室建設方案分享

大資料 資訊保安 人工智慧等新資訊科技產業發展迅猛,人才極其匱乏,各個本科及職業院校紛紛開設相應的專業方向。但是,絕大多數院校因為師資和積累問題,在專業建設規劃 辦學特色提煉 創新教學模式落地 師資團隊建設 課程體系建設 實訓條件建設等方面存在困難。雲計算實訓教學整體解決方案,包括 雲計算伺服器集群...