說明：
(必須加字首)設定彈性盒
使用如下屬性，必須在父代設定display:box;
說明：在父級上設定該屬性，則子代按水平排列或豎直排列。
注：所有主流瀏覽器不支援該屬性，必須加上字首。
1）horizontal 水平排列，子代總width=父級width。若父級固定寬度，則子代設定的width無效，子代會撐滿父級寬度。
2）vertical 垂直排列，子代總height=父級height。若父級固定高度，則子代設定的height無效，子代會撐滿父級高度。
說明：在父級設定，子代的水平對齊方式。（父容器裡面主軸對齊方式）
1）start 水平左對齊
2）end 水平右對齊
3）center 水平居中對齊
說明：在父級設定，子代的垂直對齊方式。（父容器裡面子容器側軸對齊方式）
1）start 垂直頂部對齊
2）end 垂直底部對齊
3）center 垂直居中對齊
4）stretch 拉伸子代的高度，與父級設定的高度一致。子代height無效。
說明：在父級上設定該屬性，確認子代的排列順序。
1）normal 預設值，子代按html順序排列
2）reverse 反序
說明：1）佔父級元素寬度的number份
2）若子元素設定固定寬度，則該子元素應用固定寬度，其他未設定固定寬度的字元素將餘下的父級寬度（父級-已設定固定寬度的子代元素的總寬度按 number佔份數
3）若子元素有margin值，則按餘下（父級寬度-子代固定總寬度-總margin值）寬度佔number份
說明：屬性規定元素應該被分隔的列數
適用於：除table外的非替換塊級元素, table-cells, inline-block元素
2、column-gap
說明：屬性規定列之間的間隔大小
說明：設定或檢索物件的列與列之間的邊框。復合屬性。
column-rule-color規定列之間規則的顏色。
column-rule-style規定列之間規則的樣式。
column-rule-width規定列之間規則的寬度。
說明：設定或檢索物件所有列的高度是否統一
auto：列高度自適應內容
balance：所有列的高度以其中最高的一列統一(預設值)
說明：設定或檢索物件元素是否橫跨所有列。
none：不跨列
all：橫跨所有列
說明：設定或檢索物件每列的寬度
說明：設定或檢索物件的列數和每列的寬度。復合屬性
<' column-width '> || <' column-count '>
例：columns:100px 3;
注釋：internet explorer 10 和 opera 支援多列屬性。
firefox 需要字首 -moz-。
chrome 和 safari 需要字首 -webkit-。
好程式設計師web前端技術分享css盒模型
web前端技術分享css盒模型 學習目標 一 css盒模型的概念及組成 概念 盒模型是css布局的基石，它規定了網頁元素如何顯示以及元素間相互關係。css定義所有的元素都可以擁有像盒子一樣的外形和平面空間.盒模型的組成 邊框 邊界 邊距 補白 填充 內容區。二 盒子模型的相關元素 說明 填充 pad...
好程式設計師web前端技術分享css盒模型
web前端技術分享css盒模型 學習目標 一 css盒模型的概念及組成 概念 盒模型是css布局的基石，它規定了網頁元素如何顯示以及元素間相互關係。css定義所有的元素都可以擁有像盒子一樣的外形和平面空間.盒模型的組成 邊框 邊界 邊距 補白 填充 內容區。二 盒子模型的相關元素 說明 填充 pad...
好程式設計師web前端分享邏輯運算
一門計算機語言，程式設計的核心在於邏輯思想，當我們在編寫程式的時候，邏輯是否通順，是能否正確寫出程式的關鍵，可以說如果你掌握了邏輯，那麼你就踏入了計算機程式設計的大門。與 或 否 邏輯 與 var a 0,b 3 alert a 0 b 3 true alert a 1 b 3 false 他的 返...