We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
CSS中涉及到的百分数有很多,所以有时候多起来的话,概念也就多了,所以也会有些混淆的地方,这里就做一个简单的总结吧,用一张脑图汇总总结了一下。
几点说明:
结合left, translate基于的百分数不同,可以实现给元素设置水平垂直居中。 通过设置一个父元素为非static定位,子元素为绝对定位,因为绝对定位的left和top值之基于包含块的宽度和高度的,而translate是基于元素自身的宽度和高度,所以可以像下面这样设置,实现水平垂直居中。
left
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%); }
首先对于包含块的宽度是占一整行的,而高度如果没有设置的话,则由其子元素的内容高度所决定,如果是基于包含块的高度,一旦修改了margin和padding值,那么包含块的高度就会发生变化,而一旦包含块的高度发生变化,padding和margin又应该变化,就会造成死循环。而基于宽度则不会有这个问题,因为块元素的宽度就是一整行的宽度。
The text was updated successfully, but these errors were encountered:
No branches or pull requests
CSS中涉及到的百分数有很多,所以有时候多起来的话,概念也就多了,所以也会有些混淆的地方,这里就做一个简单的总结吧,用一张脑图汇总总结了一下。
几点说明:
百分数实现水平垂直居中
结合
left
,translate
基于的百分数不同,可以实现给元素设置水平垂直居中。通过设置一个父元素为非static定位,子元素为绝对定位,因为绝对定位的left和top值之基于包含块的宽度和高度的,而translate是基于元素自身的宽度和高度,所以可以像下面这样设置,实现水平垂直居中。
为什么padding和margin是基于包含块的宽度
首先对于包含块的宽度是占一整行的,而高度如果没有设置的话,则由其子元素的内容高度所决定,如果是基于包含块的高度,一旦修改了margin和padding值,那么包含块的高度就会发生变化,而一旦包含块的高度发生变化,padding和margin又应该变化,就会造成死循环。而基于宽度则不会有这个问题,因为块元素的宽度就是一整行的宽度。
The text was updated successfully, but these errors were encountered: