margin-top高度重合问题延伸

版权声明:欢迎阅读,有误请指正,转载请申明。 https://blog.csdn.net/wx1995sss/article/details/85199395

承接html+css中margin-top高度坍塌成因及解决方法,有以下问题延伸:
1、BFC中overflow:hidden;为什么对body无效;
2、为什么margin:auto;在BFC元素中也无效;
BFC方法可以将元素独立成块,使元素不受其他元素影响,但其中一种转化BFC的方法overflow对body无效,
成因如下:body元素默认高度无限扩展,用于展示页面内容,基于这种目的,overflow无法隐藏body中内容,即对body无效;
结论:overflow无法将body转成BFC,但display仍旧可以。

在第一问的基础上,将父元素转成BFC,子元素设置margin:auto;水平居中,垂直不居中;
代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body,div{margin:0;padding:0;}
			body{ display:inline-block; width:100%; height:100%; background:yellow; }
			.subbox{ width:100px; height:100px; margin:auto; background:red;}
		</style>
	</head>
	<body>
		<div class="subbox"></div>
	</body>
</html>

结果如图:
在这里插入图片描述
成因如下:红色子元素设置margin:auto;在浏览器解析时,块元素独占一行的特性让子元素在水平方向上得以探测父元素的左右边界,即宽度,可以计算得到子元素在水平方向上居中应在的位置,子元素移到该位置,达到水平居中。
在垂直方向上,子元素占据的父元素高度等于自身高度,子元素没有特性支持自身去探测父元素高度,也就无法计算得到垂直居中位置。
注:无论父元素是body的100%高度还是具体的高度1000px等,margin垂直方向均无法居中;
  块元素margin:0 auto,得到水平居中;行内元素水平居中用text-align:center;
此时联系第一篇html+css中margin-top高度坍塌成因及解决方法中的结论:
元素上下间距用padding,左右间距用margin,运用margin-top时配合BFC特性,运用padding时配合box-sizing转化盒模型(避免撑大盒子,便于计算)。
拓展:实际运用中常用到垂直水平居中,下一篇提供一些比较好用的垂直水平居中方法。

猜你喜欢

转载自blog.csdn.net/wx1995sss/article/details/85199395
今日推荐