最近在GitHub上写了一个CSS系列的知识点总结
github地址： https://github.com/sxzy/myCSS/issues/4 ，喜欢可以关注哦。
CSS中涉及到的百分数有很多，所以有时候多起来的话，概念也就多了，所以也会有些混淆的地方，这里就做一个简单的总结吧，用一张脑图汇总总结了一下。
百分数.png
几点说明:
百分数实现水平垂直居中
结合left， translate基于的百分数不同，可以实现给元素设置水平垂直居中。
通过设置一个父元素为非static定位，子元素为绝对定位，因为绝对定位的left和top值之基于包含块的宽度和高度的，而translate是基于元素自身的宽度和高度，所以可以像下面这样设置，实现水平垂直居中。
<div class='father'><div class='center'></div></div>
.father {
position: relative;
/* width: 600px; */
height: 600px;
border: 1px solid red;
}
.center {
width: 100px;
position: absolute;
height: 100px;
background: darkslateblue;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
水平垂直居中.jpg
为什么padding和margin是基于包含块的宽度
首先对于包含块的宽度是占一整行的，而高度如果没有设置的话，则由其子元素的内容高度所决定，如果是基于包含块的高度，一旦修改了margin和padding值，那么包含块的高度就会发生变化，而一旦包含块的高度发生变化，padding和margin又应该变化，就会造成死循环。而基于宽度则不会有这个问题，因为块元素的宽度就是一整行的宽度。
