首页 网页制作网络编程脚本专栏数据库网站运营网络安全平面设计CMS教程

CSS margin全面了解

所属分类： 网页制作 / CSS 阅读数： 1598
收藏 0 赞 0 分享

一、margin可以为负值

在盒模型中，内容区的width/height、padding、border都不能为负值，但是margin例外，它可以为负值。

关于margin负值的使用技巧，了解不多，日后有机会再补充，此处先贴一个经典应用，margin-left负值结合浮动实现不改变DOM结构的流体布局。

此demo与CSS float浅析篇中的是同一个。

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.         <title>不改变DOM结构的流体布局</title>  
  6.         <style>  
  7.             .container {   
  8.                 width:600px;   
  9.                 margin-left: auto;   
  10.                 margin-right: auto;   
  11.                 background-color: orange;   
  12.                 font-size: 16px;   
  13.                 line-height: 1.5;   
  14.             }   
  15.   
  16.             .box1 {   
  17.                 width:100%;   
  18.                 float:left;   
  19.             }   
  20.   
  21.             .box2 {   
  22.                 margin-right: 220px;   
  23.                 padding-left: 20px;   
  24.             }   
  25.   
  26.             img {   
  27.                 width:200px;   
  28.                 float:left;   
  29.                 margin-left:-200px;   
  30.             }   
  31.   
  32.             .clearfix:after {   
  33.                 content: "";   
  34.                 display: table;   
  35.                 clear: both;   
  36.             }   
  37.   
  38.             .clearfix {   
  39.                 *zoom: 1;   
  40.             }   
  41.   
  42.         </style>  
  43.     </head>  
  44.     <body>  
  45.         <div class="container clearfix">  
  46.             <div class="box1">  
  47.                 <div class="box2">  
  48.                 <h3>不改变DOM位置的流体布局</h3>  
  49.                 <p>假如有一段文本和一幅图像，在DOM节点中，文本在前，图像在后，怎么能把图像定位到右边呢？</p>  
  50.                 <p>通常的做法是，调换DOM节点中图像与文本的位置，让图像在前，文本在后，然后将图像浮动到右边即可。</p>  
  51.                 <p>但这样改变DOM节点顺序始终不妥，还有什么更好的方法呢？</p>  
  52.                 <p>下面就介绍一种新的思路来完成布局。</p>  
  53.                 <ul>  
  54.                     <li>将文本用div包起来，定义为box1；现在的结构是一个box1和一个img。</li>  
  55.                     <li>将box1宽度设为100%，左浮动；将img设置一个宽度，也左浮动，然后margin-left设为负的宽度值；此时图像就定位到文本的右边啦。</li>  
  56.                     <li>但是有一个问题，图像盖住了文本内容，这可怎么办？</li>  
  57.                     <li>重点来了，在box1中增加一个box2，box2把文本全部包起来，然后margin-right设为图像的宽度（+额外的间距），这样就解决问题啦！</li>  
  58.                 </ul>  
  59.                 </div><!--关闭box2-->  
  60.             </div><!--关闭box1-->  
  61.             <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="a picture" style="width:200px;height:300px" />  
  62.         </div><!--关闭container-->  
  63.     </body>  
  64. </html>  

二、margin的百分比数值

当margin属性的值为百分数时，其总是以父元素的width为基数进行计算。

请看下面这个demo，当初折磨了我N久的。。。只怪我知道得太晚了，说多了都是泪啊。。。

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.         <title>margin的百分数值</title>  
  6.         <style>  
  7.             .container {   
  8.                 width: 500px;   
  9.                 height: 300px;   
  10.                 margin: 50px auto;   
  11.                 background-color: orange;   
  12.                 border: 1px solid black;   
  13.             }   
  14.   
  15.             .box {   
  16.                 width: 250px;   
  17.                 height: 150px;   
  18.                 margin-left: auto;   
  19.                 margin-right: auto;   
  20.                 background-color: cyan;   
  21.             }   
  22.   
  23.             .box1 {   
  24.                 margin-top: 75px;   
  25.                 margin-bottom: 75px;   
  26.                 padding: 5px;   
  27.             }   
  28.                
  29.             .box2 {   
  30.                 margin-top: 25%;   
  31.                 margin-bottom: 25%;   
  32.                 padding: 5px;   
  33.             }   
  34.         </style>  
  35.     </head>  
  36.   
  37.     <body>  
  38.         <div class="container">  
  39.             <div class="box box1">  
  40.                 <p>父元素的高度为300px，子元素的高度为150px，只要margin-top和margin-bottom都为75px，这个盒子就能垂直居中。</p>  
  41.                 <p>OK，居中啦！！！</p>  
  42.             </div>  
  43.         </div>  
  44.         <div class="container">  
  45.             <div class="box box2">  
  46.                 <p>既然子元素的高度是父元素高度的50%，那么只要margin-top和margin-bottom都为25%，应该也能垂直居中。</p>  
  47.                 <p>额，这什么鬼？说好的居中呢？</p>  
  48.             </div>  
  49.         </div>  
  50.     </body>  
  51. </html>  

