• margin可以改变容器的尺寸 //元素尺寸分为可视尺寸,占据尺寸
    margin与可视尺寸
      1.适用于没有设定width/height的普通block水平元素
      2.只适用于水平方向的尺寸
    应用:一侧定宽的自适应布局,两端对齐布局等
    例如:左边有一张图片固定宽度,右面有文字,无论怎么改变文字的宽度,图片都不会动。
       margin-left:70px
 
    margin与占据尺寸
      1.block/inline-block水平元素均适用
      2.与有没有设定width/height值无关
      3.适用于水平和垂直方向
    应用:滚动容器上下留白:margin:50px 0;
        多栏或2栏的等高布局等

  • margin与百分比单位
    普通元素百分比和绝对定位元素百分比
      1.普通元素百分比margin都是相对于容器的宽度计算的
      2.position:absolute绝对定位元素百分比margin是相对于第一个定位祖先元素
       (relative/absolute/fixed)的宽度计算的
    应用:宽高2:1自适应矩形

  • margin重叠
    margin重叠发生在:block水平元素
               : 只发生在垂直方向(margin-top/margin-bottom)
 
    margin重叠情境:相邻两个元素
              父与子第一个或最后一个
              空block元素
 
    干掉margin-top重叠:父元素非块状格式化上下文元素—>overflow:hidden
                 父元素没有border-top设置
                 父元素没有padding-top值
                 父元素和第一个子元素之间没有inline元素分隔
 
    干掉margin-bottom重叠:父元素非块状格式化上下文元素—>overflow:hidden
                    父元素没有border-top设置
                    父元素没有padding-top值
                       父元素和第一个子元素之间没有inline元素分隔
                    设置高度
 
    干掉空block元素重叠:元素不能有borde设置
                 元素不能有padding
                 不能有inline元素
                 不能有height
 
    margin重叠计算规则:正正去大值
                 正负值相加
                 负负最负值

  • margin:auto 自动填充 用来分配剩余空间的
 
    为什么图片margin:0 auto不水平居中?
    答:因为此时图片是inline水平,就算没有width,它也不会占据整个容器
      只要设置display:block,不设置width,也会占据整个容器
 
    垂直方向margin实现居中:1.writing-mode:vertical-1r ; margin:auto
                   2.position:absolute;margin:auto

  • margin负值定位
    margin负值下的等高布局:margin-bottom:负值; //改变元素占据空间的大小
                   padding-bottom:正值; //填充缺失的空间
 
    margin负值下的两栏自适应布局:float:left
                      margin-left:-150px

  • margin无效情形
    1.内联元素
    2.重叠
    3.display:table-cell/table-row等

  • margin-start和margin-end
 

理解margin的更多相关文章

  1. 由css reset想到的深入理解margin及em的含义

    由css reset想到的深入理解margin及em的含义 原文地址:http://www.ymblog.net/content_189.html 经常看到这样语句,*{ margin:0px;pad ...

  2. 【转】深入理解margin

    由浅入深漫谈margin属性 2007-3-18 上午 - HTML/CSS/XML/XSL - CSS - margin margin 在中文中我们翻译成外边距或者外补白(本文中引用外边距).他是元 ...

  3. CSS外边距属性,深入理解margin

    margin See the Pen margin by wmui (@wmui) on CodePen. 该属性用于设置元素的外边距,外边距是透明的,默认值0.这是一个简写属性,属性值最多为4个,例 ...

  4. 理解Margin边距塌陷与box-sizing的问题

    父与子塌陷问题 子盒子与父盒子相互影响,margin值会重叠,谁大听谁的 运行结果: box-sizing box-sizing 原始属性值: content-box,该属性对于盒子尺寸来说,并不会让 ...

  5. 理解margin负值

    效果 上和左方的margin负值使元素向上和左方向移动,如果该元素position不是absolute或fixed,这还会导致之后的元素也向上,左移 下和右方的margin负值会缩小下和右方的空间,使 ...

  6. 左侧固定,右侧自适应的布局方式理解margin负值理论

    一.浮动布局 1.先让固定宽度的div浮动!使其脱离文档流.2.margin-left的值等于固定div的宽度相等. .aside{ float: left; width: 200px; backgr ...

  7. css-深入理解margin和padding

    最近一阶段从新学习了css,发现真的有很多很多的地方都是空白的,今天我们来总结一下margin和padding的一些不为人知的秘密! 一利用float和margin实现布局 我们首先来实现一个两列示布 ...

  8. CSS深入理解学习笔记之margin

    1.margin与容器尺寸 元素尺寸:①可视尺寸 clientWidth(标准):②占据尺寸 margin与可视尺寸:①适用于没有设定width/height的普通block元素:②只适用于水平方向尺 ...

  9. 使用CSS中margin和padding的基础和注意事项

    在CSS中,margin和padding是页面布局的主要属性,如何灵活有效使用对于基于DIV+CSS设计网页方法是非常重要的,笔者经常使用且经常误使用,所以根据经验和网上资料整理出切合自己的内容,以备 ...

随机推荐

  1. Verilog笔记——YUV2RGB的模块测试

    1 YUV2RGB的模块如下: module yuv2rgb( clk, //时钟输入 rstn, //复位输入,低电平复位 y_in, //变换前Y分量输出 cb_in, //变换前Cb分量输出 c ...

  2. MySQL检查重复索引工具-pt-duplicate-key-checker

    在MySQL中是允许在同一个列上创建多个索引的,示例如下: mysql --socket=/tmp/mysql5173.sock -uroot -p mysql> SELECT VERSION( ...

  3. 相同根域名下跨域共享session的解决方案

    https://code.msdn.microsoft.com/CSASPNETShareSessionBetween-021daa39

  4. 多种JSON格式及遍历方式

    /*数组*/ var arr = [["name", "value"], ["name1", "value1"]]; v ...

  5. git 教程(15)--分支管理策略

    通常,合并分支时,如果可能,Git会用Fast forward模式,但这种模式下,删除分支后,会丢掉分支信息. 如果要强制禁用Fast forward模式,Git就会在merge时生成一个新的comm ...

  6. python之路四

    内建函数 内建函数详解: 1. abs(x) abs()函数返回数字(可为普通型.长整型或浮点型)的绝对值.如果给出复数,返回值就是该复数的模.例如: >>>print abs(-2 ...

  7. 使用jquery实现单选框、多选框取消选中状态

    function radioReset(){ /*方式一*/ /* var radios = $("input[type='radio']"); for (i=0; i<ra ...

  8. IOS本地,APNS远程推送(具体过程)

    添加本地推送 ///本地添加 -(void)addLocalPushNotification:(UIButton*)sender; { NSLog(@"%s",__FUNCTION ...

  9. 转:asp.net TreeView CheckChanged 事件浅谈

    http://blog.csdn.net/xiage/article/details/5128755 在开发中经常可以碰到类似的问题: 想通过一个树父节点的TreeNodeCheckChanged 事 ...

  10. 激活webstorm2016如何激活webstorm2016永久激活webstorm2016

    没有那么麻烦,我这个方法是简单粗暴: 1.搜webstrom2016,最新的是2016.3 2.官方下载 3.断网,改本地时间,你打算用多久,就把本地时间往未来调多久 4.安装webstorm 5.一 ...