css複習及flex佈局
flex佈局是用來為盒裝模型提供最大的靈活性，任何一個容器都可以指定為flex佈局
設為flex佈局的子元素的float clear 和vertical-align等屬性將失效
只要將display 設為flex即可
採用flex佈局的元素，稱為flex容器flex container 他的所有子元素自動稱為容器成員，稱為flexitem
容器中預設存在兩根軸:水平的主軸main axis和垂直的交叉軸cross axis
主軸的開始位置叫做main start 結束位置叫做main end
交叉軸的開始位置叫做cross start 結束位置叫做cross end
專案預設沿主軸排列
單個專案佔據的主軸空間叫做main size 佔據的交叉軸空間叫做cross size
容器的屬性
flex-direction 屬性決定主軸的方向(即專案的排列方向)
flex-wrap 專案都排在一條線上 flex-wrap屬性定義 如果一條軸排不下 如何換行
justify-content屬性定義了專案在主軸上的對齊方式
flex-start flex-end center space-between等
align-items 屬性定義專案在交叉軸上如何對齊
設定在專案上的屬性有:
order:定義專案的排列順序 數值越小 排列越靠前 預設為0
flex-grow屬性定義專案的放大比例 預設為0
flex-shrink屬性定義了專案的縮小比例 預設為1
align-self屬性允許單個專案與其他專案不一樣的對齊方式
相容移動裝置的顯示效果
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">width=device-width 寬度等於當前裝置的寬度
intial-scale 初始的縮放比例 預設為1.0
minimum-scale 允許使用者縮放到的最小比例
maximum-scale 允許使用者縮放到的最大比例
user-scalable 使用者是否可以手動縮放
設定IE渲染方式預設為最高 瀏覽器的文件模式卻是IE8
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!DOCTYPE>宣告必須是html文件的第一行 位於html 標籤之前
指示web瀏覽器關於頁面使用哪個html版本進行編寫的指令
<!DOCTYPE html>