CSS佈局知識框架
- css知識體系中的重點
- 早期以table爲主
- 後來以技巧性佈局爲主
- 現在有flexbox/grid
- 響應式佈局
常用佈局方法
- table表格佈局
- float浮動+margin
- inline-block佈局
- flexbox佈局
表格佈局優點外部寬度可以固定，內部元素自適應，文字自動vertical-align：middle
盒子模型
- margin
- border
- padding
- content（width，height）
display/position
- 確定元素的顯示類型 display（block/inline/inline-block）
- 確定元素的位置 position（static/relative/absolute/fixed）
relative 是相對於元素本身的位置，不會改變其他元素對於佈局的計算
absolute 是相對於最近的帶有ralative的父元素，與文檔流無關，絕對定位元素居中可使用 transform: translate(-50%, -50%);來移動元素位置。
fixed 是相對於可視區域，與文檔流無關
sticky 初始和relative一樣，如果給定距離且劃出距離範圍的時候等同於fixed
tips:
z-index 設定Z軸層級 relative absolute fixed sticky 可以設定而且其默認層級高於static， static默認是0且不可更改
absolute、fix指定的元素默認初始寬高是0，relative、sticky初始寬高是取決與外部寬度的
flexbox彈性盒子
低版本的IE不支持
即使是chrome firefox 等瀏覽器對其支持的版本也不同
詳細使用方法會再開一篇文章來描述
詳細內容：
grid 網格佈局
詳細內容：
float
適合做圖文混排
- 元素浮動
- 脫離文檔流
- 但不脫離文本流
對自身的影響
- 形成“塊”（BFC）
- 位置儘量靠上
對父級元素的影響
- 脫離文檔流
- 高度塌陷
詳細內容：
inline-block
- 像文本一樣排block元素
- 沒有清除浮動等問題
- 需要處理間隙
處理間隙方式，父元素文本大小設爲0
間隙是由於HTML中寫法兩個子元素中間的空白導致的，可以刪掉或註釋掉中間的空白。
適合用於固定寬度的佈局
※響應式佈局
- 不同設備上的正常使用
- 一般主要處理屏幕大小的問題
- 主要方法：隱藏、折行、自適應空間
- rem/viewport/media query
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
/*媒體查詢*/
@media(max-width:640px){
selecter{
property:value;
}
}
rem=root em
rem是根目錄的字體大小