• 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. 2015.4.24 移动端,chrome不兼容或无法运行的一些具体问题

    1.table内input,把它的边框和focus边框都变成透明,在ff可行,但是chrome会有样式,怎么解决? 解决方法:border:none;outline:0; 2.如下代码,css3动画在 ...

  2. 入门: 使用JNI 从C++代码中调用Java的静态方法

    开发环境: 操作系统: (uname -a output)  Linux ubuntu 3.8.0-19-generic #29-Ubuntu SMP Wed Apr 17 18:16:28 UTC ...

  3. 【强烈推荐】如何给TortoiseGit 配置密钥?

    TortoiseGit 使用扩展名为ppk的密钥,而不是ssh-keygen生成的rsa密钥.也就是说使用 ssh-keygen -C "username@email.com" - ...

  4. 在OSX和Windows版本Docker上运行GUI程序

    看到很多人在Docker问题区讨论:如何在OS X和Windows的Docker上运行GUI程序, 随手记录几个参考资料: https://github.com/docker/docker/issue ...

  5. CDN的特点

    CDN的特点 1.本地Cache加速提高了企业站点(尤其含有大量图片和静态页面站点)的访问速度,并大大提高以上性质站点的稳定性(省钱,用户体验提升). 2.镜像服务消除了不同运营商之间的瓶颈造成的影响 ...

  6. Proj.4库的编译及使用

    Proj.4库的编译及使用 Proj.4是开源GIS最著名的地图投影库,GRASS GIS, MapServer, PostGIS, Thuban, OGDI, Mapnik, TopoCad, GD ...

  7. 一次dell R420 电源故障引发的“血案”

    说“血案”有写夸张了,其实是也就熬了一夜的通宵,做运维的伤不起啊,作为一名运维工程师,像这种服务器突发故障半夜起床的情况属于家常便饭,见怪不怪了,开始说正事: 前几天半夜12点左右,收到服务器宕机的消 ...

  8. springMVC学习之接受JSON参数

    今天在springmvc使用rest模式异步提交,后台接受json字符.发现好多问题,感觉和spring3.0使用习惯上多少有点区别.因此把4.0的异步提交和方式记录下来. 前台页面代码如下: < ...

  9. [转] ImageView的android:adjustViewBounds属性

    原文链接:http://blog.csdn.net/pingchuanyang/article/details/9252689   取值为true时: Adjust the ImageView's b ...

  10. 64位win7下安装SQL Server 2008(图文解说版)

    运行sql安装 单击安装-全新的sql server独立安装,如果我们准备好了故障转移群集,那么我们就可以创建故障转移群集sql 常规检查 一笑而过 选择版本,或者输入密钥自动识别版本 授权协议 支持 ...