好程式設計師web前端分享css3彈性盒
box-sizing
box-sizing 屬性允許您以特定的方式定義匹配某個區域的特定元素。
box-sizing
box-sizing 屬性允許您以特定的方式定義匹配某個區域的特定元素。
border-box
為元素設定的寬度和高度決定了元素的邊框盒。
就是說，為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。
通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。
布局的傳統解決方案，基於盒模型，依賴 display 屬性 + position屬性 + float屬性。它對於那些特殊布局非常不方便，比如，垂直居中就不容易實現。
flex 是 flexible box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。
說明：flex： 將物件作為彈性伸縮盒顯示
inline-flex：將物件作為內聯塊級彈性伸縮盒顯示
設定為彈性盒（父元素新增）
flex-direction (主軸排列方向)
說明： 順序指定了彈性子元素在父容器中的位置
row 預設橫向一行內排列
row-reverse：反轉橫向排列（右對齊，從後往前排，最後一項排在最前面。
column：縱向排列。
column-reverse：反轉縱向排列，從下往上排，最後一項排在最上面
說明：內容對齊（justify-content）屬性應用在彈性容器上，把彈性項沿著彈性容器的主軸線（main axis）對齊
■ flex-start預設，頂端對齊
■ flex-end末端對齊
■ center居中對齊
■ space-between兩端對齊，中間自動分配
■ space-around自動分配距離
說明：該屬性控制flex容器是單行或者多行，同時橫軸的方向決定了新行堆疊的方向。
nowrap：flex容器為單行。該情況下flex子項可能會溢位容器
wrap：flex容器為多行。該情況下flex子項溢位的部分會被放置到新行，子項內部會發生斷行
wrap-reverse：反轉 wrap 排列。
說明：側軸對齊方式
flex-start：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
flex-end：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
center：彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢位相同的長度）。
baseline：如彈性盒子元素的行內軸與側軸為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對齊。
stretch：預設值。專案被拉伸以適應容器。
說明：當伸縮容器的側軸還有多餘空間時，本屬性可以用來調整「伸縮行」在伸縮容器裡的對齊方式，這與調整伸縮專案在主軸上對齊方式的 <' justify-content'> 屬性類似。請注意本屬性在只有一行的伸縮容器上沒有效果。
■ flex-start沒有行間距
■ flex-end底對齊沒有行間距
■ center居中沒有行間距
■ space-between兩端對齊，中間自動分配
■ space-around自動分配距離
■ stretch 預設值。專案被拉伸以適應容器。
說明：align-self 屬性規定靈活容器內被選中專案的對齊方式。
注意：align-self 屬性可重寫靈活容器的 align-items 屬性。
auto 預設值。元素繼承了它的父容器的 align-items 屬性。如果沒有父容器則 為 "stretch"。
stretch 元素被拉伸以適應容器。
center 元素位於容器的中心。
flex-start 元素位於容器的開頭。
flex-end 元素位於容器的結尾。
flex-grow
定義專案的放大比例，預設為0，即如果存在剩餘空間也不放大
flex-shrink
定義了專案的縮小比例，預設為1，即如果空間不足該專案將縮小。負值對該屬性無效。
收縮量的計算方式：（元素寬度*收縮比例/元素*收比例 相加）*溢位寬度
flex-basis
專案的長度
說明：復合屬性。設定或檢索彈性盒模型物件的子元素如何分配空間。
縮寫「flex: 1」, 則其計算值為「1 1 %」
縮寫「flex: auto」, 則其計算值為「1 1 auto」
flex: none」, 則其計算值為「0 0 auto」
flex: 0 auto」或者「flex: initial」, 則其計算值為「0 1 auto」，即「flex」初始值
說明：number排序優先順序，數字越大越往後排，預設為0，支援負數。
好程式設計師web前端分享CSS3 邊框
好程式設計師web前端分享css3 邊框，通過 css3，您能夠建立圓角邊框，向矩形新增陰影，使用來繪製邊框 並且不需使用設計軟體，比如 photoshop。在本章中，您將學到以下邊框屬性 border radius box shadow border image 瀏覽器支援 internet ex...
好程式設計師web前端分享CSS3彈性盒
box sizing box sizing 屬性允許您以特定的方式定義匹配某個區域的特定元素。box sizing box sizing 屬性允許您以特定的方式定義匹配某個區域的特定元素。為元素設定的寬度和高度決定了元素的邊框盒。就是說，為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製...
好程式設計師web前端技術分享css3舊版彈性盒
說明 必須加字首 設定彈性盒 使用如下屬性，必須在父代設定display box 說明 在父級上設定該屬性，則子代按水平排列或豎直排列。注 所有主流瀏覽器不支援該屬性，必須加上字首。1 horizontal 水平排列，子代總width 父級width。若父級固定寬度，則子代設定的width無效，子代...