1.css margin可以改变容器的尺寸
元素尺寸
可视尺寸--标准盒子模型中盒子的宽度是不包括margin值的，clientWidth
占据尺寸--包括margin的宽度 outWidth不在标准之中，jquery中有相对应的方法
margin与可视尺寸
1.1使用那个与没有设定width/height的普通block水平元素
2.2只适用于水平方向尺寸
文字
文字
应用 ：实现一侧定宽的自适应布局
float:left;">
margin与占据尺寸
1.block/inline-block水平元素均适用
2.与没有设定width/height值无关
3.适用于水平方向和垂直方向
例
padding:50px 0;">
300">
第二话：css margin与百分比单位——了解margin百分比单位
水平方向百分比/垂直方向百分比
普通元素百分比/绝对元素百分比
百分比margin的计算规则
img{margin :10%;with:600px;heigth:200px;}
普通元素的百分比margin都是相对于容器的宽度计算的！所以这里的margin:10%;---->top:60px,left:60px;都是相对与容器的宽度来计算的。
绝对定位元素的百分比margin
img{margin:10%; position:absolute;}
绝对元素的百分比margin是相对与第一个定位元素的祖先元素具有（relative/absolute/fixed）的宽度计算的。普通元素的是相对与父元素的来计算的。
第三话 margin重叠通常特性
1.block水平元素（不包括float和absolute元素）
2.不考虑writing-mode（文字书写方向是从上到下的），只发生在垂直方向的（margin-top/margin-bottom）
margin重叠3种情境
1.相邻的兄弟元素
p{line-height:2em;margin:1em 0;background:#f0f3f9;}
第一行
第二行
son
margin-top重叠
1.1父元素非块状格式化上下文元素
1.2父元素没有border-top设置
1.3父元素没有padding-top值
1.4父元素和第一个子元素之间没有inline元素分隔
margin-bottom重叠
1.1父元素非块状格式化上下文元素
1.2父元素没有border-bottom设置
1.3父元素没有padding-bottom值
1.4父元素和最后一个子元素之间没有inline元素分隔
1.5父元素没有height，min-height，max-height限制
干掉margin-top重叠
.father{background:#f0f3f9}
son
son
son
margin重叠的计算规则
1.正正取大值
.a{margin-bottom:50px;}
.b{margin-top:20px;}
.father{margin-top:20px;}
.son{margin-top:50px;}
.a{margin-top:20px;margin-bottom:50px}
上面的结果都是margin:50px;
2.正负值相加
.a{margin-bottom:50px;}
.b{margin-top:-20px;}
.father{margin-top:-20px;}
.son{margin-top:50px;}
.a{margin-top:-20px;margin-bottom:50px}
.father{margin-top:-20px;}
.son{margin-top:-50px;}
.a{margin-top:-20px;margin-bottom:-50px}
实践：
善用margin重叠
.list{margin-top:15px;}
更好实现
.list{
margin-top:15px;
margin-bottom:15px;
}
更具有健壮性，最后一个元素移除或位置调换，均不会破坏原来的布局。
第4话：理解CSS中的margin:auto
margin:auto 的机制
元素有时候，就算没有设置width或height，也会自动填充
p{background:#f0f3f9}
如果设置width或height，自动填充特性就会被覆盖
p{width:500px;background:#f0f3f9;}
此时的margin值是0px
如果设置值width或height，自动填充特性就会被覆盖。
原来应该填充的尺寸被width/height强制变更，而margin：auto就是为了填充这个变更的尺寸设置的；
p{width:500px;marign-right:100px;margin-left:auto;}
如果一侧定值，一侧auto，auto为剩余空间大小，如果两侧均是auto，则平分剩余空间
为什么图片img{width:200px;marign:0 auto}不居中
因为图片是inline水平的，就算没有width，也不会占据整个容器。
设置img{display:block;width:200px;marign:0 auto;}
因为此时图片是block水平的，就算没有width，也会占据整个容器不能在一行显示。
为什么明明容器定高，元素定高margin：auto 0 无法垂直居中
.father{height:200px;background:#f0f3f9;}
.son{height:100px; width:500px;margin:auto;}
水平居中了，垂直不居中。
解释：如果.son没有设置height:100px;高度会自动200px高吗？——NO 所以margin谈不上自动填充，强制设置宽度高度， 所以是不会自动填充的。
注意：水平方向上如果子大于父，计算结果为负值的时候也是不居中的。
实现垂直方向margin居中
更改流为垂直方向，实现垂直方向的margin:auto
writing-mode与垂直居中(css3)
.father{height:200px; width:100%; wiriting-mode:vertical-lr;}
.son{height:100px;width:500px;margin:auto;}
absolute与margin居中
.father{height:200px;position:relative;}
.son{position:absolute; top:0px right:0px bottom:0px;left:0px}
.son没有width/height，absolute元素自动填满了容器。
当设置了width和高度
.father{height:200px;position:relative;}
.son{position:absolute; top:0px right:0px bottom:0px;left:0px；width:500px;height:100px;}
原来拉伸铺满现在缩回来了。
被拉伸的空间设置margin:auto;平均分配就会实现水平垂直居中了
.father{height:200px;position:relative;}
.son{position:absolute; top:0px right:0px bottom:0px;left:0px；width:500px;height:100px;margin:auto;}
IE8+以上支持！
第五话：css margin负值定位
1.margin负值下的两端对齐（margin改变元素尺寸）
例子
.box{
width:1200px; margin:auto;background:orange;
.ul{overflow:hidden;}
.li{
width:380px;height:300px;
margin-right:20px;
background:green;
float:left;
}
}
实现的列表最后一个留有间隙。
而通过margin负值来改变容器的大小,让容器变宽。能完美解决这个问题
.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;
}
}
2.margin负值下的等高布局 margin改变元素占据空间
margin与上下留白
通过设置很大的margin-bottom负值，和很大的padding-bottom填充缺失的空间，实现等高布局。原理：内容块状元素可以在padding中显示.只要没有设置
background:clip,box-sizing:content
3.margin负值下的两栏自适应布局，元素占据空间跟随margin移动
图片右浮动
第六话 css marign无效情形解析
1.inline水平元素的垂直margin无效
2个前提 1.非替换元素，例如不是img元素；2.正常书写模式
例
marign:0px
给span设置margin233px;
水平上有效的，垂直方向是无效的。
2.margin重叠
3.display：table-cell
display:table-cell/display:tab-row等声明margin无效！
例外的替换元素img,button
4.position与margin
绝对定位元素非定位方向的margin值“无效”
绝对定位的margin值一直有效，不只是像普通元素那样。
5.鞭长莫及的margin失效
bfc内容块中如果前面有浮动元素那下一个元素的margin是相对与外层的p计算的。
6.内联导致的margin失效
p[style="height:200px;background-color:#f0f3f9;"]>img[style="marign-top:30;"]
当margin-top足够大的时候失效了。
解释：内联元素要实现和基线对齐，在图片后加x可以看出，无论margin-top有多远，他都不会脱离容器外面。
第七话margin-start和margin-end
margin-start
img{
margin-left：100px;
-webkit-margin-start:100px;
-moz-margin-start:100px;
margin-sart:100px;
}
1.正常的流向，margin-sart等同于margin-left，两者重叠不累加；
2.如果水平流失从右往左，margin-start等同与margin-right；direction:ltr(rtl)
3.在垂直流下（writring-mode:vertical-lr）,margin-sart等同于margin-top
webkit下的其他margin相关属性
margin-before
img{-webkit-margin-before:100px;} 默认流向的情况下，等同于marign-top
margin-after
img{-webkit-marign-after:100px;} 默认流向的情况下，等同于margin-bottom;
margin-collapse 外边框重叠
-webkit-margin-collapse: collapse|discard|separate
控制margin重叠
collapse默认-重叠
discard 取消
separate 分隔 没有重叠
Atas ialah kandungan terperinci 深入理解CSS中margin的使用方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Bagaimana untuk mengubah suai elemen.gaya
Bagaimana untuk memulihkan fail yang dipadam sepenuhnya pada komputer
Penggunaan fungsi sqrt dalam Java
Apakah tulisan brc20
Bagaimana untuk mematikan perlindungan masa nyata dalam Pusat Keselamatan Windows
Bagaimana untuk menyalakan telefon Xiaomi
Pengenalan kepada perisian vps percuma asing
NumberFormatException
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
