CSS深入理解之margin

最新推荐文章于 2024-07-16 20:11:14 发布

muzi187

最新推荐文章于 2024-07-16 20:11:14 发布

阅读量575

点赞数

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

本文链接：https://blog.csdn.net/muzi187/article/details/78865816

版权

html 同时被 2 个专栏收录

43 篇文章 0 订阅

订阅专栏

margin

1 篇文章 0 订阅

订阅专栏

慕课学习-->前端开发-->HTML/CSS-->CSS深入理解之margin

margin

一、margin与容器尺寸

1、CSS margin可以改变容器的尺寸

2、Margin与可视尺寸：

（1）适用于没有设定width/height的普通block水平元素（不包括float元素，absolute/fixed元素，inline元素，table-cell元素...）

（2）只适用于水平方向尺寸

3、margin与占据尺寸

（1）block/inline-block水平元素均适用

（2）与有没有设定width/height值无关

（3）适用于水平方向和垂直方向

二、CSS margin与百分比单位

1、水平方向百分比/垂直方向百分比

2、普通元素百分比/绝对定位元素百分比

（1）普通元素的百分比margin都是相对于容器的宽度计算的！

父容器600px*200px，img{margin:10%;}。Margin是60px；

（2）绝对定位元素的百分比margin是相对于第一个定位祖先元素（relative/absolute/fixed）的宽度计算的！

父元素600px*200px，img{margin:10%; position:absolute;}。定位的祖先元素是1024px*200px，margin是102.4px

（3）应用特性，实现宽高2:1自适应矩形

.box{background-color:olive;overflow:hidden;}

.box>div{margin:50%;}

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>Document</title>
	</head>
	<style>
	.box{background-color:olive;overflow:hidden;}
	.box>div{margin:50%;}
	</style>
	<body>
		<div id="" class="box">
			<div></div>
		</div>
	</body>
</html>

三、正确看待CSS的margin重叠

1、margin重叠通常特性

（1）block水平元素（不包括float和absolute元素）

（2）不考虑writing-mode，只发生在垂直方向（margin-top/margin-bottom）

2、margin重叠三种情境

（1）相邻的兄弟元素

（2）父元素和第一个/最后一个子元素

（3）空的block元素（自己和自己重叠）

3、相邻兄弟元素margin重叠

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <style type="text/css">
	p{line-height:2em;margin:1em 0;background:#f0f3f9;}
 </style>
 <body>
  <p>第一行</p>
  <p>第二行</p>
 </body>
</html>

4、父元素和第一个/最后一个子元素margin重叠，三种效果相同

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>Document</title>
	</head>
	<style type="text/css">
		.father{background:#f0f3f9}
	</style>
	<body>
		<div class="father">
			<div class="son" style="margin-top:80px;">子元素</div>
		</div>
		<div class="father" style="margin-top:80px;">
			<div class="son" >子元素</div>
		</div>
		<div class="father" style="margin-top:80px;">
			<div class="son" style="margin-top:80px;">子元素</div>
		</div>
	</body>
</html>

（一）父子margin重叠其他条件

（1）margin-top重叠

A、父元素非块状格式化上下文元素

B、父元素没有border-top设置

C、父元素没有padding-top值

D、父元素和第一个子元素之间没有inline元素分隔

（2）margin-bottom重叠

A、父元素非块状格式化上下文元素

B、父元素没有border-bottom设置

C、父元素没有padding-bottom设置

D、父元素和最后一个子元素之间没有inline元素分隔

E、父元素没有height，min-height，max-height限制

（二）

（1）干掉margin-top重叠

A、父元素overflow:hidden;

B、父元素设置border-top

C、父元素设置padding-top

D、在第一个子元素前插入空格等内联元素

</div>

（2）干掉margin-bottom重叠

A、父元素overflow:hidden;

B、父元素设置border-bottom

C、父元素设置padding-bottom

D、在最后一个子元素后插入空格等内联元素

</div>

E、父元素设置height

5、空block元素margin重叠，高度表现为1em，而非2em

</div>

空block元素margin重叠其他条件：

A、元素没有border设置

B、元素没有padding值

C、里面没有inline元素

D、没有height或者min-height

6、margin计算规则

正正取大值

正负值相加

负负最负值

7、margin重叠的好处

连续段落或列表之类，如果没有margin重叠，首尾项间距会和其他兄弟标签1:2关系，排版不自然。

Web中任何地方嵌套或直接放入任何裸div（没有CSS样式设置），都不会影响原来的布局；

遗落的空任意多个<p>元素，不要影响原来的阅读排版；

四、理解CSS中的margin:auto

1、margin:auto的作用机制

元素有时候，就算没有设置width或者height，也会自动填充；

例如，没有设置宽度的div，他的宽度会自动填满父元素。

例如，绝对定位元素，自动填满容器，填满的是父级相对定位元素。div{ position:absolute; left:0; right:0; background:#f0f3f9;}

此时，如果设置width或者height，自动填充特性就会被覆盖。原本应该填充的尺寸被width/height强制变更，而margin:auto就是为了填充这个变更的尺寸设计的；auto就是用来分配剩余空间的。

如果一侧定值，一侧auto，auto为剩余空间大小。

如果两侧均是auto，则平分剩余空间。

2、图片为什么不居中？

img{width:200px;margin:0 auto;}。因为图片是inline水平的，就算没有width，img也不会充满容器。设置img元素display:block;就能够实现居中显示。

3、为什么明明容器定高，元素定高，元素margin:auto 0无法垂直居中？

如果.son没有设置height:100px;，.son的高度也不会自动200px。Margin:auto;要实现居中，剩余空间计算后分配不能为负值。

4、实现垂直居中

（1）writing-mode与垂直居中，writing-mode改变页面元素流的方向

.father{ height:200px; width:100%; writing-mode:vertical-lr;}

.son{ height:100px; width:200px; margin:auto;}

设置writing-mode:vertical-lr;更改流的方向为垂直方向，实现垂直方向的margin:auto居中。

（2）absolute绝对定位元素的margin:auto居中

.son没有width/height，absolute元素自动填满整个容器。

.son的width/height限制了absolute元素自动填充整个容器。

设置margin:auto，自动平分被变更的剩余的尺寸空间。

五、CSS margin负值定位

1、margin负值下的两端对齐，margin改变元素尺寸。

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>Document</title>
	</head>
	<style type="text/css">
		.box{ width:1200px; margin:auto; background:orange;}
		.ul{ overflow:hidden;margin-right:-20px;}
		.li{ width:386.66px; height:300px; margin-right:20px; background:green;float:left;}
	</style>
	<body>
		<div class="box">
			<div class="ul">
				<div class="li">列表1</div>
				<div class="li">列表2</div>
				<div class="li">列表3</div>
			</div>
		</div>
	</body>
</html>