一张图说明CSS中的各种百分数

最近在GitHub上写了一个CSS系列的知识点总结
github地址： github.com/sxzy/myCSS/… ，喜欢可以关注哦。

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又应该变化，就会造成死循环。而基于宽度则不会有这个问题，因为块元素的宽度就是一整行的宽度。