• 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负值

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

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

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

  6. css-深入理解margin和padding

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

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

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

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

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

  9. margin系列之keyword auto

    本系列摘自  px; margin: auto; /* 或者 margin: 0 auto; */ } HTML: <div id="demo"> <p>恩 ...

随机推荐

  1. Fedora 22中的日期和时间配置

    Introduction Modern operating systems distinguish between the following two types of clocks: A real- ...

  2. JS获取当前时间戳的方法

    JavaScript 获取当前时间戳:第一种方法: var timestamp = Date.parse(new Date()); 结果:1280977330000第二种方法: var timesta ...

  3. cocos2d-x-3.0 的改变,由于变得太多,一点点累积吧!

    1.cpp  改成  Point 2.setIsRelativeAnchorPoint() 改成  ignoreAnchorPointForPosition() 3.Layer::create   图 ...

  4. XenCenter删除SR失败解决方法

    到CLI下 查SR的UUID xe sr-list SR的uuid=e0571e72-f6c5-1c9e-4ad8-9817b2331f47 FORGET SR xe sr-forget uuid=e ...

  5. 拥抱模块化的JavaScript

    前言 我们再一次被计算机的名词.概念笼罩. Backbone.Emberjs.Spinejs.Batmanjs 等MVC框架侵袭而来.CommonJS.AMD.NodeJS.RequireJS.Sea ...

  6. mac终端ssh连接服务器 空闲的时候 连接断开

    ssh_config详解(MAC OSX) 方法1:MAC客户端配置 配置“/etc/ssh/ssh_config”文件 “/etc/ssh/ssh_config” 文件是OpenSSH系统范围的配置 ...

  7. Xcode两种调试小技巧

    1."全局"断点 正常情况下如果代码有错误,会直接触发SIGXXXX信号,然后中断在main函数里. 但是我们还是不知道到底是什么引发了异常信号.我们可以在断点导航器中添加一个全局 ...

  8. Gird Layout代码解释

    <div class="wrapper"> <!--定义一个类名为wrapper的div盒子--> <div class="one" ...

  9. QT 窗口置顶功能

    Qt中,保持窗口置顶的设置为: Qt::WindowFlags m_flags = windowFlags(); setWindowFlags(m_flags | Qt::WindowStaysOnT ...

  10. scrapy 资料整合

    先看看scrapy的框架流程, 1,安装 scrapy 链接 查看即可. 2,新建scrapy项目 scrapy startproject 项目名 目录结构图 3,cd到项目名下,创建任务. scra ...