詳解CSS中的百分號%設定

coderwq 2019-03-25 13:41:42 928 收藏 2
分類專欄： CSS樣式
版權
一、width height中的%
百分號使用較頻繁的就是width、 height設定標籤的寬高了，此時width:50%相當於父元素寬度的50%，height: 50%相當於父元素高度的50%。當父元素是body時，設定height:50%無效，而寬度widht:50%有效，body高度不確定，網上說高度是0導致的。
html程式碼：

 <div class="father">
        <div class="son1">
            <div class="son2"></div>
        </div>
    </div>

css程式碼：

  .father{
        width: 50%;
        height: 50%; /*設定高度無效*/
        background-color: #0f0;
    }
    .son1{
        width: 50%;
        height: 500px;
        background-color: yellow;
    }
    .son2{
        width: 50%;/*相當於父元素的寬*/
        height: 50%;/*相當於父元素的高*/
        background-color: blue;
    }
    .father,.son1,.son2{
        margin: 0px auto;
    }
 

執行結果：

二、margin padding中的%

margin-top margin-right margin-bottom margin-left:40%中設定百分號都相當於父元素的寬度進行計算大小；同理同樣處於盒子模型中的padding設定百分號時也是相對於父元素的寬度；w3c指出% 規定基於父元素的寬度的百分比的外邊距。
html程式碼：

 <div class="father">
        <div class="son1">
            <div class="son2"></div>
        </div>
    </div>

css程式碼：

    .father{
        width: 50%;
        height: 50%; /*設定高度無效*/
        background-color: #0f0;
    }
    .son1{
        width: 50%;
        height: 500px;
        background-color: yellow;
        border-top: 2px solid red;
    }
    .son2{
        width: 50%;/*相當於父元素的寬*/
        height: 50%;/*相當於父元素的高*/
        background-color: blue;
        margin: 40% 40%;/*相當於父元素的寬度*/
         /* padding-bottom: 20%;相當於父元素的寬度
    }
    .father,.son1,.son2{
        /* margin: 0px auto; */
    }

執行結果：

三、border-radius中的%

border-raduis設定邊界四個邊界的弧度，共有8個引數來設值四個邊界角的弧度，border-raduis也常用%中設定；此時如border-raduis：50% 50% 50% 50%含義border-top-left: 弧度垂直半徑為該標籤高度的50%，弧度水平半徑為該標籤寬度的50%,border-top-right、border-bottom-right、border-bottom-left同理；故由此知border-raduis中的%號是相當於當前元素的寬高來設定垂直和水平半徑的。利用border-raduis這一屬性，可設定出不同的形狀。如半圓、橢圓、膠囊、環等、圓。
html程式碼：

   <div class="circle"> </div>
    <div class="jiaonang"></div>
    <div class="ring"></div>
    <div class="halfcircle"></div>

css程式碼：

  /* border %分號相對於自身的寬做水平半徑 相當於自身的高做垂直半徑 */
    /* border 共有8個值  border的角弧線由垂直半徑和水平半徑決定,僅有一個值時垂直半徑和水平半徑相同*/
    .circle{
        width: 300px;
        height: 100px;
        background-color: red;
        border-radius:50%;
        /* border-top-left-radius: 50%;
        border-bottom-right-radius: 50%;
        border-top-right-radius: 50%;
        border-bottom-left-radius: 50%; */
    }
    /* 高的一半 */
    .jiaonang{
        width: 200px;
        height:100px;
        background-color: #00f;
        border-radius: 50px;
    }
    .ring{
        width: 100px;
        height: 100px;
        /* background-color: #0ff; */
        border-radius: 50%;
        border: 30px solid #0ff;
    }
    /* 整個高 */
    .halfcircle{
        width: 100px;
        height: 50px;
        background-color: rgb(178, 224, 224);
        border-radius: 50px 50px 0px 0px ;
    }

執行結果：

四、定位absolute relative中的%

positon:absolute定位脫離了標準的文件流(普通流)，是相對最近的一個具有定位的祖先元素進行定位，所以此時設定top、bottom：50%是相對於其定位元素的高度進行計算的，left、right相對於定位元素的寬度計算的；非父元素的寬度或高度進行計算的。而positon：relative是相對於自己進行定位，故此時top、bottom：50%是相對於其父元素的高度進行計算的，left、right相對於父元素的寬度計算的
html程式碼：

       <div class="abso">
        <div class="absoSon">
            <div class="absoSon2"></div>
        </div>
    </div>
    <div class="rela">
        <div class="relaSon"></div>
    </div>

css程式碼：

     .abso{
        background-color: #c0c0c0;
        position: relative;
        width: 400px;
        height: 200px;
    }
    .absoSon{
        width: 50%;/*width：200px height:100px*/
        height: 50%;
        background-color: yellow;
    }
    .absoSon2{
        width: 50%;/*未設定絕對定位前width 和height%都相當於父元素的寬高進行計算*/
        height: 50%;/*width: 200px height: 100px*/
        background-color: skyblue;
        position: absolute; /*設定絕對定位後相對於距離其最近的具有定位的祖先元素進行定位，此時所有的%規則都應相對於定位的祖先元素設定，*/
        top: 50%;/*如width height%相對於定位元素的寬高進行設定 top bottom%相當於定位元素的高進行計算 left  right%相當於定位元素的寬進行計算*/
        left: 50%;
        /* margin-left: -50%;即200px  相對定位元素的寬度進行設定 */
        /* margin-top: -50%; 200px  */
    }
    .rela{
        border: 3px red solid;
        background-color: #c0c0c0;
        width: 400px;
        height: 200px;
    }
    .relaSon{
        background-color: yellow;
        width: 50%;
        height: 50%;
        position: relative;
        top: 50%;/*top bottom 相當於父元素的高進行計算*/
        left:50%;/*left right相當於父元素的寬進行計算*/
    }

執行結果：

總結使用百分號%:

1. width、height、relative：width相對於父元素的寬；height相對於父元素的高進行計算。relative:top、bottom相對父元素的高;left 、right相對於父元素的寬進行計算。
2. border-raudis：相對自身標籤的寬高設定每個邊角的垂直和水平半徑。
3. margin、padding: left、right、top、bottom相當於父元素的寬度進行。
4. absolute：top、bottom相對定位元素的高;left 、right相對於定位元素的寬進行計算。同時位於absolute中的其他屬性如width heiht margin等都相當於定位元素進行計算。
5. line-hight設定內聯元素垂直居中時,%相對於文字的行高進行計算，非父元素。

原文連結：https://blog.csdn.net/qq_40832236/article/details/88785184