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

有关margin负值的几个案例可以参考:http://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html

主要有以下几种情况:

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

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

二、去除列表右边框 ;

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

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

使用绝对定位将div定位到body的中心,然后使用负margin(content宽高的一半),将div的中心拉回到body的中心,已到达水平垂直居中的效果。

四、去除列表最后一个li元素的border-bottom;

列表中我们经常会添加border-bottom值,最后一个li的border-bottom往往会与外边框重合,视觉上不雅观,往往要移除。

五、多列等高 ;

此例关键是给每个框设置大的底部内边距,然后用数值相似的负外边距消除这个高度。这会导致每一列溢出容器元素,如果把外包容器的overflow属性设为hidden,列就在最高点被裁切。

(负)-margin在页面布局中的应用的更多相关文章

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

    本文转载自:http://www.topcss.org/?p=94,有修改. 负数给人总是一种消极.否定.拒绝之感,不过有时利用负margin可以达到奇妙的效果,今天就表一表负值在页面布局中的应用.这 ...

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

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

  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. CodeForces 415D Mashmokh and ACM

    $dp$. 记$dp[i][j]$表示已经放了$i$个数字,并且第$i$个数字放了$j$的方案数.那么$dp[i][j] = \sum\limits_{k|j}^{}  {dp[i - 1][k]}$ ...

  2. oracle——用户

    新增用户 用system用户登录 CREATE USER TEST1 IDENTIFIED BY TEST1; CREATE USER:创建用户命令,后跟用户名: IDENTIFIED BY:后跟密码 ...

  3. InnoDB的Named File Formats

    随着InnoDB存储引擎的发展,新的页数据结构有时用来支持新的功能特性.比如前面提到的InnoDB Plugin,提供了新的页数据结构来支持表压缩功能,完全溢出的(Off page)大变长字符类型字段 ...

  4. Cocos2d-x 3.x事件分发机制总结

    在2.x中处理事件需要用到委托代理(delegate),相信学过2.x的触摸事件的同学,都知道创建和移除的流程十分繁琐.而在3.x中由于加入了C++11的特性,而对事件的分发机制通过事件分发器Even ...

  5. centos jdk 安装

    1)下载JDK 1.7(1.7.0_25) 下载地址为: http://www.Oracle.com/technetwork/java/javase/downloads/jdk7-downloads- ...

  6. js中width,height,left,top计算

    ①offset    包括了元素的边框和内边距和滚动条 offsetWidth.offsetHeight元素的宽度和高度 offsetLeft .offsetTop元素相对于文档左边和顶部的距离(定位 ...

  7. java 基本数据类型跟封装类型的差距

    import java.util.*; class test1{ public static void main(String[] args){ long start1 = System.curren ...

  8. jmeter命令行运行-分布式测试

    上一篇文章我们说到了jmeter命令行运行但是是单节点下的, jmeter底层用java开发,耗内存.cpu,如果项目要求大并发去压测服务端的话,jmeter单节点难以完成大并发的请求,这时就需要对j ...

  9. magento获取一些值的方法函数

    1显示产品列表页(列表.PHTML).echo $this->getProductListHtml(); 2.得到你的Magento的页面的路径.  echo $this->getUrl( ...

  10. [Linux]当一个棘手问题需要即可定位,如何协助开发,缩小定位范围

    写在前面:前段时间,朋友给我说了一个她亲身经历的某知名企业面试故事,面试结束感觉自己已脱了一层皮...面试官的问题并不刁钻,但是却是步步紧逼,而且有点类似拜占庭将军问题,只是拜占庭将军问题是所有的假设 ...