height 高
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 内间距
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>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。