搜索
首页web前端html教程深入理解CSS中的margin负值 - 小火柴的蓝色理想

深入理解CSS中的margin负值 - 小火柴的蓝色理想

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
May 21, 2016 am 08:42 AM
×
目录
[1]表现 [2]重叠 [3]浮动[4]定位[5]应用

前面的话

　　margin属性在实际中非常常用，也是平时踩坑较多的地方。margin折叠部分相信不少人都因为这样那样的原因中过招。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元素与block元素重叠时，inline的元素覆盖block元素的背景和内容

　　【4】当inline-block元素与block元素重叠时，inline-block元素覆盖block元素的背景，但无法覆盖其内容

 

浮动

　　【1】block元素与浮动元素重叠时，其边框和背景在该浮动元素之下显示，而内容在浮动元素之上显示

　　【2】inline或inline-block元素与浮动元素重叠时，其边框、背景和内容都在该浮动元素之上显示

 

定位

　　【1】定位元素(position不为static)覆盖其他元素的背景和内容

　　【2】将relative属性值应用于inline元素，由于无法改变其行内元素的本质，所以其上下margin依然存在问题

 

应用

【1】水平垂直居中

　　由于margin的百分比相对于包含块的宽度，所以在需要居中的元素外面套一个空的

元素，并且利用absolute的包裹性，使该元素的宽高等于需要定位的元素的宽高 
<span style="color: #800000;">.box</span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;">relative</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> lightgreen</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 2px solid black</span>;
}<span style="color: #800000;">
.out</span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    left</span>:<span style="color: #0000ff;"> 50%</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 50%</span>;
}<span style="color: #800000;">    
.in</span>{<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> pink</span>;<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> -50%</span>;<span style="color: #ff0000;">
    margin-top</span>:<span style="color: #0000ff;"> -50%</span>;
}
<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="box"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="out"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="in"</span><span style="color: #0000ff;">></span>测试内容<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>    
    <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>    
<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span>

 【2】列表项两端对齐

　　在列表项外面包一层元素，使用margin负值来将最后一个列表项拉回来

<span style="color: #800000;">ul</span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    list-style</span>:<span style="color: #0000ff;">none</span>;
}<span style="color: #800000;">
.box</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> pink</span>;    
}<span style="color: #800000;">
.list</span>{<span style="color: #ff0000;">
    overflow</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">
    margin-right</span>:<span style="color: #0000ff;"> -10px</span>;
}<span style="color: #800000;">
.in</span>{<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;"> left</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 60px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> lightgreen</span>;<span style="color: #ff0000;">
    margin-right</span>:<span style="color: #0000ff;"> 10px</span>;
}
<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="box"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">ul </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="list"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="in"</span><span style="color: #0000ff;">></span>1<span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="in"</span><span style="color: #0000ff;">></span>2<span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="in"</span><span style="color: #0000ff;">></span>3<span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>    
<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span></span></span>

 【3】三栏自适应布局

　　中间的主体使用双层标签，外层

宽度100%显示，并且浮动，内层
为真正的主体内容，含有左右210px的margin值。左栏和右栏都采用margin负值。左栏左浮动，margin-left为-100%，正好使左栏位于页面左侧。右栏左浮动，大小为其本身的宽度200px 
<span style="color: #800000;">html,body</span>{<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 100%</span>;
}<span style="color: #800000;">
body</span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0</span>;
}<span style="color: #800000;">
.main</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;"> left</span>;
}<span style="color: #800000;">
.main .in</span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0 210px</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> pink</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 100%</span>;
}<span style="color: #800000;">
.left,.right</span>{<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;"> left</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> lightgreen</span>;
}<span style="color: #800000;">
.left</span>{<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> -100%</span>;
}<span style="color: #800000;">
.right</span>{<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> -200px</span>;
}
<span style="color: #0000ff;"><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="main"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="in"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="left"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="right"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span></span></span></span></span></span>

 【4】三栏等高布局

　　给每栏设置大的底部内边距，然后用数值相同的负外边距消除这个高度，然后在外层容器中设置overflow:hidden

