CSS - 元素竖向百分比的基准值是什么?

例如有一个外层DIV元素,设定width为500px,height为300px。然后在其内部添加一个DIV元素,这个时候,内部的DIV元素,如果设定height margin-top padding-top 百分比之后,他们的百分比基准值是什么呢?宽 OR 高 ?

目录

先来看一看高度

margin-top设定百分比呢?

padding-top设定百分比呢?

日常VS面试


先来看一看高度

比如我们子DIV元素,height设定为30%的话,看一下效果:

<html>
    <head>
        <meta charset="utf-8" />
        <title>元素竖向百分比的基准值</title>
        <style>
            .box1 {
                width: 500px;
                height: 300px;
                border: 1px solid blue;
            }
            .boxInner {
                width: 30%;
                height: 30%;
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
      <div class="box1">
        <div class="boxInner">

        </div>
      </div>
    </body>
</html>

结论:可以看出,子DIV元素,宽度设定百分比,基准值就是父元素的宽度,高度设定百分比,基准值就是父元素的高度。 

margin-top设定百分比呢?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>元素竖向百分比的基准值</title>
        <style>
            .box1 {
                width: 500px;
                height: 300px;
                border: 1px solid blue;
            }
            .boxInner {
                margin-top: 10%;
                width: 30%;
                height: 30%;
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
      <div class="box1">
        <div class="boxInner">

        </div>
      </div>
    </body>
</html>

以上代码中,我们给子元素设定了margin-top为10%;如果最终效果margin-top值为50,那么就是跟着宽度走,基准值就是宽度,如果margin-top值为30,那么就是跟着高度走,基准值就是高度啦。也就是如下图的高度部分

结论:margin-top值是50px,50px是500px的百分之10,而不是300px的百分之10.所以,子元素的margin-top设定百分之,基准值应该是宽度

padding-top设定百分比呢?

你是不是特别想说,也是宽度,没错,就是宽度。哈哈,不要急,用事实说话。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>元素竖向百分比的基准值</title>
        <style>
            .box1 {
                width: 500px;
                height: 300px;
                border: 1px solid blue;
            }
            .boxInner {
                padding-top: 10%;
                width: 30%;
                height: 30%;
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
      <div class="box1">
        <div class="boxInner">

        </div>
      </div>
    </body>
</html>

以上代码中,我们给子元素设定了padding-top 值为10%, 如果padding-top的最终值为50px,那么其基准值就是宽度,如果padding-top的最终值为30px,那么其基准值就是高度。

结论:很明显,这么高,肯定不可能是30px,咋看都是50px。所以padding-top设定百分比的基准值也是父元素的宽度

日常VS面试

可能你会觉得,你这么做有什么意义吗?你直接说两句话不得了:子元素的高度设定百分比,基准值就是父元素的高度;子元素设定margin-top 和 padding-top ,其基准值是父元素的宽度。啰里啰嗦那么多字,浪费我时间。

日常中,我们很多东西,觉得习以为常,这不是很普通的基础知识嘛,觉得自己很熟练了。但很多东西,如果你真实做过案例,印象就会加深。要不然,你日常觉得很普通的东西,如果印象不深,面试的时候,就很容易觉得模糊,甚至面试官如果转换个问法,就不知道怎么回答了。

所以面试是一次考试,也是一次总结,更是一次日常的输出。日常熟练了,面试更能得心应手。

相关推荐

  1. HTML 基本元素什么

    2024-06-10 20:30:03       34 阅读
  2. 什么CSS:target选择器

    2024-06-10 20:30:03       4 阅读
  3. 进度条 横向/

    2024-06-10 20:30:03       33 阅读
  4. 什么css初始化

    2024-06-10 20:30:03       38 阅读
  5. 什么CSS Hack

    2024-06-10 20:30:03       31 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-06-10 20:30:03       8 阅读
  2. 【Python教程】压缩PDF文件大小

    2024-06-10 20:30:03       9 阅读
  3. 通过文章id递归查询所有评论(xml)

    2024-06-10 20:30:03       10 阅读

热门阅读

  1. python

    2024-06-10 20:30:03       9 阅读
  2. PostgreSQL的发布和订阅功能

    2024-06-10 20:30:03       9 阅读
  3. 每日一题38:数据分组之订单最多的客户

    2024-06-10 20:30:03       7 阅读
  4. Ubuntu中安装MySQL root 密码修改

    2024-06-10 20:30:03       6 阅读
  5. 心灵清闲

    2024-06-10 20:30:03       8 阅读
  6. 深入解析分布式链路追踪:原理、技术及应用

    2024-06-10 20:30:03       9 阅读
  7. electron录制工具-desktopCapturer录屏

    2024-06-10 20:30:03       8 阅读
  8. multisim仿真电路图

    2024-06-10 20:30:03       8 阅读
  9. 公式面试题总结(三)

    2024-06-10 20:30:03       7 阅读
  10. 【设计模式】基本名词

    2024-06-10 20:30:03       8 阅读