深入理解CSS中的margin

1.css margin可以改变容器的尺寸
　　元素尺寸
　　可视尺寸--标准盒子模型中盒子的宽度是不包括margin值的，clientWidth
　　占据尺寸--包括margin的宽度 outWidth不在标准之中，jquery中有相对应的方法

　　margin与可视尺寸
　　　　1.1使用那个与没有设定width/height的普通block水平元素
　　　　2.2只适用于水平方向尺寸
　　　　<body style="background-color:#1a2b3c">
　　　　　　<div style="border:4px 6px; background-color:blue">
　　　　　　　　文字<br />
　　　　　　　　文字<br />
　　　　　　</div>
　　　　</body>
　　　　当改变margin值时盒子的宽度会变化。

　　　　应用：实现一侧定宽的自适应布局
　　　　　　<img width="150px" style="float:left;">
　　　　　　<p style="margin-left:170px">图片左浮动</p>

　　　　margin与占据尺寸
　　　　1.block/inline-block水平元素均适用
　　　　2.与没有设定width/height值无关
　　　　3.适用于水平方向和垂直方向
　　　　例
　　　　　　<body style="background-color:#1a2b3c">
　　　　　　　　<img style="marign-bototm:-50">
　　　　　　</body>
　　　　可以看到容器占据的尺寸变小了。
　　　　利用这一特性
　　　　滚动容器内上下留白
　　　　　　<div style="height:100px; padding:50px 0;">
　　　　　　　　<img height="300">
　　　　　　</div>
　　　　里面盒子撑开外面盒子显示滚动条，当然这在非chrome浏览器中是没有留白效果的(上面有下面没有)。
　　　　正确的做法是
　　　　<div style="height:100px; ">
　　　　　　<img height="300" style="marign:50px 0">
　　　　</div>

第二话：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）的宽度计算的。普通元素的是相对与父元素的来计算的。
　　　　　　　　<div style="width:1024px;height:200px; position:relative;">
　　　　　　　　　　<div style="width:600px; height:200px">
　　　　　　　　　　　<img style="margin:10%;position:absolute;" />

　　　　　　　　　　</div>
　　　　　　　　</div>
　　　　　　利用特性
　　　　　　　　宽高2：1自适应矩形
　　　　　　　　　　.box{background-color:olive; overflow:hidden;}
　　　　　　　　　　.box > div{margin:50%}
　　　　　　　　这里还涉及一个只是点就是margin重叠。这里设置overflow 也是因为防止margin重叠

第三话 margin重叠通常特性
　　1.block水平元素（不包括float和absolute元素）
　　2.不考虑writing-mode（文字书写方向是从上到下的），只发生在垂直方向的（margin-top/margin-bottom）

