CSS之布局（盒子的水平布局）

最新推荐文章于 2024-05-09 22:44:06 发布

不动声色的小蜗牛

最新推荐文章于 2024-05-09 22:44:06 发布

阅读量595

点赞数

分类专栏： CSS 文章标签： css css3

本文链接：https://blog.csdn.net/weixin_45720626/article/details/107356663

版权

CSS 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

盒子的水平布局：

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

不动声色的小蜗牛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS之布局（盒子的水平布局）

盒子的水平布局：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>盒子的水平布局</title> <style> .outer{ width: 800px; height: 200px; border: 10px red solid; } .inner{ width: 2
复制链接

扫一扫