CSS——Margin塌陷和盒子居中

最新推荐文章于 2022-08-09 18:34:28 发布

mintsolace

最新推荐文章于 2022-08-09 18:34:28 发布

阅读量225

点赞数

分类专栏：学习笔记 css 文章标签： css

本文链接：https://blog.csdn.net/mintsolace/article/details/78335531

版权

学习笔记同时被 2 个专栏收录

128 篇文章 2 订阅

订阅专栏

css

32 篇文章 1 订阅

订阅专栏

margin的塌陷现象：
标准文档流中，竖直方向的margin不叠加，以较大的为准。

        <style type="text/css">
        	*{
        		margin:0;
        		padding:0;
        	}
			.p1{
				width:300px;
				height:200px;
				background-color:orange;
				margin-bottom:30px;
			}
			.p2{
				width:300px;
				height:200px;
				background-color:orange;
				margin-top:50px;
			}
        </style>
    </head>
    <body>
    	<p class="p1"></p>
    	<p class="p2"></p>
    </body>

水平方向的叠加

    <head>
        <meta charset="utf-8">
        <style type="text/css">
        	*{
        		margin:0;
        		padding:0;
        	}
			span{
				background-color:lightpink;
			}
			.s1{
				margin-right: 40px;
			}
			.s2{
				margin-left: 20px;
			}
        </style>
    </head>
    <body>
		<span class="s1">哈哈哈哈</span><span class="s2">嘿嘿嘿嘿</span>
    </body>

如果不在标准流，比如盒子都浮动了，那么两个盒子之间是没有塌陷现象的：

        	*{
        		margin:0;
        		padding:0;
        	}
			div{
				width:200px;
				border:10px solid #000;
			}
			.p1{
				width:200px;
				height:100px;
				background-color:orange;
				margin-bottom:40px;
				float:left;
			}
			.p2{
				width:200px;
				height:100px;
				background-color:orange;
				margin-top:30px;
				float:left;
			}
        </style>
    </head>
    <body>
		<div>
			<p class="p1"></p>
			<p class="p2"></p>
		</div>
    </body>

两个盒子都浮动了，所以没有塌陷现象了，margin-bottom: 40px;和margin-top: 30px;叠加了。

盒子居中margin: 0 auto;
这种时候盒子贴着右边：

			div{
				width:100px;
				height:100px;
				background-color:orange;
				margin-left: auto;
			}

这种时候盒子贴着左边：

			div{
				width:100px;
				height:100px;
				background-color:orange;
				margin-right: auto;
			}

margin的值可以为auto，表示自动。
当left、right两个方向都是auto的时候，盒子居中:

margin-left:auto;
margin-right:auto;

简写为：

margin:0 auto;

注意：

使用margin: 0 auto的盒子，必须有width，有明确的width
只有标准流的盒子，才能使用margin:0 auto; 居中。也就是说，当一个盒子浮动了、绝对定位了、固定定位了，都不能使用margin:0 auto；
margin: 0 auto;是在居中盒子，不是居中文本。居中文本要使用text-align：center;

margin:0 auto; 让这个div自己在大容器中居中；
text-align：center; 让这个div内部的文本居中；
块级元素想要居中，要用margin居中，而不是text-align。
图片的居中使用text-align: center;

善于使用父亲的padding，而不是儿子的margin
如果父亲没有border，那么儿子的margin实际上踹的是“流”，踹的是这“行”。所以父亲整体也掉下来了。

        <style type="text/css">
        	*{
        		margin:0;
        		padding: 0;
        	}
        	div{
        		width:300px;
        		height:300px;
        		background-color:orange;
        	}
        	p{
        		margin-top:50px;
        		width:100px;
        		height:100px;
        		background-color:green;
        	}
        </style>
    </head>
    <body>
    	<div>
    		<p></p>
    	</div>
    </body>

这个p有一个margin-top踹父亲，试图将自己下移：

<div>
	<p></p>
</div>

如果父亲没有border，那父亲也会下来，如果父亲有border，这样就可以分离开了。

margin的这个属性，本质上描述的是兄弟与兄弟之间的距离，最好不要用这个margin表达父子之间的距离，所以要善于使用父亲的padding而不是儿子的margin。

        <style type="text/css">
        	*{
        		margin:0;
        		padding: 0;
        	}
        	div{
        		width:300px;
        		height:250px;
        		padding-top:50px;
        		background-color:orange;
        	}
        	p{
        		width:100px;
        		height:100px;
        		background-color:green;
        	}
        </style>

以上，用padding-top，尽量少用margin。

mintsolace

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS——Margin塌陷和盒子居中

margin的塌陷现象：标准文档流中，竖直方向的margin不叠加，以较大的为准。 <style type="text/css"> *{ margin:0; padding:0; } .p1{ width:300px
复制链接

扫一扫

专栏目录