前端面試之CSS相關

1. 寫出如下 %分別有多少 px：

<div class="box">
    <div class="box-item"></div>
</div>
<style>
    .box {
        position: relative;
        width: 1000px;
        height: 500px;
    }
    .box-item {
        position: absolute;
        top: 50%;
        bottom : 50%; 
        left: 50%;
        right: 50%;
        width: 50%;
        height: 50%;
        padding-top: 10%;
        padding-bottom: 10%;
        margin-right: 10%;
        margin-top: 10%;
    }
</style>

說實話，看到這道題，剛開始我是自信滿滿的，可算到後面本身就愈來愈不肯定了，爲何會出這麼簡單的題呢？因而可知，本身的基本功真不紮實呀！爲了展現，我加了兩個背景，效果見CodePen

解析

1. 首先明確box-item塊會相對於box塊定位，而且box塊是box-item塊的包含塊；

2. top, bottom, left, right, width, height, padding, margin這些屬性的值爲%時，計算的規則以下：

   • top, bottom, height: 基於包含元素的高度；
   • left, right, width, padding-left, padding-right, margin-left, margin-right, padding-top, padding-bottom, margin-top, margin-bottom: 基於包含元素的寬度；
3. 最容易混淆以至出錯的就是 padding-top, padding-bottom, margin-top, margin-bottom,也是本題的主要考察點：margin和padding四個方向的值爲%時，都是基於包含元素的寬度計算的，必定要記住！

答案

<div class="box">
    <div class="box-item"></div>
</div>
<style>
    .box {
        position: relative;
        width: 1000px;
        height: 500px;
    }
    .box-item {
        position: absolute;
        top: 50%; /* 250px; */
        bottom : 50%; /* 250px; */
        left: 50%; /* 500px; */
        right: 50%; /* 500px; */
        width: 50%; /* 500px; */
        height: 50%; /* 250px; */
        padding-top: 10%; /* 100px; */
        padding-bottom: 10%; /* 100px; */
        margin-right: 10%; /* 100px; */
        margin-top: 10%; /* 100px; */
    }
</style>