关于css:关于CSS单位的一些总结

3次阅读

共计 2792 个字符，预计需要花费 7 分钟才能阅读完成。

height 设置百分比的时候，简略的了解是绝对父结点的高来计算的，能够看个例子：

<!DOCTYPE html>
<html lang="zh-cn">

<body>
    <div style='width:500px;border: 1px solid blue;height:100px;'>
        <div style='display: inline-block;border: 1px solid red;height:200px;'>
            1
        </div>
        <div style='display: inline-block;border: 1px solid red;height:100%;'>
            2
        </div>
    </div>
</body>

</html>

咱们设置了父结点的高和兄弟结点的高，最终发现设置 100% 高的后果和父结点的高统一。

那么，如果咱们不给父结点设置高会怎么样？还是看看例子：

<!DOCTYPE html>
<html lang="zh-cn">
<body>

    <div style='width:500px;border: 1px solid blue;'>
        <div style='display: inline-block;border: 1px solid red;height:200px;'>
            1
        </div>
        <div style='display: inline-block;border: 1px solid red;height:100%;'>
            2
        </div>
    </div>

</body>

</html>

后果发现 height:100% 生效了。

是的，第一个孩子只是把父结点撑起来了。如果加个定位会怎么样？革新一下例子：

<!DOCTYPE html>
<html lang="zh-cn">

<body>

    <div style='width:500px;border: 1px solid blue;position: relative;'>
        <div style='display: inline-block;border: 1px solid red;height:200px;'>
            1
        </div>
        <div style='display: inline-block;border: 1px solid red;height:100%;position: absolute;'>
            2
        </div>
    </div>

</body>

</html>

哈哈哈，高又复原了。

可能你会好奇，如果我给父结点设置高的同时用孩子把父结点撑起来（同时加定位）会怎么样？看看例子：

<!DOCTYPE html>
<html lang="zh-cn">
    
<body>

    <div style='width:500px;border: 1px solid blue;height:100px;position: relative;'>
        <div style='display: inline-block;border: 1px solid red;height:200px;'>
            1
        </div>
        <div style='display: inline-block;border: 1px solid red;height:100%;position: absolute;'>
            2
        </div>
    </div>

</body>

</html>

后果，依照父结点计算。

padding 能够别离设置上下左右四个方向的间距，无论是哪个方向，如果应用百分比作为单位，都是参考父元素的宽计算。

来看个例子：

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <style>
        div {background-color: rgb(141, 141, 148);
            padding: 10%;
            width: 100px;
            height: 50px;
            background-clip: content-box;
            border: 1px solid red;
        }
    </style>
</head>

<body>

    <div></div>
</body>

</html>

咱们给 div 设置的padding:10%，试着缩放浏览器能够发现，只有浏览器的宽扭转了，padding 才会扭转，这样也初步验证了咱们下面提到的。

进一步，咱们对例子进行革新，加了一层设置了固定宽的父结点：

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <style>
        div.inner {
            /* 此时，这个 div 的 蕴含块就不是父结点，而是 body 了 */
            position: absolute;
            background-color: blue;
            padding: 10%;
            width: 100px;
            height: 50px;
            background-clip: content-box;
            border: 1px solid red;
        }
    </style>
</head>

<body>

    <!-- 能够试试给父 div 设置  position:relative  扭转蕴含块再试试 -->
    <div style='width:300px;height:100px;border:1px solid green;'>
        <div class='inner'></div>
    </div>

</body>

</html>

按理说，因为父结点的宽是固定的，无论浏览器宽（也就是 body 的宽）如何扭转，都不会影响 padding 的值，而事实却掐恰相同。

为什么？

因为咱们给设置 padding 的 div 设置了相对定位，此时，这个 div 曾经脱离文档流，如果仍旧依据物理上的父 div 来计算 padding 会不会不适合？所以，下面说的父结点不是物理上的，而是布局上的，精确的说，就是蕴含块。

因为设置了相对定位，此时其蕴含块曾经变成了 body，所以 padding 的百分比仍旧是绝对 body 的宽来计算的。

那么，padding 的这个个性有什么技巧能够总结？

如果咱们当初有一个容器，其宽不确定，可是咱们心愿外面的某个子元素高始终是此容器宽的一半，怎么办？

是的，padding 的这个特点就把宽和高分割起来了，你能够看看最终的例子：

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <style>
        body>div>div {display: inline-block;}

        div.inner {padding-top: 50%;}

        div.content {
            background-color: blue;
            height: 100%;
            position: absolute;
            width: 50%;
        }
    </style>
</head>

<body>

    <!-- 试试批改外层 div 的宽试试 -->
    <div style='width:300px;border:1px solid red;position: relative;'>
        <div class='inner'></div>
        <div class="content">
            这是文字哦！</div>
    </div>

</body>

</html>

正文完