前言

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. 英语口语练习系列-C14-常用片语

    句子 1. Some ads are extremely persuasive and we find we buy products we don't really need. 有一些广告非常有说服 ...

  2. (生活)Photoshop入门(不定时更新)

    我可能是想找个工作以外的事情做一下. 目标:我要自学网PhotoShop商业修图. 笔记: .图层 .1总结: 1.1.1图层就好像画画的一张纸,但是每一层又互不影响. 1.1.2图层蒙版(覆盖一层玻 ...

  3. SDOI2019R1游记

    差点退役,真是开心 Day -2 吐了一晚上,差点死掉 被拉去医院打针,结果蛇皮的被扎了两针,真是好疼啊嘤嘤嘤 决定第二天在家里咕一天 Day -1 结果在家里也得做\(loli\)昨天的不知道从哪里 ...

  4. DeconvNet 论文阅读理解

    学习语义分割反卷积网络DeconvNet 一点想法:反卷积网络就是基于FCN改进了上采样层,用到了反池化和反卷积操作,参数量2亿多,非常大,segnet把两个全连接层去掉,效果也能很好,显著减少了参数 ...

  5. Windows 支持 OpenSSH 了！

    从 Win10 1809 和 Windows Server 2019 开始 Windows 开始支持 OpenSSH Server.本文介绍一下其基本的概念和配置方法,本文演示用的环境为 Win10 ...

  6. 父进程结束，其子进程不会结束，会挂到init进程下

    结论:一个父进程产生子进程,父进程结束(kill),子进程不会结束,子进程被init进程托管 下面是过程: d.sh脚本是一个ping命令,执行d.sh 目前,103310 进程为父进程,103344 ...

  7. Git—分支管理

    Git—分支管理 分支学习:branch称为分支,默认仅有一个名为master的分支.一般开发新功能流程为:开发新功能时会在分支dev上进行,开发完毕后再合并到master分支. branch相关常用 ...

  8. day4（分支结构，循环结构，for循环，九九乘法表）

    一:复习 ''' 1.变量名命名规范 -- 1.只能由数字.字母 及 _ 组成 -- 2.不能以数字开头 -- 3.不能与系统关键字重名 -- 4._开头有特殊含义 -- 5.__开头__结尾的变量, ...

  9. Java的selenium代码随笔（1）

    package ShareClass; import java.awt.AWTException;import java.awt.Robot;import java.awt.Toolkit;impor ...

  10. webpack加载postcss，以及autoprefixer的loader

    webpack2.0加载postcssloader以及autoprefixer实现自动根据兼容性的需求给css加私有前缀的功能,给开发带来便利, 下面是我的配置信息,亲测有效: 1.webpack.c ...