你的位置:首页 > 网页设计

[网页设计]深入理解CSS中的margin负值


×
目录
[1]表现 [2]重叠 [3]浮动[4]定位[5]应用

前面的话

  margin属性在实际中非常常用,也是平时踩坑较多的地方。margin折叠部分相信不少人都因为这样那样的原因中过招。margin负值也是很常用的功能,很多特殊的布局方法都依赖于它。它看似简单,实际上却蛮复杂,本文就margin负值作详细介绍和梳理

  [注意]关于margin部分的基础知识移步至此

 

表现

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

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

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

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

 

重叠

  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的百分比相对于包含块的宽度,所以在需要居中的元素外面套一个空的<div>元素,并且利用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】三栏自适应布局

  中间的主体使用双层标签,外层<div>宽度100%显示,并且浮动,内层<div>为真正的主体内容,含有左右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,.left,.right{  margin-bottom: -9999px;  padding-bottom: 9999px;}.main{  margin: 0 210px;  background-color: lightgreen;}.left{  width: 200px;  float: left;  background-color: pink;}.right{  width: 200px;  float: right;  background-color: pink;}

<body><ul class="list">  <li class="left"></li>  <li class="right"></li>  <li class="main"></li>  </ul></body>