关于width: 100%的一些看法

最新推荐文章于 2024-02-28 11:22:44 发布

weixin_33754913

最新推荐文章于 2024-02-28 11:22:44 发布

阅读量1.5k

点赞数

原文链接：https://juejin.im/post/5cdcf5cff265da039a3d9596

版权

一.position对width 设置为百分比的影响

<html>

<head>
    <style type="text/css">
        img {
            width: 50%
        }

        body {
            margin: 8px;
        }
    </style>
</head>

<body>

    <div style=" min-height: 10px; background: red; ">
        <div><img src="/i/eg_smile.gif" /></div>
    </div>

</body>

</html>复制代码

如下图所示,首先我们有一个图片被两层div给包裹,而body有一个margin,图片宽度为50%,最外层的div有一个最小高度(用于后面的测试,当img设置了其他position之后可能高度塌陷);

1.当不设置position的时候,img的50%是相对父元素(也就是第二层的div)的宽度的50%;因为最外层和第二层的宽度未设置,就是auto,就是自动铺满的

2.对img的position进行修改,发现当为relative的时候,宽度不变(仍相对于父元素),但当position为fixed和absolute的时候宽度变大了(因为这时候不是相对父元素了);经验证当为fixed的时候,相对于body;当为absolute的时候宽度是相对于祖辈元素中第一个非static元素的宽度百分比直到body;

上面只是确定了是基于哪个元素的百分比.其实position为fixed和absolute时,可能还会影响到其他的,先看第二点.

二.border-box对width 设置为百分比的影响

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>测试border-box对百分比宽度的影响</title>
    <style type="text/css">
        * {
            box-sizing: border-box;
        }

        .parent {
            background: steelblue;
            padding: 20px;
            width: 500px;
        }

        .child {
            background: wheat;
            height: 50px;
            width: 100%;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>

</html>复制代码

1.如下图所示,当div都为border-box;时,计算子元素的100%宽度,是相对于父元素的内容的宽度;

即: 子元素content width + 子元素padding width + 子元素border = 父元素content width * 百分比;(440px + 10px * 2 + 0 = 460px * 100%)

所以当都为border-box的时候,子元素在设置了width为100%,在不设置margin的情况下,子元素不会溢出父元素;

额外补充,当元素为border-box时,设置的宽度为内容宽度+padding宽度+border宽度的总和,所以parent元素的总宽度为500px,内容宽度为460px,padding宽度为40px;

2.如下图,当div都为content-box时,子元素计算的100%宽度,是相对于仍然为父元素的内容的宽度;虽然都是内容的宽度并且width都通过样式设置为了500px,但border-box设置的是盒子除去margin所占的总宽度(内容宽度需要用500px减去padding),而content-box时设置的宽度为盒子的内容宽度,所以child的宽度直接就为500px,但child所占的总宽度为600px(内容宽度+padding宽度,为了更明显padding设为了50px),导致child溢出

额外补充,,当元素为content-box时,设置的宽度为内容宽度宽度,所以Parent元素的总宽度需要计算:内容宽度+padding宽度+border宽度的总和,就是500px+40px+0=540px. 对content-box的盒子设置width时,设置的是内容宽度,而对border-box的盒子设置width时,设置的是总的宽度(内容宽度+padding宽度+border宽度)

3.最后再声明一点,宽度的计算方式都是根据父元素的内容宽度来计算的,至于这个百分比宽度是否包括padding,就只和子元素的box-sizing有关了,父元素的box-sizing不同也没有关系(但父元素的自身的box-sizing和自身宽度计算有关,所以算是间接关系吧,也可以说没关系);比如上面那个例子,如果我把child设置为border-box,那么child的宽度为500px,因为是border-box,所以设置的是总的宽度,即500px=内容宽度+padding宽度,所以可以推出内容宽度为400px

三.position的其他影响

我们通过做第二个实验的时候,重新做第一个例子

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>测试border-box对百分比宽度的影响</title>
    <style type="text/css">
        * {
            box-sizing: border-box;
        }

        .child {
            width: 100%;
            background: wheat;
            height: 20px;
            position: absolute;
        }

        .parent {
            padding: 20px;
            background: steelblue;
            width: 500px;
            position: relative;
        }

        .grad {
            padding: 20px;
            background: turquoise;
        }

        body {
            margin: 0px;
        }
    </style>
</head>

<body>
    <div class="grad">
        <div class="parent">
            <div class="child"></div>
        </div>
    </div>
</body>

</html>复制代码

我们发现child元素的总宽度为500px,内容宽度为而Parent的总宽度为500px,内容宽度却只有460px,所以child的宽度不是我们说的集成父元素的内容宽度,而是父元素的总的宽度

四.总结

0.什么时候起作用?

子元素肯定要是块级元素或则display为block等情况.

1.基于谁?

基于父元素或祖辈元素(跟当前元素的position有关),position为absolute则基于第一个非static祖辈元素,为fixed则基于body

2.子元素的宽度是基于父元素(或者说目标元素)的内容宽度还是总的盒子的宽度?

当子元素的position为absolute或fixed的时候,width为总的宽度(padding宽度+ 内容宽度+border宽度),而其他情况都是基于目标元素的内容宽度

3.子元素的百分比宽度样式设置的是子元素的内容宽度还是总的宽度?

这个只跟子元素的box-sizing有关,当为border-box的时,设置的是盒子的总宽度,当为content-box是设置的盒子的内容宽度

4.若父元素宽度固定,子元素的宽度怎么计算?若不固定怎么计算?

当父元素宽度确定时,子元素的宽度百分比能很好计算出来(包括父元素宽度固定,子元素设置为float),只用根据上面三点计算;当父元素的宽度不确定时,父元素会自动铺满上层元素,但当父元素position为absolute或fixed或浮动时,父元素的宽度会缩到最小,这时子元素的宽度不好计算,有可能为0,有可能其他子元素把父元素的宽度撑开,这时子元素也有宽度

以上是本人观察到的情况,不知道是否完全正确

转载于:https://juejin.im/post/5cdcf5cff265da039a3d9596

weixin_33754913

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
关于width: 100%的一些看法

一.position对width 设置为百分比的影响<html><head> <style type="text/css"> img { width: 50% } body { margin: 8px; } </style&...
复制链接

扫一扫