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

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

CSS中涉及到的百分数有很多,所以有时候多起来的话,概念也就多了,所以也会有些混淆的地方,这里就做一个简单的总结吧,用一张脑图汇总总结了一下。


百分数.png

几点说明:

百分数实现水平垂直居中

结合lefttranslate基于的百分数不同,可以实现给元素设置水平垂直居中。
通过设置一个父元素为非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又应该变化,就会造成死循环。而基于宽度则不会有这个问题,因为块元素的宽度就是一整行的宽度。