前言

margin属性在实际中非常常用，也是平时踩坑较多的地方。margin折叠部分相信不少人都因为这样那样的原因中过招。margin负值也是很常用的功能，很多特殊的布局方法都依赖于它。

表现

虽然margin可以应用到所有元素，但display属性不同时，表现也不同

【1】block元素可以使用四个方向的margin值

【2】inline元素使用上下方向的margin值无效

【3】inline-block使用上下方向的margin负值看上去无效

[注意]inline-block使用上下方向的margin负值只是看上去无效，这与其默认的vertical-align:baseline有关系，当垂直对齐的属性值为其他值时，则会显示不同的视觉效果

效果展示：

重叠

margin负值并不总是后面元素覆盖前面元素，它与元素display属性有关系

【1】两个block元素重叠时，后面元素可以覆盖前面元素的背景，但无法覆盖其内容

【2】当两个inline元素，或两个line-block元素，或inline与inline-block元素重叠时，后面元素可以覆盖前面元素的背景和内容

【3】当inline元素(或inline-block元素)与block元素重叠时，inline元素(或inline-block元素)覆盖block元素的背景，而内容的话， 后面的元素覆盖前面的元素

综上所述，个人理解，在普通流布局中，浏览器将页面布局分为内容和背景，内容的层叠显示始终高于背景。block元素分为内容和背景，而inline元素或inline-block元素，它本身就是内容(包括其背景等样式设置)

效果展示：

应用

【1】水平垂直居中

如果要居中的元素的宽/高是不变的或者说是确定的，比如width/height=100px，那么设置absolute的top/left=50%，然后margin-left/margin-top=-50px即可

如果要居中的元素的宽/高是不确定的，这时margin负值就不能使用具体的px了，可以使用百分比。但由于margin的百分比都是相对于包含块的宽度，所以这里限制了只能设置宽高相同的居中元素。包含块的宽度如何获得呢？利用absolute的包裹性，在需要居中的元素外面套一个空的<div>元素即可

.box{

    position:relative;

    width: 200px;

    height: 200px;

    background-color: lightgreen;

    border: 2px solid black;

}

.out{

    position: absolute;

    left: 50%;

    top: 50%;

}

.in{

    height: 100px;

    width: 100px;

    background-color: pink;

    margin-left: -50%;

    margin-top: -50%;

}

<div class="box">

    <div class="out">

        <div class="in">测试内容</div>

    </div>

</div>

效果展示：

【2】列表项两端对齐

比如外层元素宽度为200px，内层3个元素，宽度为60px，margin-right为10px。这里，正常流中块级元素框的水平总和总共为210px，超过了父元素的宽度200px，则第三个元素会被挤下来。当然可以给第三个元素设置margin-right=0。但，这种方法不优雅，为布局而布局，第三个元素并没有什么特殊的，却被设置了特殊的样式

优雅的方法应该是内层元素和外层元素之间包一层元素，设置margin-right=-10px，使块级元素框的水平总和总共为210px - 10px = 200x ，等于父元素的宽度即可

[注意]设置overflow:hidden用于清除浮动 

ul{

    margin: 0;

    padding: 0;

    list-style:none;

}

.box{

    width: 200px;

    background-color: pink;

}

.list{

    overflow: hidden;

    margin-right: -10px;

}

.in{

    float: left;

    width: 60px;

    height: 100px;

    background-color: lightgreen;

    margin-right: 10px;

}

<div class="box">

    <ul class="list">

        <li class="in">1</li>

        <li class="in">2</li>

        <li class="in">3</li>

    </ul>

</div>

效果展示：

【3】三栏自适应布局

中间的主体使用双层标签，外层<div>宽度100%显示，并且浮动，内层<div>为真正的主体内容，含有左右110px的margin值。左栏和右栏都采用margin负值。左栏左浮动，margin-left为-100%，正好使左栏位于页面左侧。右栏左浮动，大小为其本身的宽度100px

html,body{

    height: 100%;

}

body{

    margin: 0;

}

.main{

    width: 100%;

    height: 100%;

    float: left;

}

.main .in{

    margin: 0 110px;

    background-color: pink;

    height: 100%;

}

.left,.right{

    height: 100%;

    width: 100px;

    float: left;

    background-color: lightgreen;

}

.left{

    margin-left: -100%;

}

.right{

    margin-left: -100px;

}

<body>

<div class="main">

    <div class="in"></div>

