有关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. JavaScript中Array.prototype.sort()的详解

    摘抄来源:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/sort sor ...

  2. ECMAScript6之Array类型的扩展

    数组的扩展 Array.of() 将一组值转换成数组 Array.of(1,2,3,4,5); //[1,2,3,4,5] Array.from() 可将类似数组的对象或者可便利的对象转换成数组,比如 ...

  3. 用ES6语法和方式写gulp

    安装依赖模块 npm i -g gulp npm i gulp babel-core babel-preset-es2015 --save-dev 在创建文件 .babelrc(文件名) : (文件内 ...

  4. javascript入门基础知识

    JavaScript介绍: 1. javascrip是互联网上最流行的脚本语言,可用于Web和HTML,更可广泛用于服务器.pc端.移动端. 2. javascript脚本语言: javascript ...

  5. noip 2016 提高组题解

    前几天写的那个纯属搞笑.(额,好吧,其实这个也不怎么正经) 就先说说day2吧: T1:这个东西应该叫做数论吧. 然而我一看到就照着样例在纸上推了大半天(然而还是没有看出来这东西是个杨辉三角) 然后就 ...

  6. PHP的ip2long和long2ip函数的实现原理

    最近要做个十进制数字的可逆转换做邀请码,一直没搞清楚怎么弄的,实在太复杂了,今天弄IP时想到这个可以进行转换,于是研究了下原理: 主要是自己整理了下: $ip = '12.34.56.78'; $ip ...

  7. 小程序 - pages/list/list出现脚本错误或者未正确调用 Page()

    这种情况的原因是在要跳转到的页面的js文件中未建立Page()方法,如下: Page({ data: { logs: [] }}) 把以上信息写在js文件即可.

  8. [SQL基础教程] 3-3 HAVING

    [SQL基础教程] 3-3 HAVING HAVING子句 SELECT col_1,col_2 FROM table GROUP BY col_1,col_2 HAVING col_1 = '2'; ...

  9. wvs_patcher批量测试网站

    来自:http://zone.wooyun.org/content/23162 pip install multiprocessing错误. 然后就到官方下载安装包本地安装 multiprocessi ...

  10. 一篇顺手的Ubuntu+caffe配置笔记

    主要参考: https://github.com/lbzhang/dl-setup http://ouxinyu.github.io/Blogs/20151108001.html http://www ...