怪異盒模型
怪異盒模型 box-sizing:border-box;
怪異盒子包括了border 和 padding 新增邊框和內填充不會把盒子撐大 會保持原有大小
彈性盒的特點
1 彈性盒的最近一層子元素可以設定大小 忽略元素型別
2 單個子元素在彈性盒垂直水平居中 margin:auto;
3 彈性盒的布局是根據主軸進行排列 預設x軸為主軸 y軸為側軸
一 觸發彈性盒
display:flex;
二 改變彈性盒的主軸方向
flex-direction:;
row 預設 x軸
column y軸
row-reverse 反向x軸
column-reverse 反向y軸
三 改變主軸的對齊方式
justify-content:;
預設 flex-start x左端
flex-end x右端
center 居中
space-between 兩端對齊 中間均分
space-around 相當於平均分配 每個元素有相同的左右margin值
四 改變側軸的對齊方式
align-items:;
flex-start y上端
flex-end y下端
center 居中
baseline 與y上端效果一樣
stretch 預設拉伸
五 改變元素換行
flex-wrap
wrap 換行
nowrap 不換行
六 改變多行元素的對齊方式
align-content
flex-start y上端
flex-end y下端
center 居中
space-between 兩端對齊 中間均分
space-around 相當於平均分配 每個元素有相同的左右margin值
flex-flow 簡寫形式 flex-direction 與 flex-wrap的簡寫形式
大多數 flex-flow:row wrap;
以上都是加在彈性盒上的
以下加在彈性盒最近一層的子元素上
七 彈性盒剩餘空間的平均分配
flex:1;
八 元素的排列順序
order 數值越大 越往後排列
九 單個子元素的排列方式
align-self:;
auto 預設繼承父元素的align-items
stretch 拉伸
flex-start y上端
flex-end y下端
center 居中
十 flex-***
flex-grow 如果所有子元素都加了一將會平均分配 只給乙個加會把父元素剩於空間給到當前元素
flex-shrink 預設值為1 壓縮 防止當子元素之和大於父元素 會壓縮子元素 如果不想壓縮子元素將值改為0
flex-basis 相當於寬度
多列
一般用於比較長的文章或報紙的排版
column-count:; 列數
column-gap:; 每列直接的間距
column-rule:; 每列直接的間隔線
width
style
color
column-fill:; 自適應列的高度
auto
balance 根據最高一列的高度
column-span 跨所有的列 一般就是多列的標題
column-width 每列的寬度
columns 列數和列寬的簡寫
怪異盒模型 彈性盒模型
標準盒模型 我們平常狀態下所寫的，即為標準盒模型狀態下的css樣式 box怪異盒模型 ie盒模型 p box兩種模式的區別標準模式會被設定的padding撐開，而怪異模式則相當於將盒子的大小固定好，再將內容裝入盒子。盒子的大小並不會被padding所撐開。標準模式 box sizing conten...
標準盒模型 怪異盒模型 彈性盒模型
box sizing content box 標準盒模型 標準盒模型總寬度 border2 padding2 content box sizing border box 怪異模式 怪異盒模型的總寬度 width margin 左右 width已經包含了padding和border值 flex dir...
彈性布局 怪異盒模型
怪異盒模型 由margin和content border padding 組成 盒模型轉換 box sizing content box 標準盒模型 boeder box 怪異和模型 這是由 css2.1 規定的寬度高度行為。寬度和高度分別應用到元素的內容框。在寬度和高度之外繪製元素的內邊距和邊框。...