Css基础教程(二十)

1.高度使用百分比

大盒子里面套一个小盒子，如果外层容器高度确定，那么内层容器高度可以使用百分比。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在Css中正确使用百分比</title>
    <style>

        #outer{
            width: 400px;
            height: 400px;
            background: lightblue;
        }

        #inner{
            width: 100%;
            height: 50%;
            background: lightpink;
        }
    </style>
</head>
<body>
<h1>在Css中正确使用百分比</h1>
<hr>

<div id="outer">
    <div id="inner">
    </div>
</div>

</body>
</html>

运行结果：

如果外层容器高度不确定，那么内层高度不能使用百分比。因为内层容器本身参与外层容器高度的计算，因此内层容器的高度也无法计算，形成悖论。

例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在Css中正确使用百分比</title>
    <style>

        #outer{
            width: 400px;
            height: auto;
            background: lightblue;
        }

        #inner{
            width: 100%;
            height: 50%;
            background: lightpink;
        }
    </style>
</head>
<body>
<h1>在Css中正确使用百分比</h1>
<hr>

<div id="outer">
    <div id="inner">
       inner div
    </div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
</div>

</body>
</html>

运行结果：

除非内层容器使用absolute绝对定位脱离文档流，相当于外层容器可以计算高度，那么内层容器也可以使用百分比。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在Css中正确使用百分比</title>
    <style>

        #outer{
            width: 400px;
            height: auto;
            background: lightblue;
            position: relative;
        }

        #inner{
            width: 100%;
            height: 50%;
            background: lightpink;
            position: absolute;
        }
    </style>
</head>
<body>
<h1>在Css中正确使用百分比</h1>
<hr>

<div id="outer">
    <div id="inner">
       inner div
    </div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
</div>

</body>
</html>

运行结果：

2.margin使用百分比

因为一个容器的宽度一般总是能确定，因此margin-top与margin-bottom也存在使用百分比的悖论。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #outer{
            width: 600px;
            height: 400px;
            background: lightblue;
            margin: 0px auto;
            position: absolute;
        }

        #inner{
            width: 100%;
            height: auto;
            background: lightpink;
            margin-top: 50%;
            /*给人一种错觉好像是外层盒子高度的50%，那么也就是200px*/
            position: relative;
        }
    </style>
</head>
<body>
<h1>margin的理解</h1>
<hr>

<div id="outer">
    <div id="inner">
        <br><br><br><br>
    </div>
</div>
</body>
</html>

运行结果：

3.vw/vh和100%的区别

视口（viewport）在桌面端，指的是浏览器的可视区域；在移动端，指的是Viewport中的Layout Viewport。浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。在css3规范中，1 vw 等于视口宽度的1%，1 vh 等于视口高度的1%。vh 和 vw 是相对于视口的高度和宽度。1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度。比如：浏览器高度950px，宽度为1920px, 1 vh = 950px/100 = 9.5 px，1vw = 1920px/100 =19.2 px ; 100 vh = 950 px, 100 vw = 1920px (100 vh 和 100 vw 即视口的高度和宽度)

vw/vh和100%的区别:

100%是相对于包含它的最近的父元素的高度和宽度。 vw (viewport width) vh (viewport height) 是相对于视口的宽度和高度，用vw，vh设定的大小只和视窗大小有关，和他们的父元素高度宽度没关系，可以用来开发自适应多种屏幕设备。

结论：

在默认的水平文档流方向下，CSS margin和padding属性的垂直方向的百分比值都是相对于宽度计算的，这个和top, bottom等属性的百分比值不一样。