http://www.w3school.com.cn/tiy/t.asp 预览工具

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

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

<!DOCTYPE html>

<html>

<head>

<style>

  body{

        margin:0;

        padding:0;

        min-width:600px;

    }

    .main{

        float:left;

        width:100%;

    }

    .main_body{

        margin:0 210px;

        background:#888;

        height:200px;

    }

    .left,.right{

        float:left;

        width:200px;

        height:200px;

        background:#F60;

    }

    .left{

        margin-left:-100%;

    }

    .right{

        margin-left:-200px;

    }

</style>

</head>

<body>

 <div class="main">

        <div class="main_body">Main</div>

    </div>

    <div class="left">Left</div>

    <div class="right">Right</div>

</body>

</html>

二、去除列表右边框

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

<!DOCTYPE html>

<html>

<head>

<style>

 body,ul,li{ padding:0; margin:0;}

    ul,li{ list-style:none;}

    #test{

        width:320px;

        height:210px;

        background:#CCC;

    }

    #test ul{

        margin-right:-10px;

        zoom:1;

    }

    #test ul li{

        width:100px;

        height:100px;

        background:#F60;

        margin-right:10px;

        margin-bottom:10px;

        float:left;

    }

</style>

</head>

<body>

  <div id="test">

        <ul>

            <li>子元素1</li>

            <li>子元素2</li>

            <li>子元素3</li>

            <li>子元素4</li>

            <li>子元素5</li>

            <li>子元素6</li>

        </ul>

    </div>

</body>

</html>

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

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

<!DOCTYPE html>

<html>

<head>

<style>

 body{margin:0;padding:0;}

    #test{

        width:200px;

        height:200px;

        background:#F60;

        position:absolute;

        left:50%;

        top:50%;

        margin-left:-100px;

        margin-top:-100px;

    }

</style>

</head>

<body>

<div id="test"></div>

</body>

</html>

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

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

如果li的border-bottom颜色与ul的border颜色是一样的时候，在视觉上是被隐藏了。如果其颜色不一致的时候还是有问题，给ul写个overflow：hidden；就可以解决这个问题。

<!DOCTYPE html>

<html>

<head>

<style>

body,ul,li{margin:0;padding:0;}

    ul,li{list-style:none;}

    #test{

        margin:20px;

        width:390px;

        background:#F4F8FC;

        border-radius:10px;

        border:2px solid #D7E2EC;

    }

    #test li{

        height:25px;

        line-height:25px;

        padding:5px;

        border-bottom:1px dotted #D5D5D5;

        margin-bottom:-1px;

    }

</style>

</head>

<body>

  <ul id="test">

        <li>Test</li>

        <li>Test</li>

        <li>Test</li>

        <li>Test</li>

        <li>Test</li>

    </ul>

</body>

</html>

http://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html

http://www.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/

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

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

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

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

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

  3. （负）-margin在页面布局中的应用

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

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

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

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

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

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

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

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

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

  8. 浮动和margin负值 三列布局

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

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

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

随机推荐

  1. hdu-5701 中位数计数(中位数)

    题目链接: 中位数计数 Problem Description   中位数定义为所有值从小到大排序后排在正中间的那个数,如果值有偶数个,通常取最中间的两个数值的平均数作为中位数. 现在有nn个数,每个 ...

  2. 【转】对于移动APP测试的一个小技巧

    目标:目前越来越多的应用要支持移动设备,html5的推出,方便了页面对移动app的支持,那么我们该如何有效的去测试同时支持app和web的代码?web的测试可以使用浏览器的一些工具来辅助测试,比如ff ...

  3. Sublime text3 笔记

    打算换个编辑器,以前用dw,在到Aptana,都是比较大的编辑器了,打开的时候都有些慢,久闻sublime text3,小巧轻便,插件丰富,所以决定换下 官网下载地址(ps 之前下载了各种的破解版,总 ...

  4. 【网络收集】order by 自定义排序

    使用order by排序,有时候不是根据字符或数字顺序,而是根据实际要求排序. 例如有客户A,B,C,我希望排序结果是B,C,A,那么就要通过自定义的规则排序. 第一种方法,可以构造一张映射表,将客户 ...

  5. GitHub之创建

    O(∩_∩)O~ 爱“搞事”的我又创了一个Github账号,和当初加入博客园的初衷一样,为了广泛交流和学习而已.很久之前我就发现了有很多人都在使用GitHub,然而当时看不懂英文(绝大部分都是英文), ...

  6. sql server创建表相关

    1,设置主键的sql的三种方式 a.字段名 int primary key b.字段名 int constraint 主键名 primary key clustered(字段名) c.创建表是,后置一 ...

  7. 20150320--安全性，Membership类

    安全性--验证与授权,成员资格与角色. 一.成员资格与角色, 第一步:注册数据库,在VS中运行dos命令窗口中,输入:aspnet_regsql,建立数据库表. 如何启动VS的dos命令窗口,在  . ...

  8. JavaScript开发技巧

    1.在编写js代码时,应尽量避免全局变量的使用.如果实在需要使用全局变量,则可以使用一个function来规避全局变量的使用. 2.数字解析 //1.丢弃小数部分,保留整数部分 alert( pars ...

  9. Mybatis-Generator插件自动生成Dao、Model、Mapping相关文件

    最近做项目,mapping 有点多而且容易写错,于是试着用了Mybatis-Generator 插件自动生成 dao, domain  mapping 文件.感觉还挺好用.把相关配置分享,一边以后做项 ...

  10. HyperMesh生成Flac3D的剖分网格

    本帖的目的是探索煤矿沉积岩层采煤过程中的力学分析模拟的前处理方法,计算软件采用公认的Flac3D差分方法. 目前,Flac3D官方提供的剖分网格的生成方法有三种.一是直接使用命令和Fish语句生成,这 ...