【知识点】关于 CSS 设置百分比的那些问题
2019-03-19 本文已影响0人
李李李李李晓华
今天写项目用到了百分比布局，突然想写点关于 css百分比设置的。
记得经常有人问，CSS 的百分比到底参考谁呀？一会参考自己的一会参考父级的？？？那我就总结一下下吧~
我又来了
回想一下，我们在使用哪些属性的时候会使用百分比？
width、height、padding、margin、font-size、line-height、background-position、top、left、bottom、right、transform:translate()...
那对这些属性设置百分比的时候，会参照自身还是其他元素呢？
案例一：正常文档流的布局
从案例里边看一下吧~
- 三层结构，由外向里分别是outer、inner、con。
- 对inner设置了宽高和字体大小。con的样式书写了百分比。
- 然后根据浏览器渲染出来的结果，我对百分比后边进行了注释。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .outer{ width: 1000px; height: 700px; font-size: 30px; background: #888888; } .inner{ width: 800px; height: 500px; font-size: 20px; background-color: deepskyblue; } .con{ width: 40%;/*320px 父级宽度800*40%=320*/ height: 30%;/*150px 父级高度500*30%=150*/ margin: 10%;/*80px 无论是上下还是左右，都是父级的宽度800*10%=80px*/ padding: 20%;/*160px 无论上下还是左右，都是父级的宽度800*20%=160px*/ font-size: 100%;/*20px 父级的字体大小20px*100%=20*/ line-height: 100%;/*20px 自身字体大小 的100%*/ background:deeppink; } </style> </head> <body> <div class="outer"> <div class="inner"> <div class="con">你好 <br>好好好</div> </div> </div> </body> </html>那就总结一下:
在正常页面流中（没有定位和浮动）百分比参考值如下：
- 当父级设置宽高的时候，
width和height分别参考父级的宽高，如果父级没有设置宽度，width依然可以参照父级的默认宽度。但是如果父级没有设置高度，那么height属性设置的百分比不生效。margin和padding无论是哪个方向的，都是参照父级的宽度来设置的font-size是相对父级的文字大小来生成的line-height是相对自身文字大小来设置的background-position是自身所在元素的宽度（或高度）减去 背景图片的宽度（或高度）再 乘以 百分比background-size是依照背景图所在元素的宽度和高度计算的
案例二：浮动的元素设置百分比
大家可以复制上一个案例去尝试。
当对con设置设置浮动以后，所有的百分比属性值没有受影响。
案例三：定位的元素设置百分比
还是拿刚才的案例，当对con书写了
position：absolute定位的时候，发现很多值发生变化了，说明定位对元素的百分比值有影响，为什么呢？首先要了解一个概念，叫做包含块我们这里直说绝对定位元素的包含块，绝对定位元素的包含块是沿着其父级和祖辈一层一层寻找，直到有一个祖辈元素设置了定位属性不是static的值（fixed、relative、absolute等），这个祖辈元素就是绝对定位元素的包含块。
所以我们对outer设置一个
position：relative，那么outer就是con的包含块。然后我们来看一下结果吧~<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .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*/ } </style> </head> <body> <div class="outer"> <div class="inner"> <div class="con">你好 <br>好好好</div> </div> </div> </body> </html>总结一下：
- 在绝对定位元素上，
width，height，margin，padding，left，right，bottom，top等属性都是参照包含块的宽高来计算百分比的。- 而在定位元素上，
font-size依然参照自己的父级计算百分比，line-height依然参照自身的字号大小来计算百分比。
知识已经梳理完成了，要不小伙伴复制代码去编辑器试一下，然后看一下浏览器渲染的盒子模型，看一下自己的理解情况吧~
拜拜，晚安~
