前端面试之CSS相关

栏目: CSS · 发布时间: 5年前

内容简介:说实话,看到这道题,刚开始我是自信满满的,可算到后面自己就越来越不确定了,为什么会出这么简单的题呢?由此可见,自己的基本功真不扎实呀!为了展示,我加了两个背景,效果见
  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>

以上所述就是小编给大家介绍的《前端面试之CSS相关》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

计数组合学(第一卷)

计数组合学(第一卷)

斯坦利 / 付梅、侯庆虎、辛国策 / 高等教育 / 2009-6 / 42.00元

《计数组合学(第1卷)》是两卷本计数组合学基础导论中的第一卷,适用于研究生和数学研究人员。《计数组合学(第1卷)》主要介绍生成函数的理论及其应用,生成函数是计数组合学中的基本工具。《计数组合学(第1卷)》共分为四章,分别介绍了计数(适合高年级的本科生),筛法(包括容斥原理),偏序集以及有理生成函数。《计数组合学(第1卷)》提供了大量的习题,并几乎都给出了解答,它们不仅是对《计数组合学(第1卷)》正......一起来看看 《计数组合学(第一卷)》 这本书的介绍吧!

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具