使用绝对定位的布局

水平方向

  • 在原来7个参数之和=包含块宽度的基础上,增加left和right
    • left +margin-left + border-left + padding-left +width + padding-right + border-right + margin-right + right = 包含块的宽度
  • 调整规则基本相同,若无auto,调整right,而不是margin-right
  • left和right的默认值是auto,设置水平居中必须把left和right设置为0
.box{
	position:absolute;
	left:0px;
	right:0px;
	margin:0 auto;
}

垂直方向

  • 新增9参数等式,与水平方向类似
    • top + margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom +bottom = 包含块的高度
  • 若无auto,调整bottom
  • top和bottom的默认值也是auto,设置垂直居中必须把top和bottom设置为0
发布了90 篇原创文章 · 获赞 0 · 访问量 1848

猜你喜欢

转载自blog.csdn.net/qq_35764106/article/details/104286678