首页
站长论坛BBS
救助
投稿
discuz视频教程
discuz技术支持
版块
登录
快速注册

负值之美:负margin在页面布局中的应用

ARCHY 2015-6-6 [DIVCSS] 来自PC 复制链接
22408
discuz使用视频教程
31idc

马上注册,一起探讨正确快速的建站方法

您需要 登录 才可以下载或查看,没有帐号?快速注册

x
负数给人总是一种消极、否定、拒绝之感,不过有时利用负margin可以达到奇妙的效果,今天就表一表负值在页面布局中的应用。这里说的负值主要指的是负margin。

关于负margin的原理建议大家看看这篇文章:http://bbs.zb7.com/thread-516102-1-1.html

本文不讲原理,主要展示几个应用。
一、左右列固定,中间列自适应布局  此例适用于左右栏宽度固定,中间栏宽度自适应的布局。由于网页的主体部分一般在中间,很多网页都需要中间列优先加载,而这种布局刚好满足此需求。

HTML:
   
  1. <div class="main">
  2.         <div class="main_body">Main</div>
  3.     </div>
  4.     <div class="left">Left</div>
  5.     <div class="right">Right</div>
复制代码

CSS:
  1. body{
  2.         margin:0;
  3.         padding:0;
  4.         min-width:600px;
  5.     }
  6.     .main{
  7.         float:left;
  8.         width:100%;
  9.     }
  10.     .main_body{
  11.         margin:0 210px;
  12.         background:#888;
  13.         height:200px;
  14.     }
  15.     .left,.right{
  16.         float:left;
  17.         width:200px;
  18.         height:200px;
  19.         background:#F60;
  20.     }
  21.     .left{
  22.         margin-left:-100%;
  23.     }
  24.     .right{
  25.         margin-left:-200px;
  26.     }
复制代码

  效果:
2012082812531391.png
二、去除列表右边框  项目中经常会使用浮动列表展示信息,为了美观通常为每个列表之间设置一定的间距(margin-right),当父元素的宽度固定式,每一行的最右端的li元素的右边距就多余了,去除的方法通常是为最右端的li添加class,设置margin-right:0; 这种方法需要动态判断为哪些li元素添加class,麻烦!!!利用负margin就可以实现下面这种效果:

HTML:
  1. <div id="test">
  2.         <ul>
  3.             <li>子元素1</li>
  4.             <li>子元素2</li>
  5.             <li>子元素3</li>
  6.             <li>子元素4</li>
  7.             <li>子元素5</li>
  8.             <li>子元素6</li>
  9.         </ul>
  10.     </div>
复制代码
   

CSS:
  1. body,ul,li{ padding:0; margin:0;}
  2.     ul,li{ list-style:none;}
  3.     #test{
  4.         width:320px;
  5.         height:210px;
  6.         background:#CCC;
  7.     }
  8.     #test ul{
  9.         margin-right:-10px;
  10.         zoom:1;
  11.     }
  12.     #test ul li{
  13.         width:100px;
  14.         height:100px;
  15.         background:#F60;
  16.         margin-right:10px;
  17.         margin-bottom:10px;
  18.         float:left;
  19.     }
复制代码

  效果:
2012082812544719.png
三、负边距+定位:水平垂直居中  使用绝对定位将div定位到body的中心,然后使用负margin(content宽高的一半),将div的中心拉回到body的中心,已到达水平垂直居中的效果。
HTML:
  1. <div id="test"></div>
复制代码

CSS:
  1. body{margin:0;padding:0;}
  2.     #test{
  3.         width:200px;
  4.         height:200px;
  5.         background:#F60;
  6.         position:absolute;
  7.         left:50%;
  8.         top:50%;
  9.         margin-left:-100px;
  10.         margin-top:-100px;
  11.     }
复制代码

效果:
2012082812561561.png
四、去除列表最后一个li元素的border-bottom  列表中我们经常会添加border-bottom值,最后一个li的border-bottom往往会与外边框重合,视觉上不雅观,往往要移除。
HTML:
  1. <ul id="test">
  2.         <li>Test</li>
  3.         <li>Test</li>
  4.         <li>Test</li>
  5.         <li>Test</li>
  6.         <li>Test</li>
  7.     </ul>
复制代码

CSS:
  1. body,ul,li{margin:0;padding:0;}
  2.     ul,li{list-style:none;}
  3.     #test{
  4.         margin:20px;
  5.         width:390px;
  6.         background:#F4F8FC;
  7.         border-radius:3px;
  8.         border:2px solid #D7E2EC;
  9.     }
  10.     #test li{
  11.         height:25px;
  12.         line-height:25px;
  13.         padding:5px;
  14.         border-bottom:1px dotted #D5D5D5;
  15.         margin-bottom:-1px;
  16.     }
复制代码

效果:
2012082812574768.png
五、多列等高  此例关键是给每个框设置大的底部内边距,然后用数值相似的负外边距消除这个高度。这会导致每一列溢出容器元素,如果把外包容器的overflow属性设为hidden,列就在最高点被裁切。
HTML:
  1. <div id="wrap">
  2.         <div id="left">
  3.             <p style="height:50px">style="height:50px"</p>
  4.         </div>
  5.         <div id="center">
  6.             <p style="height:100px">style="height:100px"</p>
  7.         </div>
  8.         <div id="right">
  9.             <p style="height:200px">style="height:200px"</p>
  10.         </div>
  11.     </div>
复制代码

CSS:
  1. body,p{
  2.         margin:0;
  3.         padding:0;
  4.     }
  5.     #wrap{
  6.         overflow:hidden;
  7.         width:580px;
  8.         margin:0 auto;
  9.     }
  10.     #left,#center,#right{
  11.         margin-bottom:-200px;
  12.         padding-bottom:200px;
  13.     }
  14.     #left {
  15.         float:left;
  16.         width:140px;
  17.         background:#777;
  18.     }
  19.     #center {
  20.         float:left;
  21.         width:300px;
  22.         background:#888;
  23.     }
  24.     #right {
  25.         float:right;
  26.         width:140px;
  27.         background:#999;
  28.     }
  29.     p {color:#FFF;text-align:center}
复制代码

  效果:
2012082813072672.png



上一篇:css中的负边距(negative margin)是布局中的一个常用技巧
下一篇:微信营销的基础是用心交朋友你知道吗?
zgny 发表于 2015-6-9 13:11:50 来自PC
豆瓣的号都被封了SSDSDSD
筱黑 发表于 2015-6-11 06:24:42 来自PC
这个不错,值得看一下!
您需要登录后才可以回帖 登录 | 快速注册

本版积分规则

快速回复 返回顶部 返回列表