　　margin重叠3种情境
　　　　1.相邻的兄弟元素
　　　　　　p{line-height:2em;margin:1em 0;background:#f0f3f9;}
　　　　　　　　<p>第一行</p>
　　　　　　　　<p>第二行</p>
　　　　　　这里就会发生margin重叠了
　　　　2.父级和第一个/最后一个子元素
　　　　　　.father{background:#f0f3f9}
　　　　　　<div class="father">
　　　　　　　　<div class="son" style="margin-top:80px;">son</div>
　　　　　　</div>
　　　　　　给子第一个或最后一个子元素设置margin等同于给父元素设置相同的margin值，子元素相同margin，子元素和父元素一样的margin值
　　　　3.空的block元素
　　　　　　.father{background:#f0f3f9}
　　　　　　<div class="father">
　　　　　　　　<div class="son"></div>
　　　　　　</div>
　　　　　　这里son的高度只有1em，不是2em
　　　　　　空block元素margin重叠其他条件
　　　　　　　　1.元素没有border设置
　　　　　　　　2.元素没有padding值
　　　　　　　　3.里面没有inline元素
　　　　　　　　4.没有height，或者min-height

　　　　　　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}
　　　　　　　　<div class="father">
　　　　　　　　　　<div class="son" style="margin-top:80px;">son</div>
　　　　　　　　</div>
　　　　　　1.父元素非块状格式化上下文元素 .father:overflow:hidden;
　　　　　　2.父元素没有border-top设置
　　　　　　　　.father:border:4px solid #ccc;
　　　　　　3.父元素没有padding-top值
　　　　　　4.父元素和第一个子元素之间没有inline元素分隔
　　　　　　　　<div class="father"> 
　　　　　　　　　　<div class="son" style="margin-top:80px;">son</div>
　　　　　　　　</div>
　　　　　　　　干掉margin-bottom重叠
　　　　　　　　前面四个和margin-top一样，
　　　　　　　　　　<div class="father" style="height:100px"> 
　　　　　　　　　　　　<div class="son" style="margin-top:80px;">son</div>
　　　　　　　　　　</div>

　　　　margin重叠的计算规则
　　　　　　1.正正取大值
　　　　　　　　.a{margin-bottom:50px;}
　　　　　　　　.b{margin-top:20px;}
　　　　　　　　<div class="a"></div>
　　　　　　　　<div class="b"></div>

　　　　　　　　　　.father{margin-top:20px;}
　　　　　　　　　　.son{margin-top:50px;}
　　　　　　<div class="father">
　　　　　　　　<div class="son"></div>
　　　　　　</div>

　　　　　　.a{margin-top:20px;margin-bottom:50px}
　　　　　　<div class="a"></div>

　　　　　　上面的结果都是margin:50px;
　　　　2.正负值相加
　　　　　　.a{margin-bottom:50px;}
　　　　　　.b{margin-top:-20px;}
　　　　　　<div class="a"></div>
　　　　　　<div class="b"></div>

　　　　　　.father{margin-top:-20px;}
　　　　　　.son{margin-top:50px;}
　　　　　　<div class="father">
　　　　　　　　<div class="son"></div>
　　　　　　</div>

　　　　　　.a{margin-top:-20px;margin-bottom:50px}
　　　　　　<div class="a"></div>
　　　　　　上面的结果都是30px
　　3.负负最负值
　　　　.a{margin-bottom:-50px;}
　　　　.b{margin-top:-20px;}
　　　　<div class="a"></div>
　　　　<div class="b"></div>

　　　　.father{margin-top:-20px;}
　　　　.son{margin-top:-50px;}
　　　　<div class="father">
　　　　　　<div class="son"></div>
　　　　</div>

　　　　.a{margin-top:-20px;margin-bottom:-50px}
　　　　<div class="a"></div>
　　　　上面的结果都是-50px
　　　　margin重叠的意义是？
　　　　网页诞生之初…………只是排版文字布局用，没有现在这么复杂。
　　　　　　1.连续段落或列表之类，如果没有margin重叠首尾项间距会和其他兄弟标签1：2关系，排版不自然；
　　　　　　2.web中任何地方嵌套或直接放入任何裸div都不会影响原来的布局
　　　　　　3.遗落的空人一个p元素，不要影响原来的阅读排版

　　　　实践：
　　　　　　善用margin重叠
　　　　　　　　.list{margin-top:15px;}
　　　　　　更好实现
　　　　　　　　.list{
　　　　　　　　　　margin-top:15px;
　　　　　　　　　　margin-bottom:15px;
　　　　　　　　　}
　　　　　　更具有健壮性，最后一个元素移除或位置调换，均不会破坏原来的布局。
第4话：理解CSS中的margin:auto
　　　　margin:auto 的机制
　　　　元素有时候，就算没有设置width或height，也会自动填充
　　　　　　div{background:#f0f3f9}

　　　　如果设置width或height，自动填充特性就会被覆盖
　　　　　　div{width:500px;background:#f0f3f9;}
　　　　　　此时的margin值是0px
　　　　如果设置值width或height，自动填充特性就会被覆盖。

　　　　原来应该填充的尺寸被width/height强制变更，而margin：auto就是为了填充这个变更的尺寸设置的；
　　　　　　div{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与上下留白
　　　　<div style="height:200px;">
　　　　　　<img height="300px" style="margin:50px 0;" />
　　　　</div>
　　　　.box{overflow:hidden;resize:vertical;}
　　　　.child-orange,
　　　　.child-green{margin-bottom:-600px;padding-bottom:600px;}
　　　　.child-orange{float:left;background:orange;}
　　　　.child-green{float:left;background:green;}

　　　　通过设置很大的margin-bottom负值，和很大的padding-bottom填充缺失的空间，实现等高布局。原理：内容块状元素可以在padding中显示.只要没有设置　　　　

　　　　background:clip,box-sizing:content
　　　　3.margin负值下的两栏自适应布局，元素占据空间跟随margin移动

　　　　<div style="float:left;width:100%">
　　　　　　<p style="margin-right:170px;">图片右浮动</p>
　　　　</div>
　　　　<img width="150px;" style="float:left;margin-left:-150px;"/>

第六话 css marign无效情形解析
　　1.inline水平元素的垂直margin无效
　　2个前提 1.非替换元素，例如不是img元素；2.正常书写模式
　　例
　　　　<span style="margin:0px">marign:0px</span>
　　　　给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是相对与外层的div计算的。
　　　　6.内联导致的margin失效
　　　　　　div[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的更多相关文章

深入理解css中的margin属性
深入理解css中的margin属性之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及 ...
深入理解CSS中的margin负值
前面的话 margin属性在实际中非常常用,也是平时踩坑较多的地方.margin折叠部分相信不少人都因为这样那样的原因中过招.margin负值也是很常用的功能,很多特殊的布局方法都依赖于它.它看似简单 ...
深入理解css中position属性及z-index属性
深入理解css中position属性及z-index属性在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...
CSS中上下margin的传递和折叠
CSS中上下margin的传递和折叠 1.上下margin传递 1.1.margin-top传递为什么会产生上边距传递? 块级元素的顶部线和父元素的顶部线重叠,那么这个块级元素的margin-top ...
深入理解css中position属性及z-index属性 https://www.cnblogs.com/zhuzhenwei918/p/6112034.html
深入理解css中position属性及z-index属性请看出处:https://www.cnblogs.com/zhuzhenwei918/p/6112034.html 在网页设计中,positi ...
深入理解CSS中的层叠上下文和层叠顺序(转)
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道 ...
深入理解CSS中的层叠上下文和层叠顺序
零.世间的道理都是想通的在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在C ...
深入css中的margin
深入css中的margin 第一:margin-top css代码(元素没有任何定位的情况下,并且元素默认为block) <style type="text/css"> ...
如何理解CSS中的浮动：其实他就像乘坐扶梯一样
只要你用过自动扶梯,你就能很快的理解CSS中的浮动(Float). 你肯定遇到过这样的情况: 做好了,你想用CSS浮动来调整元素间的位置关系. 在写完代码之后,你发现浮动元素没出现在你设想 ...

随机推荐

OnCollisionEnter和OnTriggerEnter
之前对这两个的用法不是特别清楚,重新学习了下,再做个测试看看效果如何: 1.新建一个场景test 2.添加一个cube,点击Inspector面板会发现系统已经默认添加了Box collisder组件 ...
sz 命令
sz命令下载文件命令 sz 文件名
ceph-文件存储
文件存储 ceph文件系统提供了任何大小的符合posix标准的分布式文件系统,它使用Ceph RADOS存储数据.要实现ceph文件系统,需要一个正在运行的ceph存储集群和至少一个ceph元数据服务 ...
scrapy install
csf@ubuntu:~$ sudo apt install python-scrapy
react（一）：组件的生命周期
最近兄弟团队让我去帮忙优化两个页面,前端用的react全家桶,后端用的python,上一次写react代码都过去一年了,顺着以前的的学习思路,再捋顺一下react的要点组件的生命周期就是Reac的工 ...
AsyncDisplayKit技术分析
转载请注明出处:http://xujim.github.io/ios/2014/12/07/AsyncDisplayKit_inside.html ,谢谢前言 Facebook前段时间发布了其iOS ...
jQuery、Angluar、Avalon对比
最近在慕课网看一些关于avalon的视频,记录下一些笔记及代码实例以便日后自己复习可以用到,另外也可以给不想花时间看视频的小伙伴提供一丝丝帮助这里主要是做一个简单的todolist 分别用三种不同的 ...
如何解决mysql中读取含表情符号的内容无法识别的问题
当内容中包含有表情符号的时候,写入mysql时一般会设置字段或者表的charset为utf8mb4的形式: ) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicod ...
JAVA / MySql 编程——第二章初始MySQL
1. MySQL: ● MySQL是一个关系型数据库管理系统,由瑞典MySQL AB公司开发,目前属于Oracle公司. MySQL最流行的关系型数据库管理系统, ...
【CodeBase】【转】php随机生成汉字
本方法是通过生成GB2312编码的汉字后,再转码为UTF-8编码.之所以这样做是因为UTF-8的常用汉字太过分散,随机生成会出现大量生僻字,而使用GB2312编码的好处在于其收录的大部分汉字为常用汉字 ...

深入理解CSS中的margin

深入理解CSS中的margin的更多相关文章

随机推荐

热门专题