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