em:相对于自身的font-size。1em = 10font-size。默认font-size=16px
rem: 相对于根元素(即html元素)的font-size。
盒子模型
width和height:设置的是内容的宽高。不包括边框。
水平方向
浏览器水平方向上以下公式必须得到满足
1 | margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 父元素的width |
margin-left,width,margin-right可以设置为auto。
浏览器会自动调整auto的属性,使等式成立。
其中width默认是auto。那么会自动调整width使等式成立。不需要调节其他的了。
如果width设置了固定值,其他值也没有auto的。浏览器就调整margin-right使等式成立。
所以一般通过
1 | width: xxxpx; margin: 0 auto; 来设置水平居中 |