1.cssmargin可以改变容器的尺寸
元素尺寸
可视尺寸--标准盒子模型中盒子的宽度是不包括margin值的,clientWidth
占据尺寸--包括margin的宽度 outWidth不在标准之中,jquery中有相对应的方法
margin与可视尺寸
1.1使用那个与没有设定width/height的普通block水平元素
2.2只适用于水平方向尺寸
background-color:#1a2b3c">
文字
文字
应用 :实现一侧定宽的自适应布局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 分隔 没有重叠
위 내용은 深入理解CSS中margin的使用方法의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!