一、舊版彈性盒模型
1、display:box
說明：(必須加字首)設定彈性盒使用如下屬性，必須在父代設定display:box;
2、box-orient
說明：在父級上設定該屬性，則子代按水平排列或豎直排列
注：所有主流瀏覽器不支援該屬性，必須加上字首
1）horizontal 水平排列，子代總width=父級width；若父級固定寬度，則子代設定的width無效，子代會撐滿父級寬度
2）vertical 垂直排列，子代總height=父級height；若父級固定高度，則子代設定的height無效，子代會撐滿父級高度。
3、 box-pack
說明：在父級設定，子代的水平對齊方式；（父容器裡面主軸對齊方式）
1）start 水平左對齊
2）end 水平右對齊
3）center 水平居中對齊
4、 box-align
說明：在父級設定，子代的垂直對齊方式；（父容器裡面子容器側軸對齊方式）
1）start 垂直頂部對齊
2）end 垂直底部對齊
3）center 垂直居中對齊
4）stretch 拉伸子代的高度，與父級設定的高度一致；子代height無效。
5、 box-direction
說明：在父級上設定該屬性，確認子代的排列順序；
1）normal 預設值，子代按html順序排列
2）reverse 反序
6、 box-flex
說明：1）佔父級元素寬度的number份
2）若子元素設定固定寬度，則該子元素應用固定寬度，其他未設定固定寬度的字元素將餘下的父級寬度（父級-已設定固定寬度的子代元素的總寬度按 number佔份數
3）若子元素有margin值，則按餘下（父級寬度-子代固定總寬度-總margin值）寬度佔number份
彈性盒模型 新版與舊版比較（1）
body box height 200px border 1px solid 000 新版彈性盒模型 display flex flex direction row 設定主軸方向為水平方向 flex direction column 設定主軸方向為垂直方向 flex direction row re...
彈性盒模型
1.父元素新增display 瀏覽器核心字首 box 2.瀏覽器核心字首 box orient vertical是盒模型的布局方向，預設橫向顯示 3.搜狗是webkit核心，大多相容性與谷歌相同。4.元素布局方向 與float類似 瀏覽器核心字首 box direction reverse 處理剩餘...
彈性盒模型
1 css3彈性盒模型 面試題！1.1 怪異盒模型與標準盒模型 1.1.1 兩者邊框大小一樣，彈性盒模型content大小發生變化。總體不變。標準盒模型content大小不變，總體發生變化。怪異盒模型 box sizing content box 標準盒模型 box sizing border bo...