絕對定位與相對定位
position的參數(shù)：
static : 默認屬性咪鲜，對象遵循正常文檔流，top撞鹉，right疟丙，bottom颖侄，left等屬性不會被應用。
relative : 相對定位享郊，脫離文檔流览祖，但是在文檔中的位置依然存在，但將依據(jù)left炊琉，right展蒂，top，bottom等屬性在正常文檔流中偏移位置苔咪。相對body定位锰悼。偏移的位置是相對于自己在文檔流中原有的位置。
absolute : 絕對定位团赏，對象脫離正常文檔流箕般，在正常文檔流中的位置不存在，使用left舔清、right丝里、top、bottom等屬性進行絕對定位体谒。而其層疊通過[css z-index]屬性定義杯聚。此時對象不具有邊距，但仍有補白和邊框抒痒。相對html定位幌绍，或者相對父元素非“position：static”的元素定位。
fixed: 固定定位评汰，對象脫離正常文檔流纷捞，相對于父元素的定位，父元素一般為瀏覽器窗口被去，需要配合top,left,right,bottom,z-index等屬性(IE6不支持)主儡。
注意：
- 我們?nèi)绻褂胊bsoulte或fixed定位的話，必須指定 left惨缆、right糜值、 top、 bottom 屬性中的至少一個坯墨，否則left/right/top/bottom屬性會使用它們的默認值 auto 寂汇，這將導致對象遵從正常的HTML布局規(guī)則，在前一個對象之后立即被呈遞捣染，簡單講就是都變成relative骄瓣，會占用文檔空間，這點非常重要耍攘，很多人使用absolute定位后發(fā)現(xiàn)沒有脫離文檔流就是這個原因榕栏，這里要特別注意~~~
?如果top和bottom一同存在的話畔勤，那么只有top生效。
?如果left和right一同存在的話扒磁，那么只有l(wèi)eft生效庆揪。 - 使用static 定位或無position定位的元素z-index屬性是無效的，即（z-index為整數(shù)妨托，可為負缸榛，僅能在定位元素上奏效，如position:absolute兰伤、relative内颗、fixed;）
- margin的auto屬性的作用是用來分配剩余空間。內(nèi)聯(lián)元素医清，不是占一整行起暮，沒有剩余空間，如<a href=" "></a>,
,<img src=" " />,<span></span>,<input type=" " />会烙。塊級元素需要設置寬度负懦，如果沒有寬度的塊默認就是100%，就沒有auto值了柏腻。
設置塊級元素水平垂直居中
- 方法一（弊端：需要計算塊級元素的一半纸厉，來進行偏移）
position: absolute;top:50%;left: 50%;margin-left: -25px;margin-top: -25px - 方法二（translate方法中的參數(shù)分別指x、y方向的偏移五嫂，適用于底部居中等）
position: absolute;top: 50%;left:50%;transform:translate(-50%,-50%)" - 方法三（推薦使用）
position: absolute;top: 0;bottom: 0;left:0;right:0;margin: auto - 注意fixed的頂部水平居中
position: fixed; top:0; left:0; right:0;margin-left:auto; margin-right: auto;
注意：
一般塊級元素水平居中用margin:0 auto;即可颗品。
文字水平居中：單行文字用text-align：center，多行文字參照塊居中沃缘。垂直居中躯枢，將文本的line-height設置父元素的高度
flex布局
float浮動
手冊解釋：float 屬性定義元素在哪個方向浮動。以往這個屬性總應用于圖像槐臀，使文本圍繞在圖像周圍锄蹂，不過在 CSS 中，任何元素都可以浮動水慨。浮動元素會生成一個塊級框得糜，而不論它本身是何種元素。
如果浮動非替換元素晰洒，則要指定一個明確的寬度朝抖；否則，它們會盡可能地窄谍珊。
（那浮動float的本意是什么呢治宣？是：讓文字像流水一樣環(huán)繞浮動元素。用浮動實現(xiàn)頁面布局本不是浮動該干的事情）
取值：默認none,元素不浮動，并會顯示在其在文本中出現(xiàn)的位置侮邀。left左浮動缆巧。right右浮動。inherit從父元素繼承float屬性的值豌拙。
