CSS3 box學習筆記

CSS3提供的盒子樣式可實現對盒子內部元素的彈性佈局,我們就不用使用float或者display:inline來使塊元素橫向排布(box-orient可以做到),或者計算每個塊的寬度or百分比來實現均分(box-flex可做到)。so,大膽地用吧妹紙。對父元素設置display:box,可對內部的塊級子元素進行佈局,此時,內部的元素按照內聯元素的排列方式,但可以設置寬和高。對父盒子使用如下的樣式:

先來說一下box的特點吧:
1.當父元素設置爲display:-webkit-box後,內部的元素默認是橫向排布;且盒子的寬度是由內容多少來決定的,除非設置了一個寬度。基本父元素設置-webkit-box-orient:vertical,子盒子也不是佔滿整行。
2.當不對子和子的高度做任何處理時,如果子盒子的排列方式是橫向的,則其高度是填充滿父元素的高度(因爲-webkit-box-align:stretch是默認值)。當縱向排布的時候是由內容多少來撐開高度。
3.只要子盒子中有一個是塊級元素,則通過父盒子設置下列的屬性都是有效的,但是在子盒子自身上設置的屬性flex是隻針對塊級盒子的。
因此,如果想要使用box來進行佈局,最好就是子元素都是塊級元素。

1.box-orient

規定了內部子元素的排列方式,具體有

  • vertical
  • horizontal
  • inline-axis
  • block-axis

2.box-align

規定了內部子元素在垂直方向上的對齊方式:

  • center:即垂直居中於父盒子中
  • start:從父元素頂部開始排列
  • end:對齊父元素底部
  • stretch:縱向拉伸填滿整個父元素(默認)
  • baseline
    除了stretch是填滿整個父元素高度外,其他都是由子盒子自身的高度決定。

3.box-pack

在水平方向上的對齊方式
start:左對齊
center:實現子元素在水平方向上居中對齊
justify:兩端對齊
end:右對齊

說明:box-align和box-pack對齊方式的解釋都和box-orient的設置有關。

4.box-direction

子盒子的排列順序。

5.box-sizing

設置width都包括了盒子的哪些部分:

  • content-box:width=內容區
  • border-box:width=內容區+padding+border

6.box-flex

這個屬性要在子元素中設置,用來分配父元素的剩餘寬度和高度(當設置爲vertical排布時),設置這個屬性必須由父元素設置了display:box纔有用。
剩餘寬度的理解:

父容器寬度-子容器固定寬度(優先)/子容器內容寬度-子容器margin&border&padding

box-align和box-pack對內聯元素也起作用,而box-flex對內聯元素不管用。

發現一個奇怪的現象,當img和input標籤放一起,使用box-align:center無法對input垂直居中,而當對img設置vertical-align:middle後就可以了。艾瑪,應該是vertical-align的關係有關,而不是由box-align控制的。

發佈了67 篇原創文章 · 獲贊 16 · 訪問量 9萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章