内容简介:说实话,看到这道题,刚开始我是自信满满的,可算到后面自己就越来越不确定了,为什么会出这么简单的题呢?由此可见,自己的基本功真不扎实呀!为了展示,我加了两个背景,效果见
-
写出以下
%
分别有多少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>
以上所述就是小编给大家介绍的《前端面试之CSS相关》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。