css height width padding margin 百分比取值的基准问题

最新推荐文章于 2024-08-07 15:58:16 发布

孤枫_J

最新推荐文章于 2024-08-07 15:58:16 发布

阅读量5k

点赞数 5

分类专栏： HTML+CSS

本文链接：https://blog.csdn.net/qq_35809245/article/details/54233662

版权

HTML+CSS 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

新地址：https://github.com/jimwmg/JiM-Blog
标准流下

一首先，明确width height padding margin 取值可能的四个值：

可能的值
值描述
auto 浏览器计算内边距。
length 规定以具体单位计的内边距值，比如像素、厘米等。默认值是 0px。
inherit 规定应该从父元素继承相应属性。

% 重点理解：width 是基于父元素的 width 计算的值
height 是基于父元素的 height 计算的值
padding 和 margin 的无论上下左右值都是基于父元素的宽度
二直接撸代码吧

    <style>
    .box {
        width: 800px;
        height: 500px;
        background-color: pink;
        overflow: hidden;
        /*这行代码解决垂直外边距塌陷问题*/
    }
    .one {
        width: 500px;
        height: 200px;
        padding: 50px ;
        margin: 100px;
        background-color: green;
    }
    .two {
        width: 50%;
        /*相对于父元素的宽度 500*50%*/
        height: 50%;
        /*相对于父元素的高度 200*50%*/
        background-color:yellow;
        padding-left: 10%;
        /*相对于父元素的宽度 500*10%*/
        padding-top: 10%;
        /*相对于父元素的宽度 500*10%*/
        margin-left: 10%;
        /*相对于父元素的宽度 500*10%*/
        margin-top: 10%;
        /*相对于父元素的宽度 500*10%*/
    }
</style>
</head>
<body>
<div class="box">
    <div class="one">
        <div class="two"></div>
    </div>
</div>
</body>

具体效果大家可以复制代码拿到自己电脑上看，这里不再细说了。一会要去约个饭，有点上火

三如果元素设置了定位呢，这个时候，定位的子元素的百分比的值相对于哪个元素呢？
第一种情况：子元素设置了定位：
给 box 添加 position :relative ;
给 two 添加 position : absolute;

.two {
        width: 50%;
        /*相对于定位了的父元素的宽度 800*50%*/
        height: 50%;
        /*相对于定位了的父元素的高度 500*50%*/
        background-color:yellow;
        padding-left: 10%;
        /*相对于定位了的父元素的宽度 800*10%*/
        padding-top: 10%;
        /*相对于定位了父元素的宽度 800*10%*/
        margin-left: 10%;
        /*相对于定位了的父元素的宽度 800*10%*/
        margin-top: 10%;
        /*相对于定位了的父元素的宽度 800*10%*/
        position: absolute;

    }

也就是说，如果子元素设置了定位，那么其 height width padding margin 等值如果以百分比来计算是相对于已经定位了的父元素，（没有定位的父元素会跳过）为基准的。

第二种情况，如果子元素没有设置了定位：

.two {
        width: 50%;
        /*相对于父元素的宽度 500*50%*/
        height: 50%;
        /*相对于父元素的高度 200*50%*/
        background-color:yellow;
        padding-left: 10%;
        /*相对于父元素的宽度 500*10%*/
        padding-top: 10%;
        /*相对于父元素的宽度 500*10%*/
        margin-left: 10%;
        /*相对于父元素的宽度 500*10%*/
        margin-top: 10%;
        /*相对于父元素的宽度 500*10%*/
    }

此时无论父元素是否设置定位，子元素的width height padding margin 通过百分数取值的时候，都是相对于其直接父元素。