margin重叠通常特性：
margin重叠三种情况：
demo 1:
1.相邻兄弟元素margin重叠
兄弟元素的上下margin发生了重叠
2.父级和第一个/最后一个子元素
demo 1:
inline元素（内联元素，像图片、文字这样的东西）
块状格式化上下文元素（BFC元素）
同样可以利用父子margin重叠条件来去除margin重叠：
demo 2：
demo 2 :
demo 2:
去掉margin-bottom重叠与上面类似。
3.空的block元素margin重叠：
空的block元素发生margin重叠，也需要一些条件限制：
去掉空的block元素的margin重叠也是利用上面的条件：
3.margin重叠的计算规则：
1、正正取大值：
2、正负值相加：
3、负负最负值（取绝对值大的）：
首先理解margin atuo的作用机制 ，先看一些事实例子：
1.元素有时候，就算没有设置width或height，也会自动填充外部容器
例1:
例2：
以上两个例子是比较常见的，没有设置宽高也会自动填充所在容器。
若刚才的两个例子，如果设置了width或heigth，自动填充特性就会被覆盖。
总之一句话，auto就是用来分配。
通过以上的例子，很多事情就很好理解了，比方说：
1.为什么图片设置了 margin：0 auto 不水平居中？
如上图，设置了 margin auto ，图片为什么还是不居中呢？
因为图片是inline水平的，它占据的空间并没有撑满整个容器，如果没有设置宽度值。所以它就不满足 margin auto 用来填充剩余空间的条件，因为他根本就没有剩余空间。要想让它居中也很简单：
2.为什么明明容器定高，子元素也定高了， margin auto 0 无法垂直居中?
上图水平方向剧中了，但是垂直方向不剧中，父级元素高度有了，子元素高度也有了，为什么还是不垂直居中呢？
因为他不满足占满整个容器这个条件，想一下，如果，没有为.son设置高度值，它之前满足占满整个容器这个条件吗？很显然不满足，也就没有剩余空间，所以设置 height:100px margin auto 不会垂直居中。
还需要注意一点：用 margin:auto 来实现居中，它计算后的值必须是正直，比如说你的父容器宽度1000px，子元素宽度2000px，这时设置 margin：auto 它是不居中的。
那么如何实现垂直方向上的剧中呢，方法很多不止一种：
1.writing-mode与垂直居中：
更改流为垂直居中之后，内容会自动撑满垂直方向的高度。这时宽度不会自动撑满容器，所以宽度的水平居中就失效了。
2.绝对定位元素实现垂直居中：
子元素设置了 top:0right:0bottom:0left:0之后，没有设置宽高，absolute元素也自动填满了容器。
1.margin负值下的两端对齐（主要利用了margin可以改变元素尺寸这一特性：正直变小，负值变大）
由于 <div class="ul"></div>没有设置宽度，所以设置了 margin-right:-20px后，改变了它的宽度，增大了20px，变为1220px。这时我们再把 li 的宽度设置为计算好的386.66666px，就可以实现没有间隙的两端对齐。 主要利用了margin负值增加它的空间 。
demo：
可以看出它的垂直方向是没有margin的，是无效的。
2.第二种常见的无效是margin重叠，比如你设置了margin-top当发现没有效果，这就是margin重叠带来的影响。
3.display:table-cell与margin
demo:
可以看出设置的margin是无效的。
但是对替换元素设置table-cell是可以发生作用的，但平时我们不会给替换元素设置table-cell，这是没有任何意义的，所以记住这点就行。
4.position：absolute与margin，绝对定位元素非定位方向的margin值 “无效” ，定位方向的margin值是有效的。
border: 5px solid red
padding: 20px/* 复合属性，上右下左都是20px */
/* padding-left: padding-right: padding-top: padding-bottom: */
/* padding: 20px padding-top: 40px上40，其他20 */
/* padding: 10px 20px 15px上10px，左右20px 下15px */
/* padding: 10px 20px上下10px 左右20px *
*{margin: 0pxpadding: 0px}
div{
width: 200px
height: 200px
background: aqua
border: 10px solid red
padding: 20px
margin: 15px
/* 盒子显示width+border+padding */
/* 200+20+40=260 */
/* width：260 怪异盒模型
height: 260
box-sizing: border-box*/
/* vertical-align: middle 图片文字位置 */
width: 300px
height: 400px
margin: 20px
padding: 30px
border: 5px solid black
box-sizing: border-box
/* 宽度300+60++10=370
高度400+60++10=470 */
1. 文档流
指在网页中将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。主要的形式是自上而下（块级元素）,一行接一行,每一行从左至右（行内元素）。
定位类型包括三种：
包含三种类型:块级元素的块级格式、行内元素的行内格式以及两种元素的相对定位方式。
2.脱离文档流
要使一个元素脱离文档流有两种方式：
使用浮动（float）： 值为 left、right 均会使元素脱离文档流，但不会脱离文本流，即利用float脱离文档流的时候，其他盒子元素会无视这个元素，但是其他盒子内的文字依然会为它让出位子，环绕在其周围）
对于float布局：
1.如果浮动元素的上一个元素也是浮动，那么该元素会与上一个元素排列在同一行，如果行宽不够，后面的元素会被挤到下一行
2.如果浮动元素的上一个元素不是浮动，那么该元素仍然处于上一个元素的下方，根据浮动设定在左或者在右，而其本身也脱离普通流，后边的元素会自动往上移动到上一个普通流元素下方为止
3 当给元素设置float后，元素将形成“块”，可以给该元素设置宽高，如span元素。而float属性被除去时，宽高就会失效
使用定位（position）： 值为 absolute、fixed 的元素脱离文档流，其它不脱离文档流
3. 普通流的margin取负值
1.margin-left为负值（影响自身元素
div2: marigin-left:-50px
2.margin-right为负值
div2: marigin-right:-50px(设置宽度时，无影响
当不设置宽度时，
3.margin-top:-50px(偏移值相对于自身，其后元素受影响
4.margin-bottom:-50px(自身无偏移值,，其后元素向上偏移
可以看出
margin-left 和 margin-top：影响自身元素，自身元素将向指定方向偏移
margin-right在没有设置width属性时，宽度向右增加对应的像素
margin-bottom将影响后元素，使后元素向上偏移对应像素
所有偏移的元素位于z轴最上方，偏移量覆盖正常元素的对应位置
margin-top:-50px（影响自身元素，元素将向上偏移
margin-left:-50px（影响自身元素，将向左偏移，并影响其后元素
margin-left:-500px(大于自身宽度
margin-right:-50px（对自身无影响，影响其后元素，其后元素将向左偏移对应像素
margin-bottom:-50px（无影响
可以看出
margin-top：影响自身元素，自身元素将向对应方向偏移
margin-left：影响自身元素，其后元素在遇到继续想左浮动直至遇到浮动元素后固定
margin-right:对自身无影响，影响其后元素，其后元素向对应方向偏移
margin-bottom:无影响
两边定宽，而中间自适应的一种布局： 用到浮动、负边距、相对定位
添加样式
此时，因为container内的元素脱离文档流，footer占据原本container的文档空间，给footer添加clear属性（周围不允许浮动元素）
.foot{ clear: both }
再利用 right 的 relative 属性，添加
.right { right: -50px } //(center因为设置width:100%将自动撑满整个中间空间）
宽度已经完成，但是当中间内容高度被撑开时
为了使高度保持一致，可使用
等高布局（即padding补偿法，首先把列的每一个元素padding设为一个足够大的值，再把列的margin设一个与前面的padding的正值相抵消的负值，然后在父容器设置超出隐藏
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）