本文转载自:http://www.topcss.org/?p=94,有修改。

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

  关于负margin的原理建议大家看看这篇文章:http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html#2457812

  本文不讲原理,主要展示几个应用。

一、左右列固定,中间列自适应布局

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

  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. }

  效果:

二、去除列表右边框

  项目中经常会使用浮动列表展示信息,为了美观通常为每个列表之间设置一定的间距(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. }

  效果:

三、负边距+定位:水平垂直居中

  使用绝对定位将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. }

  效果:

四、去除列表最后一个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. }

  效果:

五、多列等高

  此例关键是给每个框设置大的底部内边距,然后用数值相似的负外边距消除这个高度。这会导致每一列溢出容器元素,如果把外包容器的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}

  效果:

负值之美:负margin在页面布局中的应用的更多相关文章

  1. 负margin在页面布局中的应用

    关于负margin的原理建议大家看看这篇文章:http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html#2457812 一. 左右列固定, ...

  2. (负)-margin在页面布局中的应用

    有关margin的原理可以看看这篇文章:http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html#2457812 有关margin负值的几 ...

  3. [转]关于负margin在页面中布局的应用

    本文转载自:http://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html. 今天再写一个布局的时候用到一个margin-top是负值的情况 ...

  4. 在HTML页面布局中,position的值有几种,默然的值是什么

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  5. margin负值在页面布局中的应用

    http://www.w3school.com.cn/tiy/t.asp 预览工具 一.左右列固定,中间列自适应布局 此例适用于左右栏宽度固定,中间栏宽度自适应的布局.由于网页的主体部分一般在中间,很 ...

  6. 关于 静态页面布局 中的一些BUG

    作为一枚初级程序猿,难免在制作静态页面时会遇到一些BUG,在此,我从网上找了一些资料并且结合自己的项目开发经验,总结了一些在静态页面布局时可能会遇到的问题,希望能对初级程序猿有一定的帮助(资料请参考: ...

  7. 【html+css】关于页面布局中遇到的问题记录

    关于行内元素: 行内元素设置width无效, height无效(可以设置line-height), margin上下无效,padding上下无效,margin和padding可设置左右.   text ...

  8. 关于页面布局中,如何让一个div水平和垂直居中的五个方案

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 在页面布局中,CSS如何实现左侧宽度固定,右侧宽度自适应的布局?

    首先给出DOM结构 <divclass="box"> <divclass="box-left"></div> <div ...

随机推荐

  1. linux 使用随笔

    目录:1,ab命令 一,ab命令 ab网站压力测试命令的参数.输出结果的中文注解 ab命令是Apache的Web服务器的性能测试工具,它可以测试安装Web服务器每秒种处理的HTTP请求. 来自: ht ...

  2. Java的Guava

    主要是看代码看到了Table这个类,竟然有两个键! http://www.cnblogs.com/peida/p/3183505.html

  3. Alpha版本检测报告

    1.Alpha版本测试报告 发布一篇随笔,作为项目的测试报告,内容包括: (1)测试计划 测试人员 工作安排 覃一霸 编写测试报告 张江波 执行测试.截图测试结果 测试功能 功能 描述 效果 结果 登 ...

  4. UI5-文档-4.12-Shell Control as Container

    现在我们使用shell控件作为应用程序的容器,并使用它作为新的根元素.shell通过在桌面屏幕上引入一个所谓的信箱,来负责应用程序对设备屏幕大小的视觉调整. Preview The app is no ...

  5. TensorFlow入门-Tianic数据集训练

    import pandas as pd import tensorflow as tf from sklearn.model_selection import train_test_split imp ...

  6. Linux 如何将一个文件夹的所有内容授权给某一个用户

    我们可以使用chown命令,ch这里代表change(改变)的意思,own代表英文单词的owner(拥有者),连在一起就是 change owner ,改变某个文件或者文件夹的拥有者. 一般只有roo ...

  7. iOS开发-常用第三方开源框架介绍(你了解的ios只是冰山一角)--(转)

    图像: 1.图片浏览控件MWPhotoBrowser 实现了一个照片浏览器类似 iOS 自带的相册应用,可显示来自手机的图片或者是网络图片,可自动从网络下载图片并进行缓存.可对图片进行缩放等操作. 下 ...

  8. Nunit与Vs 2012配合使用

    要使用Nunit首先要去官网 http://www.nunit.org/ 下载Nunit.win  .msi是安装版.   bin  .zip是绿色版. 下载完后安装. 在 VS2012 中使用 Nu ...

  9. 数据预处理之独热编码(One-Hot Encoding)(转载)

    问题由来 在很多机器学习任务中,特征并不总是连续值,而有可能是分类值. 例如,考虑一下的三个特征: ["male", "female"] ["from ...

  10. oozie错误:javax.servlet.jsp.el.ELException: variable [***] cannot be resolved

    完整错误: javax.servlet.jsp.el.ELException: variable [compute] cannot be resolved at org.apache.oozie.ut ...