前端開發之佈局和定位
在實際開發過程中，我們一般使用display，float，position來構建頁面佈局。
定位
- static：無特殊定位，物件遵循正常文件流。top，right，bottom，left等屬性不會被應用。
- relative：物件遵循正常文件流，但將依據top，right，bottom，left等屬性在正常文件流中偏移位置。而其層疊通過z-index屬性定義。
- absolute：物件脫離正常文件流，使用top，right，bottom，left等屬性進行絕對定位。而其層疊通過z-index屬性定義。
- fixed：物件脫離正常文件流，使用top，right，bottom，left等屬性以視窗為參考點進行定位，當出現滾動條時，物件不會隨著滾動。而其層疊通過z-index屬性定義。
靜態定位(static)
static，無特殊定位，它是html元素預設的定位方式，即我們不設定元素的position屬性時預設的position值就是static，它遵循正常的文件流物件，物件佔用文件空間，該定位方式下，top、right、bottom、left、z-index等屬性是無效的。
相對定位(relative)
相對定位相對的是它原本在文件流中的位置而進行的偏移，而我們也知道relative定位也是遵循正常的文件流，它沒有脫離文件流，但是它的top/left/right/bottom屬性是生效的，最重要的是它還佔有文件空間，而且佔據的文件空間不會隨 top / right / left / bottom 等屬性的偏移而發生變動，也就是說它後面的元素是依據位置( top / left / right / bottom 等屬性生效之前)進行的定位，這點一定要理解。
絕對定位(absoulte)
absoulte定位，也稱為絕對定位，雖然它的名字號曰“絕對”，但是它的功能卻更接近於”相對”一詞，為什麼這麼講呢？原來，使用absoult定位的元素脫離文件流後，就只能根據祖先類元素(父類以上)進行定位，而這個祖先類還必須是以postion非static方式定位的，舉個例子，a元素使用absoulte定位，它會從父類開始找起，尋找以position非static方式定位的祖先類元素(注意，一定要是直系祖先才算哦~），直到標籤為止，這裡還需要注意的是，relative和static方式在最外層時是以標籤為定位原點的，而absoulte方式在無父級是position非static定位時是以作為原點定位。和元素相差9px左右。我們來看下效果：
<html>
<style type="text/css">
html{border:1px dashed green;}
body{border:1px dashed purple;}
#first{ width: 200px;height: 100px;border: 1px solid red;position: relative;}
#second{ width: 200px;height: 100px;border: 1px solid blue;position: absolute;top :0;left : 0;}
</style>
<body>
<div id="first">relative</div>
<div id="second">absoult</div>
</body>
</html>固定定位(fixed)
fixed定位，又稱為固定定位，它和absoult定位一樣，都脫離了文件流，並且能夠根據top、right、left、bottom屬性進行定位，但不同的是fixed是根據視窗為原點進行偏移定位的，也就是說它不會根據滾動條的滾動而進行偏移。
浮動
float屬性定義元素在哪個方向浮動。以往這個屬性總應用於影象，使文字圍繞在影象周圍，不過在 CSS 中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。 如果浮動非替換元素，則要指定一個明確的寬度；否則，它們會盡可能地窄。
注意：假如在一行之上只有極少的空間可供浮動元素，那麼這個元素會跳至下一行，這個過程會持續到某一行擁有足夠的空間為止。
當框 1 向左浮動時，它脫離文件流並且向左移動，直到它的左邊緣碰到包含框的左邊緣。因為它不再處於文件流中，所以它不佔據空間，實際上覆蓋住了框 2，使框 2 從檢視中消失。 如果把所有三個框都向左移動，那麼框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框。
如果包含框太窄，無法容納水平排列的三個浮動元素，那麼其它浮動塊向下移動，直到有足夠的空間。如果浮動元素的高度不同，那麼當它們向下移動時可能被其它浮動元素“卡住”：
在實際開發中我們還可能遇到這樣子的情況，假如頁面中只有兩個元素div1、div2，它們都是左浮動，場景如下：
此時div1、div2都浮動，根據規則，div2會跟隨在div1後邊，但我們仍然希望div2能排列在div1下邊，就像div1沒有浮動，div2左浮動那樣。
這時候就要用到清除浮動（clear），如果單純根據官方定義，讀者可能會嘗試這樣寫：在div1的CSS樣式中新增clear:right;，理解為不允許div1的右邊有浮動元素，由於div2是浮動元素，因此會自動下移一行來滿足規則。
對於CSS的清除浮動(clear)，一定要牢記：這個規則只能影響使用清除的元素本身，不能影響其他元素。
佈局是css中的重要部分，我們常會用到水平居中，垂直居中。
水平居中
1.定寬塊狀元素：margin和width實現水平居中最常見的是給一個元素一個寬度，然後加上margin左右值為auto。但是必須給元素指定的一寬度。
.center {
width: 960px;
margin-left: auto;
margin-right: auto;
} <div class="center">水平居中</div>2.不定寬塊狀元素：設定子元素為display:inline,然後在父元素上設定text-align:center;
.parent {
text-align: center;
}
.child {
display: inline;
}<div class="parent">
<div class="child">我要水平居中</div>
</div>3.浮動居中：position:relative 和 left:50%;
.container{
float:left;
position:relative;
left:50%
}
.container ul{
list-style:none;
margin:0;
padding:0;
position:relative;
left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>4.flex居中：對父元素設定display:flex;justify-content:center;
5.絕對定位。
6.fit-content居中：
垂直居中
1.父元素一定，子元素為單行內聯文字：設定父元素的height等於行高line-height。
.vertical {
height: 100px;
line-height: 100px;
}<div class="vertical">我垂直居中</div>2.父元素高度確定的單行文字（內聯元素） 設定 height = line-height； 3.父元素高度確定的多行文字（內聯元素） a:插入 table （插入方法和水平居中一樣），然後設定 vertical-align:middle； b:先設定 display:table-cell 再設定 vertical-align:middle； 4.塊狀元素:設定子元素position:fixed（absolute），然後設定margin:auto;
.box {
position: absolute;或fixed
top:0;
right:0;
bottom:0;
left:0;
margin: auto;
}3.使用position:absolute（fixed）,設定left、top、margin-left、margin-top的屬性;
.box {
position:absolute;/*或fixed*/
top:50%;
left:50%;
margin-top:-100px;
margin-left:-200px;
}4.利用display:table-cell屬性使內容垂直居中,這個方法在多行文字居中的時候用的比較多;
.box {
display:table-cell;
vertical-align:middle;
text-align:center;
width:100px;
height:120px;
background:purple;
}
.box span {
display: inline-block;
vertical-align: middle;
}<div class="box">
<span>多行文字，此處居中設定</span>
</div>