• 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. 深入理解javascript原型和闭包(12)——简介【作用域】

    提到作用域,有一句话大家(有js开发经验者)可能比较熟悉:“javascript没有块级作用域”.所谓“块”,就是大括号“{}”中间的语句.例如if语句: 再比如for语句: 所以,我们在编写代码的时 ...

  2. Android基础篇(一)

    Android体系结构介绍 Android是一个移动开发平台,层次结构:操作系统(OS).中间件(Middle Ware).应用程序(Application) 具体: 操作系统(OS)-->各种 ...

  3. 反射的一些用法(WP8.1下)

    我初步的理解:反射就是动态调用(dll)类. 比如某个dll有一个类,通过反射就可以知道它里面属性.方法,就可以实现调用. 确实,dll可以直接引用,但是如果遇到这种情况: 添加.删除功能同属一个Dl ...

  4. 去除ios系统a标签点击时的灰色背景

    使用图片作为a标签的点击按钮时,当触发touchstart的时候,往往会有一个灰色的背景,想要去掉的话可以用下面这种方式 a,a:hover,a:active,a:visited,a:link,a:f ...

  5. C++ 异常机制

    程序在运行的时候可能产生各种可预料到的异常,例如磁盘不足,内存不足,或是数学运算溢出,数组越界之类的.为了解决这些问题,C++提供了异常处理机制,它一般是由try语句和catch语句构成. 一.try ...

  6. 核型SVM

    (本文内容和图片来自林轩田老师<机器学习技法>) 1. 核技巧引入 如果要用SVM来做非线性的分类,我们采用的方法是将原来的特征空间映射到另一个更高维的空间,在这个更高维的空间做线性的SV ...

  7. Ubuntu远程vnc配置

    1. 安装xrdp 使用快捷键"Ctrl+Alt+T"打开一个终端窗口,输入"sudo apt-get install xrdp"-->回车-->输 ...

  8. oracle查询以当前年份为准的近些年数据

    今天在工作中遇到了一个查询近几年数据的问题,oracle学的比较渣渣,学习了一下. 举个例子: 比如说员工入职,我想看这个公司的员工入职情况,然后做一个趋势统计表. 以当前年份为准,查看近5年的情况趋 ...

  9. tomcat相关问题

    动态资源:需要转换成静态资源后再响应给客户端,例如:jsp.servlet,其他语言的动态资源有:asp.php 静态资源:无需转发即可直接响应给客户端,例如:html.css.javascript ...

  10. cookie 巩固

    设定cookie 过期时间: Cookie coke = new Cookie("name", "pattern"); coke.setMaxAge(60);/ ...