- 写出以下
%分别有多少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
解析
- 首先明确box-item块会相对于box块定位，并且box块是box-item块的包含块；
- 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: 基于包含元素的宽度；
- 最容易混淆以致出错的就是
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>
