水平和垂直方向布局

最新推荐文章于 2023-05-13 20:26:25 发布

Massimo_ycw

最新推荐文章于 2023-05-13 20:26:25 发布

阅读量396

点赞数

分类专栏： HTML 文章标签： css html

本文链接：https://blog.youkuaiyun.com/Massimo__JAVA/article/details/127340395

版权

本文详细探讨了CSS布局中的关键概念，包括如何实现水平和垂直方向的布局，理解外边距的折叠现象，以及行内元素的盒模型和浏览器默认样式的影响。这些内容对于前端开发者优化网页布局至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、水平方向

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.outer{
     
				width: 800px;
				height: 200px;
				border: 10px #FF0000 solid;
			}
			
			.inner{
     
				/* width的值默认为auto */
				width: 200px;
				height: 200px;
				background-color: #BBFFAA;
				/* 
				 元素的水平方向的布局：
				 元素在其父元素中水平方向的位置由以下几个属性共同决定：
				 margin-left
				 border-left
				 padding-left
				 width
				 padding-right
				 border-right
				 margin-right
				 
				 一个元素在其父元素中，水平布局必须要满足以下的等式：
				 margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 其父元素内容区的宽度（必须满足）
				 
				 而实际上为： 0 + 0 + 0 + 200 + 0 + 0 + 0 = 600 != 800
				 
				 以上等式必须满足，如果相加结果使等式不成立，则称为过渡约束，则等式会自动调整
				 调整的情况:
				 如果这七个值中没有为
				 auto的情况，则浏览器会自动调整margin-right值以使等式满足
				 0 + 0 + 0 + 200 + 0 + 0 + 600 = 800
				 
				 这七个值中有三个值可设置为auto
				 width 
				 margin-left
				 maring-right
				 如果某个值为auto,则会自动调整为auto的那个值以使等式成立
				 
				 如果将一个宽度和一个外边距设置为auto,则宽度会调整到最大，设置为auto的外边距会自动为0
				 如果将三个值都设置为auto,则外边距都是0，宽度最大
				 如果将两个外边距设置为auto,宽度固定值，则会将外边距设置为相同的值
				 所以我们经常利用这个特点来使一个元素在其父元素中水平居中
				 示例:
				 width: xxxpx;
				 margin:0 auto;
				 */
			}
		</style>
	</head>
	<body>
		<div class="outer">
			<div class="inner"></div>
		</div>
	</body>
</html>

二、垂直方向

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title><

最低0.47元/天解锁文章