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>