形成彈性盒：display：flex；
主軸方向：flex-derection
調整主軸位置：justily-content:center/space-between/space-around/
調整側軸位置 aligin-atmes
justify-contente：後跟start開始位置
end為末尾位置
space-around中間是兩邊的兩倍
space-between兩邊靠邊中間平分
stretch拉伸
space-evenly平均分
align-contente調整子元素側軸對齊方式
start左對齊
end右對齊
center居中
stretch拉伸
space-around中間是兩邊的兩倍
space-between兩邊靠邊中間平分
space-evenly平均分
justify-items：調整子元素橫軸對其方式
start左對齊
end右對齊
center居中
stretch拉伸
align-items：調整子元素縱向對其方式
start單元格頂部對齊
end單元格底部對齊
center居中
stretch拉伸
display：grid；
grid-template-rows每一行的寬
grid-template-column列
repeat（列數，寬度）
***px，***px，***px每列寬度；
fr為份數；
***px，auto其餘空間；
間距 gap-row行間距
gap-column列間距
grid-template-areas後跟復原後的網格每行元素
grid-areas合併單元格
子項調整單元格
grid-area：後跟連線劃分網格布局的名字 不加引號
grid-column-start從第一列左邊線開始數第幾個開始
grid-column-end從第一列左邊線開始數到多少結束
grid-row-start從第一行的上邊線開始數到多少開始
grid-row-end從第一行上邊線開始數到多少結束
meta
視口 viewport
可視視口：裝置寬度
布局視口：設定css樣式後，顯示的地方，預設值980px
content="width=device-width"布局視窗和裝置大小寬度一樣
initial-scale:初始的縮放比例（預設值為1.0）
minimun-scale:允許使用者縮放到的最小比例（預設值為1.0）
maximun-scale:允許使用者縮放到的最大比例（預設值為1.0）
user-scalable:使用者是否可以手動縮放（預設值為no，因為我們不希望使用者放大或縮小頁面）
viewport-fit=cover:鋪滿全屏手機
meta
視口 viewport
可視視口：裝置寬度
布局視口：設定css樣式後，顯示的地方，預設值980px
content="width=device-width"布局視窗和裝置大小寬度一樣
initial-scale:初始的縮放比例（預設值為1.0）
minimun-scale:允許使用者縮放到的最小比例（預設值為1.0）
maximun-scale:允許使用者縮放到的最大比例（預設值為1.0）
user-scalable:使用者是否可以手動縮放（預設值為no，因為我們不希望使用者放大或縮小頁面）
viewport-fit=cover:鋪滿全屏手機 750圖紙測量時實際寬度/2為375px；
html
640圖紙測量時實際寬度/2為375px；
html
web移動端 彈性盒模型
父元素加 新版彈性盒模型 display flex 設定主軸方向為水平方向 flex direction row 設定主軸方向為垂直方向 flex direction column 老版彈性盒模型 display webkit box 設定主軸方向為水平方向 webkit box orient ho...
css3移動端布局 怪異盒模型和彈性盒模型
一 怪異盒模型 1 box sizing 屬性值 box sizing content box 常規盒模型 box sizing border box 怪異盒模型 ie盒模型 2 觸發怪異盒模型 box sizing border box 3 怪異盒模型特點 padding和border都會在元素的...
彈性盒模型
1.父元素新增display 瀏覽器核心字首 box 2.瀏覽器核心字首 box orient vertical是盒模型的布局方向，預設橫向顯示 3.搜狗是webkit核心，大多相容性與谷歌相同。4.元素布局方向 與float類似 瀏覽器核心字首 box direction reverse 處理剩餘...