前端面试之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>