什么是文檔流
英文原文是：
Normal flow. In CSS 2.1, normal flow includes block formatting of block-level boxes, inline formatting of inline-level boxes, and relative positioning of block-level and inline-level boxes.
正常的布局流是將元素放置在瀏覽器視口內的系統：
塊級元素（display:block）在視口中垂直布局——每個都將顯示在上一個元素下面的新行上，並且它們的外邊距將分隔開它們。
內聯元素（也叫行內元素display:inline）表現不一樣——它們不會出現在新行上；相反，它們互相之間以及任何相鄰（或被包裹）的文本內容位於同一行上，只要在父塊級元素的寬度內有空間可以這樣做。如果沒有空間，那么溢流的文本或元素將向下移動到新行。
通俗一點來說就是像在地鐵站排隊一樣，正常情況，排成一隊，一個一個來的就是內聯元素，來一群人他們可能直接再排一隊（不文明哈），那他們就是塊級元素。
定位
靜態(static)
這是默認的定位，沒什么特別的。
相對定位(relative)
設置相對定位之后，就可以使用left right top bottom 啦。
相對定位到底是相對什么呢？
他相對的是他原本正常的位置，如果設置為left:20px意思就是相對原位置的左邊，向右移動20px，如果是-20px那就向左移動。
同理，設置bottom:20px那就是相對原位置的下邊，向上移動20px，如果是負數就向下移動。
一般我們要定一個元素的位置，只要兩個就夠了，left和right不要一起用，top和bottom不要一起用。
一起用有什么后果呢？一般是會忽略right，和bottom的。但還可能瀏覽器的不同，和文檔流的不同，產生其他的特殊效果，暫且不提了。
絕對定位(absolute)
說他絕對啊，其實又不是絕對的，他也是一種相對。
它是以父元素為相對的對象，而且這個父元素啊，必須非static的定位，如果是static，那就找他爺爺（pis：不要找他的兄弟哈，兄弟不管事的），爺爺不行就找他祖爺爺，直到找到不是默認的static的元素，就以那個為參照了。
但是，還有人說了，真心找不到了怎么辦，那最后那就是參照整個瀏覽器窗口了。
好啦，他的位置通過left right top bottom定好之后呢，那他后面的兄弟就看他不爽了，就擠到他的位置去了。
絕對定位的元素不再存在於正常文檔布局流中。相反，它坐在它自己的層獨立於一切。
這位兄弟這樣搶位置是不對的，所以，absolut的元素他會在上面擋住他兄弟，不讓其露臉。
可是他不光會擋住搶位置的，他還可能擋住其他的元素。所以上帝就設計了z-index來約束他。
z-index:默認是auto（IE瀏覽器默認為0），一般要設置在正常元素上面就設置z-index:1數字越大越在上層，也可以設置負數，數字越小越下層。
固定定位(fixed)
他是相對於整個瀏覽器的定位的。一般用在邊上，設置成透明(opacity:0-1;)或者利用其他元素的margin來空出一定的位置。
浮動
浮動的設計目的是為了讓文字環繞圖片，說到文字，那就不得不說文本流了。
設置float是會脫離了文檔流，他后面的元素塊會占用他的位置，但是元素塊中的文字卻還是定位在float元素旁邊，所以他沒有脫離文本流。
如果一個float元素的上一個元素也是float的，那么它會緊緊的跟在后面，不留一點空隙。
文本流就像是守規矩的好孩子，雖然他的兄弟float了，但它們還是會為他留出空間。就算是他的爸爸的兄弟，他爸占位了，他也不會占位。
float的用處很多時候用來清除間隙，用在<li>,<img>等元素中。
清除float的方法{style=“clear: both”;}/*添加一個空的div放在要清除浮動元素的最后面*/ {overflow: hidden;}/*同上*/ /*下面這個方法是bootstrap框架用的，可以兼容IE低版本*/ .clearfloat:after { content: ''; display: table; clear: both; } .clearfloat { *zoom: 1; }
flexbox
主要搞清楚幾個屬性
flex-direction:控制布局方向，
默認row屬性橫向布局，還可以column屬性豎向布局。
row-reverse橫向反方向，column-reverse豎向反方向。
flex-wrap:控制元素換行
默認nowrap 規定靈活的項目不拆行或不拆列。
wrap 規定靈活的項目在必要的時候拆行或拆列。
wrap-reverse 規定靈活的項目在必要的時候拆行或拆列，但是以相反的順序。
flex-flow 屬性是 flex-direction 和 flex-wrap的簡寫。
flex:屬性是flex-grow，flex-shrink ，flex-basis的簡寫
flex-grow:flex-grow 屬性定義彈性盒子項（flex item）的拉伸因子。（可以給元素設置不同的值來控制大小比例）
flex-shrink:屬性指定了 flex 元素的收縮規則。flex 元素僅在默認寬度之和大於容器的時候才會發生收縮，其收縮的大小是依據 flex-shrink 的值。只能是正數。
flex-basis:指定了 flex 元素在主軸方向上的初始大小。如果不使用 box-sizing 來改變盒模型的話，那么這個屬性就決定了 flex 元素的內容盒（content-box）的寬或者高（取決於主軸的方向）的尺寸大小。
align-items 控制 flex 項在交叉軸上的位置。
默認的值是 stretch，其會使所有 flex 項沿着交叉軸的方向拉伸以填充父容器。如果父容器在交叉軸方向上沒有固定寬度（即高度），則所有 flex 項將變得與最長的 flex 項一樣長（即高度保持一致）。center 值會使這些項保持其原有的高度，但是會在交叉軸居中。這就是那些按鈕垂直居中的原因
justify-content 控制 flex 項在主軸上的位置。
默認值是 flex-start，這會使所有 flex 項都位於主軸的開始處。
你也可以用 flex-end 來讓 flex 項到結尾處。center 在 justify-content 里也是可用的，可以讓 flex 項在主軸居中。
而我們上面用到的值 space-around 是很有用的——它會使所有 flex 項沿着主軸均勻地分布，在任意一端都會留有一點空間。
還有一個值是 space-between，它和 space-around 非常相似，只是它不會在兩端留下任何空間。
成長的路上，有歡樂才更有動力，加油！