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來進行布局，最好就是子元素都是塊級元素。
規定了內部子元素的排列方式，具體有
規定了內部子元素在垂直方向上的對齊方式：
在水平方向上的對齊方式
start：左對齊
center：實現子元素在水平方向上居中對齊
justify：兩端對齊
end：右對齊
說明：box-align和box-pack對齊方式的解釋都和box-orient的設定有關。
子盒子的排列順序。
設定width都包括了盒子的哪些部分：
這個屬性要在子元素中設定，用來分配父元素的剩餘寬度和高度（當設定為vertical排布時），設定這個屬性必須由父元素設定了display：box才有用。
剩餘寬度的理解：
父容器寬度-子容器固定寬度（優先）/子容器內容寬度-子容器margin&border&paddingbox-align和box-pack對內聯元素也起作用，而box-flex對內聯元素不管用。
發現乙個奇怪的現象，當img和input標籤放一起，使用box-align:center無法對input垂直居中，而當對img設定vertical-align:middle後就可以了。艾瑪，應該是vertical-align的關係有關，而不是由box-align控制的。
css學習筆記 3
標籤按照規定預設方式排列 多個塊級元素同行顯示 選擇器 div 向一邊移動直到左邊緣或右邊緣觸及包含塊或另乙個浮動框 浮動會脫離標準流 多盒子設定浮動，按屬性值一行內顯示並且頂端對齊排列 浮動元素會有行內塊特性 浮動的盒子只影響後面的標準流 最初產生是為了做文字環繞效果 div乙個盒子在盒子內隨意定...
css3學習筆記
1.為什麼分許多模組進行管理？為了避免產生瀏覽器對於某個模組支援不完全的情況。2.使用元素的class屬性的缺點 第一，class屬性本身沒有語義，褚翠是用來為css樣式服務的，屬於多餘屬性。第二，使用屬性的話，並沒有把樣式與元素繫結起來，針對同乙個class屬性文字框，下拉框，按鈕都可使用。這樣很...
CSS3學習筆記
一.選擇符 二.屬性 溢位隱藏 div4 p文字陰影 text shadow 2px 1px rgba 255,255,255,1 圓角效果 border radius邊框陰影 box shadow 2px 2px 5px 5px inset 內陰影透明度 div for ie8 and earli...