元素之间水平布局与垂直布局

元素水平方向布局

子元素在父元素中的水平方向的布局,必须满足如下等式:
margin-left + border-left + padding-left + width + padding-right +border-right + margin-right = 父元素的width
如果等式不满足,则属于过渡约束,浏览器会自动调整右外边距的值。

通过一个例子来说明一下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.box1{
				width: 100px;
				height: 100px;
				background-color: aqua;
			}
			
			.box2{
				width: 100px;
				height: 100px;
				background-color: antiquewhite;
			}
			
		</style>
	</head>
	<body>
		<div class="box1">

		</div>
		<div class="box2">
		
		</div>
	</body>
</html>

我们在body标签中定义了2个div元素 类名分别为 “.box1” 和 “.box2”,通过css 设置了高度和高度还有背景色。

预览页面:
在这里插入图片描述
发现 box1和box2 垂直排列在一起。明明box1后面还有那么多空间,为什么不是水平排列?

是因为不满足上述所说的子元素在父元素中水平排列的公式,浏览器默认会自动调整div的右外边距以此满足等式。

在水平方向右三个值可以设置为 auto 分别是

  • margin-left
  • width
  • margin-right

如果将margin-left 或 margin-right 的一侧设置为auto , 这个auto的值会根据等式尽可能的设置为最大
给box1添加margin-left值为auto:

			.box1{
				width: 100px;
				height: 100px;
				background-color: aqua;
				margin-left: auto;
			}

果不其然,margin-left的值被浏览器尽可能的设置为最大。
在这里插入图片描述

如果将margin-left 和 margin-right都设置为auto ,则会将两侧的距离设置为相等的值,从而导致子元素在父元素中水平居中

			.box1{
				width: 100px;
				height: 100px;
				background-color: aqua;
				margin-left: auto;
				margin-right: auto;
			}

预览页面:
在这里插入图片描述

如果不给元素设置宽度,元素默认width值为auto。元素宽度会自动撑满父元素的内容区。

			.box1{
				height: 100px;
				background-color: aqua;
			}

预览页面:
在这里插入图片描述

元素垂直方向布局

子元素在父元素垂直方向布局,如果父元素不设置高度(默认为auto),则满足如下等式:
margin-top+ border-top + padding-top + height + padding-bottom +border-bottom + margin-bottom = 父元素的height

  • 该等式不是必须满足的。
  • 是父元素不设置高度的情况下,满足该等式。
  • 父元素自适应所有子元素的高度。
  • 如果父元素指定了高度,父元素高度不会自动适应所有子元素的高度;如果子元素超出了父元素的高度,那么子元素的内容会溢出父元素,溢出的部分不会影响其他的元素布局。

溢出内容的处理

父元素可以使用overflow设置元素溢出的处理方式。
可选值:

  • visible:默认值,溢出内容显示在父元素外面。
  • hiddent:溢出内容隐藏。
  • scroll:溢出部分,生成滚动条,不管有没有溢出都会显示滚动条。
  • auto:自动判断内容是否溢出,根据需要生成滚动条。
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页