</div>

<div class="left"></div>

<div class="right"></div>

</body>

效果展示：

CSS margin负值学习及实际应用的更多相关文章

  1. CSS中margin负值巧布局

    margin负值实现细边框 我们先准备五个div盒子,并设置好浮动和2px的实线黑色边框,看看效果 中间的边框线挨在了一起致使边框变粗成了4px,这时使用margin负值就可以解决这个问题 <s ...

  2. 深入理解CSS中的margin负值

    前面的话 margin属性在实际中非常常用,也是平时踩坑较多的地方.margin折叠部分相信不少人都因为这样那样的原因中过招.margin负值也是很常用的功能,很多特殊的布局方法都依赖于它.它看似简单 ...

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

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

  4. 原生 CSS 网格布局学习笔记

    下是来自Oliver Williams的帖子. Oliver已经学习了相当长时间的原生CSS网格,可以说是在CSS网格方面有一定的发言权.在这篇文章中,他将以非同寻常的思路分析自己的CSS网格布局学习 ...

  5. Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”

    Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...

  6. CSS盒子模型学习记录3（侧面导航栏）

    学习http://www.blueidea.com/tech/web/2007/4545_2.asp 代码试验 html <!DOCTYPE html PUBLIC "-//W3C// ...

  7. HTML CSS——margin与padding的初学

    下文引自HTML CSS——margin和padding的学习,作者fengyv,不过加入了一些个人的看法. 你在学习margin和padding的时候是不是懵了,——什么他娘的内边距,什么他娘的外边 ...

  8. css margin的相关属性，问题及应用

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=48 引言:margin ...

  9. margin负值 – 一个秘密武器

    CSS盒模型中,margin是我们老熟悉的一个属性了, 它的负值你用过吗? 你知道 margin负值的秘密武器吗?我们一起看看吧! 1.带竖线分隔的横向列表(例如:网站底部栏目) 传统的分隔符是使用 ...

随机推荐

  1. SQLServer之创建嵌套触发器

    嵌套触发器创建规则 当触发器执行启动其他触发器的操作时,DML 和 DDL 触发器都是嵌套触发器. 这些操作都可以启动其他触发器等. DML 触发器和 DDL 触发器最多可以嵌套 32 层. 可以通过 ...

  2. Android Studio教程08-与其他app通信

    目录 1.向另外一个应用发送用户 1.1. 构建隐含Intent 1.2. 验证是否存在接收Intent的应用 1.3. 启动具有Intent的Activity 2. 获取Activity的结果响应 ...

  3. 1.1 NCE21 Daniel Mendoza

    1.text translation Two hundred years ago, boxing matches were very popular in England. At that time/ ...

  4. eclipse弃坑记第一篇之在idea上配置Tomcat环境并创建Javaweb项目的详细步骤原创

    IntelliJ IDEA是一款功能强大的开发工具,在代码自动提示.重构.J2EE支持.各类版本工具(如git.svn.github).maven等方面都有很好的应用. IntelliJ IDEA有免 ...

  5. 并发框架Disruptor场景应用

    今天用一个停车场问题来加深对Disruptor的理解.一个有关汽车进入停车场的问题.当汽车进入停车场时,系统首先会记录汽车信息.同时也会发送消息到其他系统处理相关业务,最后发送短信通知车主收费开始.看 ...

  6. linux -- 添加、修改、删除路由

    在日常的使用中,或者在服务器中,有两个网卡配置两个地址,访问不同的网络段,这种情况是非常常见的现象,但是,我们需要额外的添加路由表来决定发送的数据包经过正确的网关和interface才能正确的进行通信 ...

  7. adb常用命令(golang版）及输入中文

    package main import ( "crypto/md5" "fmt" "image/png" "io/ioutil&q ...

  8. python之zip打包

    import zipfile # 压缩 z = zipfile.ZipFile('z.zip', 'w') z.write('xo.xml') z.write('xxxoo.xml') z.close ...

  9. Mongo字符串类型的数值查询---$Where查询介绍

    ​        在Mongo中都知道字符串类型大小比较都是以ASCII进行比较的,所以无法真实比较字符串类型的数值大小 ​      比如查询age大于3的: db.getCollection(&q ...

  10. Linux soft lockup分析

    关键词:watchdog.soft lockup.percpu thread.lockdep等. 近日遇到一个soft lockup问题,打印类似“[ 56.032356] NMI watchdog: ...