一、怪異盒模型
屬性:box-sizing:
屬性值:content-box; 常規盒模型
border-box; 怪異盒模型(ie盒模型)
怪異盒模型:怎麼觸發怪異盒模型？
答:給父元素新增box-sizing:border-box;
怪異盒模型特點:padding和border都會在元素的寬高內部顯示，不會吧盒子撐大。
二、彈性盒模型
彈性盒子用來布局方案。
作用:控制離它最近的一層子元素，進行布局。
特點:1:彈性盒子裡面的離它最近的一層子元素都可以新增大小。
2:如果想讓彈性盒子裡面的乙個子元素左右上下居中，只需要給子元素新增margin:auto;即可。
3:彈性盒子裡面的子元素都是沿著」主軸」排列。
「主軸」:有可能是x軸，也有可能是y軸，如果x軸為主軸，則y軸就是側軸。
注：預設情況下，x軸為主軸。
1：觸發彈性盒子
display:flex;
2:改變主軸的方向
flex-direction:
屬性值:row 預設值，x為主軸
column y為主軸
column-reverse 以y軸為主軸進行反向排列
row-reverse 以x軸為主軸進行反向排列
3:改變主軸的對齊方式
justify-content:
屬性值:flex-start 預設狀態，在彈性盒子開始的地方顯示
flex-end 在彈性盒子末端對齊
center 居中對齊
space-between 兩端對齊
space-around 自動分配間距
4:側軸的對齊方式
align-items:
屬性值:flex-start 側軸開始的位置
flex-end 側軸結束的位置
center 側軸居中的位置
baseline 基線(flex-start等效)
stretch 拉伸(預設值)
5:控制彈性盒子裡面的子元素(靈活元素)換行處理
flex-wrap:
屬性值:wrap 換行
nowrap 不換行
wrap-reverse 反向換行
6:控制行與行的對齊方式
align-content:
屬性值:flex-start 預設狀態:行與行之間不存在預設的行間距
flex-end 在彈性盒子末端對齊
center 居中對齊
space-between 兩端對齊
space-around 自動分配間距
7:補充:flex-direction和flex-wrap簡寫:
flex-flow:;
注:以上7個屬性全部新增在父元素彈性盒子上面！
新增在子元素上面的屬性:
a:控制彈性盒子裡面某個靈活元素在側軸的對齊方式
align-self:
屬性值:auto 預設值，元素繼承了它的父容器的align-items屬性，如果沒有父容器，則為」stretch」
stretch 元素被拉伸以適應容器
center 元素位於容器的中心
flex-start 元素位於容器的開頭
flex-end 元素位於容器的結尾
b:控制子元素的排列順序
order:數值越大越往後排列，支援負值。
c:剩餘空間的分配
flex:1;分配主軸的剩餘空間。
拓展:flex:1;是簡寫形式。
拆分:flex-grow:; 擴充套件的量
flex-shrink:;收縮的量
flex-basis:; 元素的大小
注:flex-shrink:0; 表示不壓縮
三、多列布局
多列屬性：
1:列數：
column-count:;
2:列間距:
column-gap:;
3:列分割線:
column-rule:;
4:控制每一列的列的高度是否統一:
column-fill:;
auto 列高度自適應內容
balabce 有列的高度以其中最高的一列統一
5:跨列:
column-span:all;
6:列寬:
column-width:;
7:column:7
column-count和column-width 的簡寫。
彈性盒模型
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...
彈性盒模型
1.flex 靈活性。採用flex布局的元素，flex容器 2.給裝眾多相同盒子的父盒子display flex.將盒子平均分配寬。它所有的子元素就會自動成為這個容器成員，flex專案。當所有子元素的寬大于父元素的寬，則子元素的寬由父盒子決定，平均分配寬。當所有子元素的寬小於父元素的寬，則子元素的寬...