html 设置百分比,【知识点】关于 CSS 设置百分比的那些问题

还是拿刚才的案例，当对con书写了position：absolute定位的时候，发现很多值发生变化了，说明定位对元素的百分比值有影响，为什么呢？首先要了解一个概念，叫做包含块

我们这里直说绝对定位元素的包含块，绝对定位元素的包含块是沿着其父级和祖辈一层一层寻找，直到有一个祖辈元素设置了定位属性不是static的值(fixed、relative、absolute等)，这个祖辈元素就是绝对定位元素的包含块。

所以我们对outer设置一个position：relative，那么outer就是con的包含块。然后我们来看一下结果吧~

Title

.outer{

width: 1000px;

height: 700px;

font-size: 30px;

background: #888888;

position: relative;

}

.inner{

width: 800px;

height: 500px;

font-size: 20px;

background-color: deepskyblue;

}

.con{

width: 40%;/*400px 包含块outer宽度1000*40%=400*/

height: 30%;/*210px 包含块高度700*30%=210*/

margin: 10%;/*100px 无论是上下还是左右，都是包含块的宽度1000*10%=100px*/

padding: 20%;/*200px 无论上下还是左右，都是包含块的宽度1000*20%=200px*/

font-size: 100%;/*20px 文字还是相对父级的字体大小20px*100%=20*/

line-height: 100%;/*20px 行间距还是相对自身字体大小 的100%*/

/*背景图定位设置百分50%，和center的效果一样*/

background:deeppink url("./01.png") 50% 50% no-repeat;

/*float: left;*/

position: absolute;

left: 50%;/*500px 相对包含块的父级宽度 1000*50%=500px*/

right: 50%;/*500px 相对包含块的父级宽度 1000*50%=500px*/

top: 50%;/*500px 相对包含块的父级高度 700*50%=350px*/

bottom: 50%;/*500px 相对包含块的父级宽度 700*50%=350px*/

}

你好
好好好

总结一下：

在绝对定位元素上，width，height，margin，padding，left，right，bottom，top等属性都是参照包含块的宽高来计算百分比的。

而在定位元素上，font-size依然参照自己的父级计算百分比，line-height依然参照自身的字号大小来计算百分比。