深入理解CSS中的margin负值_html/css_WEB-ITnose-html教程-PHP中文网

前面的话

表现

重叠

浮动

定位

应用

首页

web前端

html教程

深入理解CSS中的margin负值_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:22 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或inline-block元素后，由于无法改变其行内元素的本质，所以其上下margin依然存在问题

应用

【1】水平垂直居中

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

元素，并且利用absolute的包裹性，使该元素的宽高等于需要定位的元素的宽高

.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】列表项两端对齐

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

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】三栏自适应布局

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

宽度100%显示，并且浮动，内层

为真正的主体内容，含有左右210px的margin值。左栏和右栏都采用margin负值。左栏左浮动，margin-left为-100%，正好使左栏位于页面左侧。右栏左浮动，大小为其本身的宽度200px

html,body{    height: 100%;}body{    margin: 0;}.main{    width: 100%;    height: 100%;    float: left;}.main .in{    margin: 0 210px;    background-color: pink;    height: 100%;}.left,.right{    height: 100%;    width: 200px;    float: left;    background-color: lightgreen;}.left{    margin-left: -100%;}.right{    margin-left: -200px;}

登录后复制

<body><div class="main">    <div class="in"></div></div><div class="left"></div><div class="right"></div></body>

登录后复制

【4】三栏等高布局

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

body{    margin: 0;    overflow: hidden;}ul{    margin: 0;    padding: 0;    list-style: none;}.list{    overflow: hidden;    width: 100%;    height: 100%;}.main{    margin: 0 210px;    background-color: lightgreen;}.left{    width: 200px;    float: left;    background-color: pink;}.right{    width: 200px;    float: right;    background-color: pink;}.main,.left,.right{    margin-bottom: -9999px;    padding-bottom: 9999px;}

登录后复制

<ul class="list">    <li class="left">左侧文字比较少</li>    <li class="right">右侧文字比较多右侧文字比较多右侧文字比较多右侧文字比较多右侧文字比较多右侧文字比较多右侧文字比较多右侧文字比较多右侧文字比较多右侧文字比较多右侧文字比较多右侧文字比较多右侧文字比较多右侧文字比较多右侧文字比较多右侧文字比较多</li>    <li class="main">中间文字比较少</li>    </ul></body>

登录后复制

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7677

CakePHP 教程

1393

C# 教程

1207

steam的账户名称是什么格式

win11激活密钥永久

显示更多

Related knowledge

HTML容易为初学者学习吗？ Apr 07, 2025 am 12:11 AM

HTML适合初学者学习，因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓，易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高，可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。

HTML，CSS和JavaScript的角色：核心职责 Apr 08, 2025 pm 07:05 PM

HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。

HTML中起始标签的示例是什么？ Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

了解HTML，CSS和JavaScript：初学者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。