三、垂直方向上margin的合并

这个问题经常造成一些困惑，不过只需要记住一句话即可，垂直方向上的margin只要亲密接触就会合并，也只有亲密接触才会合并。

垂直方向上margin的合并，如果发生在相邻元素，其实是很好理解的；但是如果发生在父元素与子元素之间，就有些怪异了。

来看例子：

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.         <title>垂直方向上的margin合并</title>  
  6.         <style>  
  7.             .container {   
  8.                 width: 500px;   
  9.                 height: 300px;   
  10.                 margin: 50px auto;   
  11.                 background-color: orange;   
  12.             }   
  13.   
  14.             .box {   
  15.                 width: 300px;   
  16.                 height: 200px;   
  17.                 margin-left: auto;   
  18.                 margin-right: auto;   
  19.                 background-color: cyan;   
  20.                 margin-top: 25px;   
  21.                 padding: 5px;   
  22.             }   
  23.   
  24.             .border {   
  25.                 border: 1px solid black;   
  26.                 /*padding: 1px;*/   
  27.             }   
  28.         </style>  
  29.     </head>  
  30.   
  31.     <body>  
  32.         <div class="container">  
  33.             <div class="box">  
  34.                 <p>父元素的margin-top为50px，子元素的margin-top为25px；</p>  
  35.                 <p>咦，子元素的margin-top呢？为什么都顶到父元素上边界了？</p>  
  36.                 <p>额，因为父元素与子元素的margin-top亲密接触了呀，所以它们合并在一起了啊。</p>  
  37.             </div>  
  38.         </div>  
  39.         <div class="container border">  
  40.             <div class="box">  
  41.                 <p>可是我就是想让子元素距离父元素的上边界25px啊，我不想让它们合并呀。</p>  
  42.                 <p>很简单，给父元素加个边框，它们就无法亲密接触了，就不会合并了啊。</p>  
  43.                 <p>或者给父元素设置padding也是可以的喔。</p>  
  44.             </div>  
  45.         </div>  
  46.     </body>  
  47. </html>  

消除垂直方向上margin合并的方法：给父元素加border或者加padding，打破父元素与子元素margin之间的亲密接触即可。

margin合并的规则：

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.         <title>margin合并规则</title>  
  6.         <style>  
  7.             .container {   
  8.                 width: 300px;   
  9.                 height: 500px;   
  10.                 margin: 50px;   
  11.                 background-color: orange;   
  12.                 float: left;   
  13.                 border: 1px solid black;   
  14.             }   
  15.   
  16.             .box1,.box2,.box3,   
  17.             .box4,.box5,.box6 {   
  18.                 width: 200px;   
  19.                 height: 150px;   
  20.                 margin: 30px auto;   
  21.                 background-color: cyan;   
  22.                 text-align: center;   
  23.                 line-height: 150px;   
  24.             }   
  25.   
  26.             .box1 {   
  27.                 margin-bottom: 30px;   
  28.             }   
  29.   
  30.             .box2 {   
  31.                 margin-top: 20px;   
  32.             }   
  33.   
  34.             .box3 {   
  35.                 margin-bottom: 30px;   
  36.             }   
  37.   
  38.             .box4 {   
  39.                 margin-top: -30px;   
  40.             }   
  41.   
  42.             .box5 {   
  43.                 margin-bottom: -30px;   
  44.             }   
  45.   
  46.             .box6 {   
  47.                 margin-top: -50px;   
  48.                 background-color: green;   
  49.             }   
  50.   
  51.             p {   
  52.                 width: 220px;   
  53.                 margin:10px auto;   
  54.                 font-size: 16px;   
  55.                 line-height: 1.5;   
  56.             }   
  57.   
  58.         </style>  
  59.     </head>  
  60.   
  61.     <body>  
  62.         <div class="container">  
  63.             <div class="box1">box1</div>  
  64.             <div class="box2">box2</div>  
  65.             <p>box1的margin-bottom为30px，box2的margin-top为20px，两个margin都是正数，取绝对值大的。</p>    
  66.         </div>  
  67.         <div class="container">  
  68.             <div class="box3">box3</div>  
  69.             <div class="box4">box4</div>  
  70.             <p>box3的margin-bottom为30px，box4的margin-top为-30px，两个margin一正一负，相加。</p>    
  71.         </div>  
  72.         <div class="container">  
  73.             <div class="box5">box5</div>  
  74.             <div class="box6">box6</div>  
  75.             <p>box5的margin-bottom为-30px，box6的margin-top为-50px，两个margin都是负数，取绝对值大的。</p>    
  76.         </div>  
  77.     </body>  
  78. </html>  

