現在是凌晨4.45分，剛才解決了乙個棘手的問題，乘著這股餘勁，我要把剛才查閱的、測試的以及平時不怎麼關注的知識點再理一遍。今天收穫真的大。上面就是今天所掌握的知識點，廢話不多說入正題。1、css清除浮動。父元素如果沒有設定高度，將預設由子元素撐開父元素的高度。如果子元素設定了浮動，也不能撐開父元素的高度。
2、使用@media only screen為不同螢幕大小的裝置寫樣式其實是一件非常繁雜的事，所有構建的頁面結構最好一樣，然後通過設定 元素的display來影藏和顯示元素。
頁面結構一旦成型， 除非是通過js動態增刪元素，通過@media only screen我們只能 修改屬性而不能增刪元素。
max-width和min-width是指整個視窗的寬度，包括滾動條的寬度。
3、標準合模型、怪異合模型、彈性盒模型的區別和用法。
4、bootstrap的相關屬性和用法。
怎樣實現以下同行元素子自動換行，且換行後，每一行元素依舊佔滿整個父元素的寬度。
請看下面幾張圖：
狀態1
狀態2
狀態3
狀態4
上面4張圖是瀏覽器視窗由大到導航欄的狀態變化。
我的頁面是用bootstrap寫的，上面是bootstrap中的按鈕組，預設同行顯示，由字型撐開按鈕的大小
狀態1到狀態2
狀態1的字型和按鈕大小都比較大，這個過程我是通過css的@media only screen實現。
狀態2到狀態3
這是我們的重點。
怎麼實現行元素自動換行?
如果同行元素有固定的寬度，一般都不會自動換行。
如果同行元素採用百分比賦值,始終會有寬度值，不會實現換行。
如果元素的寬高都是由內容撐開呢?
給元素設定display:inline-block;
悟空與八戒兩個元素中間會出現縫隙。不過自動換行倒是實現了。
如果給元素新增浮動效果呢？
浮動效果要比display:inline-block;好。
不過這兩者雖然都實現了自動換行，但是最終效果卻不是我們想要的。
我們要的效果是由狀態2到狀態3,元素換行之後，該元素會佔據整行，上一行空出來的空間會被其它元素所佔滿。
我採用的方法是使用彈性盒模型
父元素新增以下屬性
display: flex;//表示該元素為彈性盒模型元素。
flex-wrap: wrap;//表示遇到邊界後會自動換行。
所有子元素新增
flex-grow: 1;//定義元素在整行中所佔的比例，如果都為1，則同行所有的元素的寬度都相同。已換行的元素會 佔據整行。如圖狀態3和狀態4.
彈性盒模型
1.父元素新增display 瀏覽器核心字首 box 2.瀏覽器核心字首 box orient vertical是盒模型的布局方向，預設橫向顯示 3.搜狗是webkit核心，大多相容性與谷歌相同。4.元素布局方向 與float類似 瀏覽器核心字首 box direction reverse 處理剩餘...
彈性盒模型
1 css3彈性盒模型 面試題！1.1 怪異盒模型與標準盒模型 1.1.1 兩者邊框大小一樣，彈性盒模型content大小發生變化。總體不變。標準盒模型content大小不變，總體發生變化。怪異盒模型 box sizing content box 標準盒模型 box sizing border bo...
彈性盒模型
1.flex 靈活性。採用flex布局的元素，flex容器 2.給裝眾多相同盒子的父盒子display flex.將盒子平均分配寬。它所有的子元素就會自動成為這個容器成員，flex專案。當所有子元素的寬大于父元素的寬，則子元素的寬由父盒子決定，平均分配寬。當所有子元素的寬小於父元素的寬，則子元素的寬...