flexbox 、boxalignment、grid這三個可以稱為新時代的新棟樑。
瀏覽器解析過程
渲染引擎會把伺服器傳送過來的source文件解析成，瀏覽器能明白的物件，瀏覽器會將物件生成乙個渲染樹，這個渲染樹是乙個中介性的結構，是文件結構formating struct結構的表示法， css在解析的過程會計算每乙個元素和文字節點的每乙個css屬性，會通過display屬性決定生成哪一型別的盒子。display目前有17個屬性值。
主要分兩種型別。
自動margin是flex 的好友
automargin
.automargin div
如果我們給元素的height設定auto，瀏覽器在渲染該元素時，只會考慮元素內容及子元素，縱向沒有已確定的高度來調整位置，即使我們給height設定了固定的高度，他似乎跟子元素是不相關的，這可能是瀏覽器最初實行的抉擇，而遺留下來的行為，瀏覽器沒有辦法計算上下margin的取值會把margin-top:auto margin-bottom:auto，解析成0
新時代的轉折點就在flex/grid容器，因為flex/grid容器在跟子元素的關係，在布局時是被瀏覽器承認的，因此瀏覽器才有辦法，計算出，四面的自動margin取值
1. flexbox
2. grid
justify-content和align-content屬性 被規定為內容分配屬性，當容器有多餘空間時才生效
在grid容器時
justity-content: 用來調整整個行的對齊 start、end center
align-content: 用來調整列之間對齊 space-evenly、space-between
在flex容器時
justity-content: 用來調整整個行的對齊
align-content:用來調整多個軸線的對齊方式，如果軸線只有一條的時候，該屬性是麼有效果的。而預設情況下該值是stretch，只有單軸線時，這條軸線會佔滿flex的空間。
justify-self和align-self 用來對齊自己，被歸類為自我對齊屬性
在grid中
justify-self和align-self 用來對齊自己，被歸類為自我對齊屬性
允許我們操作在網格區域裡面的位置，預設是stretch，佔據網格的整個空間。調整位置可以用
justify-item和align-item 用來設定grid的，所有的預設的align-self和justify-self的行為
justify-item和align-item 用在flex時，指定專案在交叉軸如何對齊，他們的預設值與grid相同，都是stretch
特別的：有乙個比較少見的值baseline，如果你的專案的尺寸不一致，而導致文字上下上下不齊，我們可以用baseline，將文字對齊。
問題一：是選擇flex 好 還是 grid好
flex 適合（單維的布局 ） flex 的行與列是不相關的，但是擁有最強的彈性功能。
grid（二維的布局）適合二維的布局，grid的行列才是真實的，才是有關係的，可以像排棋子似的排想要的布局。
答：可配合在一起使用，實現複雜的布局，沒有那個好與不好，各有長短。
靈活性尺寸
fr 是free space的數量單位，剩餘空間的單位，如果有多餘空間時，瀏覽器會將多餘空間分配給多餘空間的那一欄，也可以用來分配多餘空間分配的比例，viewport變小時，瀏覽器會將多餘空間取回，且fr的空間最先被取回，直到縮到min-content時，才會取回auto的空間。壓縮的優先順序最高。
auto 多餘空間漲優先順序最低，只要達到了文字的寬度後一般不再漲了，但當別人都不漲時他就漲。
minmax(下線，上線) 達到下限就不再縮，達到上線就不再漲，漲優先順序最高，縮優先順序低。
fit-content(num) 漲到num時就不再漲了
max-content() 與固定width相同
百分比尺寸
靈活性尺寸輕鬆的實現重疊性的設計
future query用來做本地功能檢測，類似於media query，判斷瀏覽器是否支援該屬性值。
使用的關鍵字是@supports
用法
@support (property:value)
}@support瀏覽器的支援率達到了百分之九十四，對於不支援的瀏覽器 @support的選擇器根本就不生效。
將回退樣式寫在前頭，新屬性在@support中，用漸進增強的方式。用舊款瀏覽器的使用者也可以瀏覽網頁
可以用在任何乙個css屬性上
新時代的聯想
沒錢的時候,養豬 有錢的時候，養狗。沒錢的時候,在家裡吃野菜 有錢的時候,在酒店 吃野菜。沒錢的時候,在馬路上騎自行車 有錢的時候，在客廳裡騎自行車。沒錢的時候，想結婚，有錢的時候，想離婚 沒錢的時候，老婆兼秘書,有錢的時候，秘書兼老婆 沒錢的時候，假裝有錢,有錢的時候，假裝沒錢。人啊，都不講實話 ...
微創新時代
早幾年，基本上都還是ie的天下，市場占有率在75 以上。但是進入微創新時代以後，微軟明顯跟不上節奏了。其實第三方的瀏覽器很早之前都有，而且經常會帶一些ie所沒有的功能。但網頁的開啟速度，明顯比不上ie，所以之前我還是主要用ie為主。現在的第三方瀏覽器更多了，而且基本上都是一些網際網路巨頭出的，也差不...
Dashboard，新時代的報表
提到dashboard 大家馬上想到的往往是汽車儀錶盤。不僅是因為同名，也是因為很多 bi廠家把二者在不同程度上等同起來。但是作為 bi的一部分，dashboard 是乙個覆蓋了遠遠超過一種顯示方法的概念和理念。它首先是一種理念和解決方式。傳統的報表源自紙張上的列印生成。雖然報表的製作早已從手工的繪...