1.    两个margin都是正数，取绝对值大的；

2.    一个margin是正数，另一个margin是负数，相加；

3.    两个margin都是负数，取绝对值大的。

以上这篇CSS margin全面了解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

原文地址：http://www.cnblogs.com/cc156676/archive/2016/07/21/5690270.html

更多精彩内容其他人还在看

CSS教程:CSS命名参考

在XHTML中定义ID、CLASSS都用得上，主要是方面CSS定义样式时能一眼看穿。所以，CSS命名仅作参考。 (1)页面结构类 容器: container 页头：header 内容：content/container 页面主体：main 页尾：footer 导航：na
收藏 0 赞 0 分享

CSS教程:控制网页文件大小通过精简CSS实现

尽管对于现如今的带宽来说，网页文件那仅以K来算的大小实在是微不足道，但如何将这以K来计算的网页文件精简到最小还是网页设计师们所应该考虑的问题之一。 众所周之，在不影响整个网页构架与功能的情况下，网页文件越小越好，因为更小的网页文件有利于浏览器对网页的解释
收藏 0 赞 0 分享

CSS教程:关于文字溢出问题的研究

首先引起对这个溢出问题进行研究是因为看到一个朋友的帖子，里面提到ie7下出现的文字溢出问题； 于是又重新翻了以前怿飞斑竹的帖子，他提到的是注释引起的文字溢出问题，我今天看的时候发现在ie7下并没有产生多猪的问题(以前我没有装ie7，所以没有测试)，今天看到这个新
收藏 0 赞 0 分享

符合web标准的嵌入Flash的方法

　　常有网友提问，如何让网页中嵌入的Flash标签也符合web标准。目前还没有一个完美的解决办法，这篇文章中，我们将Flash嵌入标签写入js文件中，通过变量传递参数的办法来回避不符合标准的标签。 　　请注意，这只是一个变通的方法，换汤不换药，并未能最终解决存在的
收藏 0 赞 0 分享

学习WEB标准必备的四项技能

今天在群里，熊猫君提议整理一个帖子，一方面为初学者提供一个入门指南，另一方面也象借此和已经在从事这个行业进行一点交流。下面是我从事这个行当多年的一些经验总结，希望抛砖引玉，大家不吝赐教。 １、必备工具 其实web标准并不是很复杂的技术，实现web标准的工具
收藏 0 赞 0 分享

CSS对表格单元格强制换行和不换行

CSS控制Table单元格强制换行与强制不换行 　　我们知道Div的换行和不换行的css写法。但对于表格单元格只知道一个属性nowrap可以使其不换行。 　　近日有此需要，但发现加上nowrap在某些情况下还是会换行！无奈，没有一个强制不换行的方法吗？ 　　用C
收藏 0 赞 0 分享

CSS制作符合网站标准的细线表格

css教程：实现符合Web标准的细线表格 　　随着应用CSS网页布局构建网页， 　　以及web标准的广泛普及与发展， 　　表格渐渐被人们遗忘， 　　但是表格还是有它优秀的一面， 　　数据处理用表格的确省了不少麻烦！ 　　这个是细表格的代码，并且通过了标准验证！ tab
收藏 0 赞 0 分享

区分IE6,IE7和firefox的CSS hack

这篇文章主要为介绍了CSS小技巧之有效区分IE6,IE7,Firefox，需要的朋友可以参考下
收藏 0 赞 0 分享

CSS教程:用dl dt dd来制作列表

　　今天有人发邮件问的一个问题,最开始的想法是用ul列表来实现;但是这样用出现两个比较麻烦的地方： 　　1、如果用UL还布局，右边一栏比较麻烦； 　　2、文字外边的边框自适应比较麻烦； 　　3、很可能要定死高度； 　　所以，细细地看一看这个布局，想一想还是用DL.DT.DD作
收藏 0 赞 0 分享

性感的CSS菜单(Menus)

当你需要一个简单易用的导航菜单得时候。CSSMenu是个不错的选择。相对于Flash/Javascript，他们小巧轻便，而且方便使用。当然，他们也能做出很多很漂亮的效果。 CssMenuExample 这里有几个专门收集CSS导航菜单的站点，其中有很多优秀的作品。也许能给
收藏 0 赞 0 分享
查看更多

网络赚钱

更多

站长故事

更多
建站极客
合作伙伴
在线工具
建站极客移动版
聚合全网技术文章，根据你的阅读喜好进行个性推荐
© 2012 - 2020 zhanzhang360.cn Some Rights Reserved.
沪ICP备13040166号-22