手寫乙個柵格布局

雖然有很多框架可以使用柵格布局，但是使用起來需要指定螢幕的大小來做自適應，一長串，希望自己可以手寫乙個，根據指定的class類，例如，我們定義乙個六列的布局，那麼span-2的意思是占用33.33%，佔1/3，但是在中屏上，span-2佔比為50%，在小屏上佔比為100%，根據螢幕大小自適應，不需要我們去指定螢幕了，就方便很多。

首先我們需要乙個包裹容器：

.container

然後定義行，因為裡面的列的布局我們使用float來實現，所以需要在父元素中並清除浮動

.row :before, .row :after

定義列

為了簡潔，我們使用6列即可，設定6列

[class*='span-']

附：

[class*=」col-「]

選擇所有類名中含有」col-「的元素

與此類似的還有：

[class^=」col-「]

選擇所有類名中以」col-「開頭的元素

[class$=」-col」]

選擇所有類名中以」-col」結尾的元素

定義列的多種寬度

.span-1

.span-2

.span-3

.span-4

.span-5

.span-6

常規如此

現在我們開始做響應式布局，利用 css3的media屬性

@media all and (max-width:1440px) 
.span-2
.span-3
.span-4
.span-5
.span-6
.row
.span-2
:last-of-type
.row
.span-5~ .span-1
}@media all and (max-width:1080px) 
.span-2
.span-3
.span-4
.span-5
.span-6
}

我們自己定義的好處是我們可以根據自己的需要來調整自己的柵格的大小

.row .span-2

:last-of-type

最後乙個span-2的大小會變成100%，所以就會有個問題，當一行只有兩個span-2的時候，沒有充滿6列，第二個span-2在中屏上就會變為100%，不與前面的span-2平分，所以在使用的時候要注意，使用的時候，我們要滿足相加之和為6

~(匹配選擇器)

.row
.span-5~ .span-1

~匹配選擇器，b~p匹配所有在b元素之後的同級p元素

所以這裡是span-5之後的span-1會變為100%

我們給容器設定box-sizing：border-box

注意這一屬性只會對padding和border起作用，不包含margin，如果我們想給span設定邊框，只能給span加padding，然後在裡面再定義乙個盒子加border，因為給span加margin的話會影響整個的布局

.container

包裹元素同樣需要設定overflow：hidden，來自適應子元素的高度。

最後我們在定義box盒子來當哦我們的內容盒子

.box

我們在使用我們定義的柵格html結構：

class='container'>
class='row'>
class='span-5'>
class='box'
style='height:200px;'>
dfdfdfsfs
div>
div>
class='span-1'>
class='box'
style='height:200px;'>
dfdfdfsfs
div>
div>
div>
div>

注意：css不能選擇相鄰元素的前乙個元素，會引起回潮

手寫乙個柵格布局

手寫乙個Tomcat

手寫乙個ajax

手寫乙個佇列

手寫乙個柵格布局

手寫乙個Tomcat

手寫乙個ajax

手寫乙個佇列

相關推薦