關(guān)于margin-top、padding-top、top的取值

一個元素margin-top、padding-top設(shè)置為百分比時，如果該元素的定位為relative，那么其取值就是其直接父元素的width乘以該百分比得到的值。如果該元素的定位為absolute，則其取值是相對于最近的非static定位的父元素的width乘以該值。

之所以是相對于width而不是height，原因在于如果一個元素的上下外邊距時父元素的height的百分?jǐn)?shù)，就可能導(dǎo)致一個無限循環(huán)，父元素的height會增加，以適應(yīng)后代元素上下外邊距的增加，而相應(yīng)的，上下外邊距因為父元素height的增加也會增加，如果循環(huán)。

對于top的取值，三個元素分別為grandparent，parent，child，如果child設(shè)置為position: absolute，則top的值等于百分比乘以最近的非static定位（absolute或是fixed）的height，如果一直往上找不到非static的父元素，則為百分比乘以屏幕高度。

為一個元素設(shè)置margin: auto相當(dāng)于設(shè)置為margin: 0 auto，此時元素相對于父元素水平居中，但是垂直方向無法居中，因為此時的margin-top和margin-bottom都為0

但是如果給子元素設(shè)置了position: absolute; top: 0; left: 0; right: 0; bottom: 0;此時將給瀏覽器重新分配一個邊界框，此時該塊block將填充其父元素的所有可用空間，父元素一般為body或者聲明為position:relative;的容器，這時候如果再設(shè)置margin為auto就會給margin-top和margin-bottom設(shè)置相同的值使其居中。

垂直居中

1. flex布局方式

    .parent {
        display: flex;
        align-items: center;
    }
    .child {
        height: 100px;
    }
   

2. 利用top和transform來實現(xiàn)（使用top是因為top的取值是相對于父元素的height的）

    .parent {
        height: 500px;
        position: relative; // 如果不設(shè)置relative，那么top的取值就不相對于該父元素
    }
    .child {
        position: absolute;
        height: 100px;
        top: 50%;
        tranform: translateY(-50%);
    }
   

3. 黑科技

    .parent {
        height: 500px;
        position: relative; // 如果不設(shè)置relative那么就會相對于最近的非static定位父元素居中
    }
    .child {
        position: absolute;
        height: 100px;
        margin: auto; // 必須設(shè)置
        top: 0;
        bottom: 0; // 這兩項設(shè)置垂直居中
        left: 0;
        right: 0; // 這兩項實現(xiàn)水平居中
    }
   

4. 如果要使元素相對于屏幕始終垂直居中

    .fixed-center {
        height: 600px;
        width: 800px;
        background: pink;
        position: fixed; // 和上面和科技的唯一區(qū)別在于定位方式，這樣就是相對于瀏覽器窗口定位了
        overflow: auto;
        margin: auto;
        top: 0; left: 0; bottom: 0; right: 0;
    }
   

   注意1：如果設(shè)置了positiond為fixed但是沒有設(shè)置具體的top、bottom、left、right的值時，其實這時候會自動設(shè)置top為父元素的margin-top+border-top+padding-top的值，相應(yīng)的left的值設(shè)為父元素的margin-left+border-left+padding-left的值，此處所指的父元素就是直接父元素，無論該父元素的定位方式如何。

   注意2：一般情況下fixed定位的元素是相對于瀏覽器窗口定位的，但是當(dāng)該元素的父元素設(shè)置了transform值時，這時候就不是對于瀏覽器窗口定位了，而是相對于父元素的border內(nèi)側(cè)左上角定位了。還有一種情況：當(dāng)不是直接父元素設(shè)置transform而是更上級的父元素設(shè)置transform時，此時fixed定位的元素是相對于直接父元素的border外側(cè)左上角定位的

5. 利用table-cell來實現(xiàn)垂直居中

    .parent {
        height: 200px;
        width: 200px;
        display: table-cell;
        vertical-align: middle;
    }
    .child {
        height: 100px;
        width: 100px;
    }
   
   

關(guān)于relative和absolute定位

如果一個元素的position設(shè)置為了relative，然后再設(shè)置top等值的話，就是相對于原有的位置進(jìn)行平移，不會影響到其他同級元素的定位；

如果一個元素position設(shè)為了absolute，再設(shè)置了top等值，那就是相對于最近非static的定位（可以使fixed定位和absolute定位）的父級元素的border內(nèi)側(cè)左上角定位，會影響到其他的同級元素的定位，因為他脫離了文檔流