<span style="color: #800000;">body</span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    overflow</span>:<span style="color: #0000ff;"> hidden</span>;
}<span style="color: #800000;">
ul</span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    list-style</span>:<span style="color: #0000ff;"> none</span>;
}<span style="color: #800000;">
.list</span>{<span style="color: #ff0000;">
    overflow</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 100%</span>;
}<span style="color: #800000;">
.main</span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0 210px</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> lightgreen</span>;
}<span style="color: #800000;">
.left</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;"> left</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> pink</span>;
}<span style="color: #800000;">
.right</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;"> right</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> pink</span>;
}<span style="color: #800000;">
.main,.left,.right</span>{<span style="color: #ff0000;">
    margin-bottom</span>:<span style="color: #0000ff;"> -9999px</span>;<span style="color: #ff0000;">
    padding-bottom</span>:<span style="color: #0000ff;"> 9999px</span>;
}
<span style="color: #0000ff;"><span style="color: #800000;">ul </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="list"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="left"</span><span style="color: #0000ff;">></span>左侧文字比较少<span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="right"</span><span style="color: #0000ff;">></span>右侧文字比较多右侧文字比较多右侧文字比较多右侧文字比较多右侧文字比较多右侧文字比较多右侧文字比较多右侧文字比较多右侧文字比较多右侧文字比较多右侧文字比较多右侧文字比较多右侧文字比较多右侧文字比较多右侧文字比较多右侧文字比较多<span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="main"</span><span style="color: #0000ff;">></span>中间文字比较少<span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>    
<span style="color: #0000ff;"></span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span></span></span></span></span>

声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
相关文章
HTML的多功能性：应用和用例HTML的多功能性：应用和用例Apr 30, 2025 am 12:03 AM

HTML不仅是网页的骨架，更广泛应用于多种领域：1.在网页开发中，HTML定义页面结构并结合CSS和JavaScript实现丰富界面。2.在移动应用开发中，HTML5支持离线存储和地理定位等功能。3.在电子邮件和新闻通讯中，HTML提升邮件的格式和多媒体效果。4.在游戏开发中，HTML5的CanvasAPI用于创建2D和3D游戏。

HTML文档中的根标签是什么？HTML文档中的根标签是什么？Apr 29, 2025 am 12:10 AM

theroottaginanhtmldocumentis.servesasthetop-levellementThateNcapsulatesAllotherContent，确保properdocumentstrumentstrumentsureandbrowserparserparsing。

HTML标签和元素是同一件事吗？HTML标签和元素是同一件事吗？Apr 28, 2025 pm 05:44 PM

文章解释说，HTML标签是用于定义元素的语法标记，而元素是完整的单位，包括标签和内容。他们一起工作以构建网页。查拉克计数：159

＆lt; head＆gt;的意义是什么。 ＆＆lt;身体＆gt;在html中标记？＆lt; head＆gt;的意义是什么。 ＆＆lt;身体＆gt;在html中标记？Apr 28, 2025 pm 05:43 PM

本文讨论了Lt; Head＆gt; ＆＆lt;身体＆gt; HTML中的标签，它们对用户体验的影响以及SEO的影响。正确的结构增强了网站功能和搜索引擎优化。

＆lt; strong＆gt;，lt; b＆gt;有什么区别标签和lt; em＆gt;，＆lt; i＆gt;标签？＆lt; strong＆gt;，lt; b＆gt;有什么区别标签和lt; em＆gt;，＆lt; i＆gt;标签？Apr 28, 2025 pm 05:42 PM

本文讨论了HTML标签，和和关注其语义与表现用途及其对SEO和可访问性的影响之间的差异。

请说明如何指示HTML中文档使用的字符集？请说明如何指示HTML中文档使用的字符集？Apr 28, 2025 pm 05:41 PM

文章讨论了在HTML中指定字符，重点介绍了UTF-8。主要问题：确保正确显示文本，防止乱七八糟的字符，并增强SEO和可访问性。

HTML中的各种格式标签是什么？HTML中的各种格式标签是什么？Apr 28, 2025 pm 05:39 PM

本文讨论了用于构建和造型Web内容的各种HTML格式标签，强调了它们对文本外观的影响以及语义标签对可访问性和SEO的重要性。

HTML元素的' ID”属性与'类”属性之间有什么区别？HTML元素的' ID”属性与'类”属性之间有什么区别？Apr 28, 2025 pm 05:39 PM

本文讨论了HTML的“ ID”和“类”属性之间的差异，重点是它们的独特性，目的，CSS语法和特异性。它解释了它们的使用如何影响网页样式和功能，并为

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热门文章

Windows 11 KB5054979中的新功能以及如何解决更新问题
3 周前ByDDD
如何修复KB5055523无法在Windows 11中安装？
2 周前ByDDD
Inzoi：如何申请学校和大学
4 周前ByDDD
如何修复KB5055518无法在Windows 10中安装？
2 周前ByDDD
Roblox：Dead Rails - 如何召唤和击败Nikola Tesla
4 周前By尊渡假赌尊渡假赌尊渡假赌
显示更多

热工具

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

功能强大的PHP集成开发环境

EditPlus 中文破解版

EditPlus 中文破解版

体积小，语法高亮，不支持代码提示功能

PhpStorm Mac 版本

PhpStorm Mac 版本

最新（2018.2.1 ）专业的PHP集成开发工具

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具

显示更多

热门话题

gmail邮箱登陆入口在哪里
7833
15
Java教程
1648
14
CakePHP 教程
1403
52
Laravel 教程
1300
25
PHP教程
1240
29
显示更多