完成css3的盒模型流式布局事例分享
在進修css3的過程中，發現一些新界說的內容和屬性老是一知半解，無法很好的把握，之后就進修做這個流掉結構，發現若是運用好很輕易完當作比力紀律的盒子結構，所以這里分享一下本身做流式結構的過程；
東西/原料
- 電腦
- Sublime text 2
方式/步調
- 1
既然是紀律的節制盒子模子，那么年夜量的 div 是不錯的例子應用 元素，初始做的時辰，就分為了 年夜 中 小，由中 div 作為父元素容器，之后節制下面的子元素 div 實現結果；
- 2
我們先節制 年夜 div 的樣式，完當作根本的頁面結構，不僅要有用果，必然的美不雅也是需要的，如圖二，就是我們存放和展示 流式結構 的容器；樣式代碼可以看圖一；
- 3
這里 span 標簽零丁拿出來是為做標識表記標幟，三個中 div 中的 小 div 個數分歧，以span作為距離和標識表記標幟
- 4
然后我們節制 中 div ，需要的樣式就不做詮釋了；
display：flex；將元素作為彈性伸縮盒；
flex-flow;伸縮流偏向與換行；
align-content;多行子項在容器內垂直對齊體例；
- 5
節制 小 div，高度 height，邊框 border，布景色 background-color；
關頭的
box-sizing：border；（ 感受就是把寬度和高度設置為不異的數值，可是還有良多細節，大師最好查資料）
flex：0 0 25%；（節制該元素的伸縮性）
注重事項
- 僅作分享；
- 發表于 2018-04-10 00:00
- 閱讀 ( 1067 )
- 分類：電腦網絡
admin
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章