有关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. KB2533623 下载

    服务器上要部署.NET Core 的环境, 先要在服务器上安装Core SDK.直达连接 下载安装一切顺利: 下面开始检验是否正确安装了↓ 运行→cmd→dotnet 结果报错↓ Failed to ...

  2. C#-实验3

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  3. ECS活动真实IP (前端存在SLB)

    log_format main 'realip:$http_x_forwarded_for slbip:$remote_addr-$remote_user [$time_local] "$r ...

  4. CUDA开发存储器运用(包括存储器之间的转存)

    主机端内存(host memory) 主机端叶锁定内存(pinned memory) 显存 寄存器(register) 局部存储器(local memory) 共享存储器(shared memory) ...

  5. HTML,CSS,JS,JQ

    CSS: <style> <!--属性选择器--> .container input[type="text"][name="txt"]{ ...

  6. PHP静态延迟绑定简单示例

    没怎么用过这个新特性,其实也不算新啦,试试吧,现在静态类的继承很方便了 <?php class A { protected static $def = '123456'; public stat ...

  7. JavaScript忍者秘籍——闭包

    概要:本篇博客主要介绍了JavaScript的闭包 1.闭包的工作原理 简单地说,闭包就是一个函数在创建时允许该自身函数访问并操作该自身函数之外的变量时所创建的作用域. 例如: var outerVa ...

  8. 12.04 css小测div+css...

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. php笔记(五)PHP类和对象之对象的高级特性

    对象比较,当同一个类的两个实例的所有属性都相等时,可以使用比较运算符==进行判断,当需要判断两个变量是否为同一个对象的引用时,可以使用全等运算符===进行判断. class Car { } $a = ...

  10. 安装器---Inno Setup

    Inno Setup[1]  用Delphi写成,其官方网站同时也提供源程序免费下载.它虽不能与Installshield这类恐龙级的安装制作软件相比,但也当之无愧算是后起之秀.Inno Setup是 ...