六、任務四——定位和居中問題

時間 2019-11-29

原文原文鏈接

要實現如圖中所示的效果：wordpress

<style>
.cicle{
    width:50px;
    height:50px;
    background-color: #fc0;
}
.one{
    -moz-border-radius:0  0 100% 0;  
    -webkit-border-radius:0  0 100% 0;  
    border-radius:0  0 100% 0;   
}
.two{
    -moz-border-radius:50px 0 0 0;  
    -webkit-border-radius:50px 0 0 0;  
    border-radius:50px 0 0 0; 
}
</style>
<body>
    <div class="container">
        <div class="cicle left"></div>
        <div class="cicle right"</div>
    </div>
</body>

關於四分之一圓的實現問題請看CSS3 border-radius 屬性以及border-radius測試，先看使兩個四分之一圓位於矩形的左上角和右下角有兩種定位方法：佈局

（1）絕對定位：post

矩形和扇形都設置position：absolute，相對於矩形定位，兩個扇形脫離普通流，重疊於左上角，如圖：測試

　　左上角的不用移動，右下角的相對於矩形定位，right、bottom均爲0便可。flex

（2）相對定位：flexbox

兩個扇形設置position：relative，相對定位的元素不會脫離普通流，left、top等屬性也是相對於元素在普通流中的位置進行定位，未定位的扇形位置如圖所示：

　　　因此右下角的扇形的屬性爲「left：350px；top：100px；」

接下來要實現灰色矩形水平垂直居中，我首先想到的就是利用絕對定位，後來看了其餘人的答案，發現了其餘幾種方法(包括但不限於任務四的解決方法，主要是元素的水平垂直居中問題），現總結以下：

1、position方式：

主要就是矩形設置絕對定位，相對於body對象定位，但水平垂直居中效果的實現又有幾個不一樣的方法：

（1）負外邊距方式（寬高固定）：

.container{

    background-color: #ccc;

    position:absolute;

    height:200px; width:400px;

    left:50%; top:50%;

    margin:-100px 0 0 -200px;     /*負外邊距分別爲寬高的一半*/

}

矩形設置position：absolute，矩形相對於body對象進行絕對定位，設置left和top屬性均爲50%，同時設置margin-left和margin-top分別爲矩形寬度、高度的一半，這樣就能夠實現矩形水平垂直居中了。

　　　　這個方法須要提早知道元素的尺寸，不然margin負值的調整沒法精確。

（2）margin：auto方式（寬高固定）：

.container {

    width: 400px; height: 200px;

    position: absolute;

     left: 0; top: 0; right: 0; bottom: 0;

    margin: auto;  

}

這種方法也能夠實現水平垂直居中，簡單來講就是：在普通流（normal flow）中，margin:auto的效果等同於margin-top:0;margin-bottom:0。 position：absolute；使container跳出了普通流，爲container設置top: 0; left: 0; bottom: 0; right: 0;將給瀏覽器從新分配一個邊界框，可是此時該塊區域將填充其父元素的全部可用空間（父元素通常爲body或者聲明爲position:relative;的容器），因此給內容塊設置一個高度height或寬度width，可以防止內容塊佔據全部的可用空間，促使瀏覽器根據新的邊界框從新計算margin:auto。

總而言之：絕對定位元素不在普通內容流中渲染，所以margin:auto可使內容在經過top: 0; left: 0; bottom: 0;right: 0;設置的邊界內垂直居中。

（3）transform方式（寬高無限制）：

.container {

    width: 400px; height: 200px;

    position: absolute;

     left: 50%; top: 50%;

    transform: translate(-50%, -50%);

}

　　 CSS3中transform屬性的translate值表示的是相對於自身大小的偏移量，因此不管絕對定位元素的尺寸是多少，這種方法的顯示效果都是水平垂直居中的（若是不設置寬高，container會被內容撐開居中顯示，若是沒有內容，container不顯示）。當要求矩形高度是根據內容動態變化的時候能夠用這種方式，可是兼容性很差。

（4）left/right/top/bottom均爲25%（寬高不固定）：

.container{
    position: absolute;
    top:25%;
    bottom:25%;
    right:25%;
    left:25%;
}

　　這種方法矩形尺寸會隨着瀏覽器窗口變化而變化，但始終是水平垂直居中的。

2、display：table方式：

<style> 
html,body{
    height:100%;
    width:100%;
}
.parent{
     display:table;
     height:100%;
     width:100%;
}
.inner{
    display:table-cell;  
    vertical-align: middle;
}
.container{
    background-color: #ccc;
    width:400px; height:200px;
    margin:0 auto;
}
</style>
<div class="parent">
     <div class="inner">
            <div class="container">
                  <div class="cicle one"></div>
                  <div class="cicle two"></div>
            </div>
   </div>
</div>

display屬性定義創建佈局時元素生成的顯示框類型。display：table表示parent元素會做爲塊級表格來顯示，display：table-cell表示inner元素會做爲一個表格單元格顯示，而vertical-align：middle使得表單元格中的內容垂直居中顯示，container再設置margin：0 auto；就達到了水平垂直居中要求。

那麼爲何html/body/parent都設置width：100%；height：100%；呢？

由於矩形要求是相對於整個瀏覽器窗口垂直居中，因此parent尺寸設置爲width：100%；height：100%；就能夠了，可是《css權威指南》指出height/width百分數是相對於包含塊的，parent的height/width相對於body，但因爲body沒有設置height/width，《css權威指南》又指出，若是沒有顯示聲明包含塊的height/width，百分數高度會重置爲auto，因此上面parent的width/height設置爲任何值都跟沒設置同樣，也就是要設置parent爲寬高100%，必須設置其上一級div也就是body的寬度或高度，不然無效。同理因爲body寬高設置的是100%，若是沒有顯式設置html，body仍是至關於沒設置。又由於html尺寸由瀏覽器窗口控制，因此html，body，div都要設置height/width爲100%。

總之：要設置div100%顯示，必須設置其上一級div的寬度或高度，不然無效。

3、flex方式：

html,body,.parent{
    width:100%;
    height:100%;
 }
.inner{
    display: -moz-box;                      /* Firefox */
    display: -ms-flexbox;                   /* IE10 */
    display: -webkit-box;                   /* Safari */ 
    display: -webkit-flex;                  /* Chrome, WebKit */
    display: box; 
    display: flexbox; 
    display: flex;  
    width: 100%;  height: 100%;
    justify-content: center;        
    align-items: center;
}
.container{
    position: relative;
    width:400px;
    height:200px;
    background-color: #ccc;
}