css之margin使用技巧：元素水平居中，边框合并，top塌陷

最新推荐文章于 2024-02-18 14:54:27 发布

吃喝玩乐秀起来

最新推荐文章于 2024-02-18 14:54:27 发布

阅读量878

点赞数

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

本文链接：https://blog.csdn.net/weixin_49855251/article/details/113308530

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

盒模型使用技巧及相关问题
margin相关技巧
1、设置元素水平居中： margin:x auto;
2、margin负值让元素位移及边框合并

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box{
			width:200px;
			height:200px;
			background-color:gold;
			/* auto可以决定水平处于中间位置 */
			/* margin:50px auto 100px auto; */
			margin:50px auto 100px;
		}

	</style>
</head>
<body>
	<div class="box"></div>
</body>
</html>

2、margin负值让元素位移及边框合并

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		/*  去掉body默认的margin值	 */
		
		body{
			margin:0;
		}		
		.box{
			width:202px;
			height:156px;
			background-color:pink;
			margin:50px auto 0;
		}

		.box div{
			width:200px;
			height:30px;
			border:1px solid green;
			background-color:gold;
			/* 向上移动1像素 */
			margin-top:-1px;

			/* border-bottom:0px; */
		}


		/* .box .last{
			border-bottom:1px solid green;
		} */




	</style>
</head>
<body>
	<div class="box">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div class="last"></div>
	</div>
</body>
</html>

运行结果：
在这里插入图片描述
外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。解决方法如下：

1、使用这种特性
2、设置一边的外边距，一般设置margin-top
3、将元素浮动或者定位

理解练习
使用div标签制作如下布局:
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box{
			width:500px;
			border:1px solid #000;
			margin:50px auto 0;			
		}
		.box div{
			/* margin-left:20px;
			margin-right:20px;
			margin-top:20px;
			margin-bottom:20px; */
			margin:20px;
		}
	</style>
</head>
<body>
	<div class="box">
		<div>外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。</div>
		<div>外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。</div>
		<div>外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。</div>
		<div>外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。</div>
	</div>
</body>
</html>

margin-top 塌陷

在两个盒子嵌套时候，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败，解决方法如下：

1、外部盒子设置一个边框
2、外部盒子设置 overflow:hidden
3、使用伪元素类：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">

		/* 第三种解决塌陷的方法  伪元素  */
		.clearfix:before{
			content:"";
			display:table;
		}
		
		.con{
			width:300px;
			height:300px;
			background-color:gold;
			/* border:1px solid #000; 第一种解决塌陷的方法 设置边框	 */
			/* overflow:hidden; 第二章解决塌陷的方法 元素溢出 */
			
		}

		.box{
			width:200px;
			height:100px;
			background-color:green;
			margin-top:100px;
			margin-left:50px;
		}



	</style>
</head>
<body>
	<div class="con clearfix">
		<div class="box"></div>
	</div>	
</body>
</html>

运行结果：
在这里插入图片描述

吃喝玩乐秀起来

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css之margin使用技巧：元素水平居中，边框合并，top塌陷

盒模型使用技巧及相关问题margin相关技巧1、设置元素水平居中： margin:x auto;2、margin负值让元素位移及边框合并代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box{ width:200px;
复制链接

扫一扫