搜索
热搜： Python 编程 PHP vue dedecms
首页> 前端开发 > Css3 > 正文

CSS margin全面了解

发布时间：2023-06-02 02:33:34 来源：网络
.
江山十日雪，雪深江雾浓。开时刻的牵绊，邀阳光作伴，约清风同行，收拾起行囊，咱们去亲近草原吧，去亲近辽阔无边的草原。

一、margin可以为负值

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

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

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

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  2. <html>
  3. <head>
  4. <metacharset="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. }
  16. .box1{
  17. width:100%;
  18. float:left;
  19. }
  21. .box2{
  22. margin-right:220px;
  23. padding-left:20px;
  24. }
  26. img{
  27. width:200px;
  28. float:left;
  29. margin-left:-200px;
  30. }
  32. .clearfix:after{
  33. content:"";
  34. display:table;
  35. clear:both;
  36. }
  38. .clearfix{
  39. *zoom:1;
  40. }
  42. </style>
  43. </head>
  44. <body>
  45. <divclass="containerclearfix">
  46. <divclass="box1">
  47. <divclass="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. <imgsrc="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg"alt="apicture"style="width:200px;height:300px"/>
  62. </div><!--关闭container-->
  63. </body>
  64. </html>

二、margin的百分比数值

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

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

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  2. <html>
  3. <head>
  4. <metacharset="utf-8">
  5. <title>margin的百分数值</title>
  6. <style>
  7. .container{
  8. width:500px;
  9. height:300px;
  10. margin:50pxauto;
  11. background-color:orange;
  12. border:1pxsolidblack;
  13. }
  15. .box{
  16. width:250px;
  17. height:150px;
  18. margin-left:auto;
  19. margin-right:auto;
  20. background-color:cyan;
  21. }
  23. .box1{
  24. margin-top:75px;
  25. margin-bottom:75px;
  26. padding:5px;
  27. }
  29. .box2{
  30. margin-top:25%;
  31. margin-bottom:25%;
  32. padding:5px;
  33. }
  34. </style>
  35. </head>
  37. <body>
  38. <divclass="container">
  39. <divclass="boxbox1">
  40. <p>父元素的高度为300px，子元素的高度为150px，只要margin-top和margin-bottom都为75px，这个盒子就能垂直居中。</p>
  41. <p>OK，居中啦！！！</p>
  42. </div>
  43. </div>
  44. <divclass="container">
  45. <divclass="boxbox2">
  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. <!DOCTYPEhtml>
  2. <html>
  3. <head>
  4. <metacharset="utf-8">
  5. <title>垂直方向上的margin合并</title>
  6. <style>
  7. .container{
  8. width:500px;
  9. height:300px;
  10. margin:50pxauto;
  11. background-color:orange;
  12. }
  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. }
  24. .border{
  25. border:1pxsolidblack;
  26. /*padding:1px;*/
  27. }
  28. </style>
  29. </head>
  31. <body>
  32. <divclass="container">
  33. <divclass="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. <divclass="containerborder">
  40. <divclass="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. <!DOCTYPEhtml>
  2. <html>
  3. <head>
  4. <metacharset="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:1pxsolidblack;
  14. }
  16. .box1,.box2,.box3,
  17. .box4,.box5,.box6{
  18. width:200px;
  19. height:150px;
  20. margin:30pxauto;
  21. background-color:cyan;
  22. text-align:center;
  23. line-height:150px;
  24. }
  26. .box1{
  27. margin-bottom:30px;
  28. }
  30. .box2{
  31. margin-top:20px;
  32. }
  34. .box3{
  35. margin-bottom:30px;
  36. }
  38. .box4{
  39. margin-top:-30px;
  40. }
  42. .box5{
  43. margin-bottom:-30px;
  44. }
  46. .box6{
  47. margin-top:-50px;
  48. background-color:green;
  49. }
  51. p{
  52. width:220px;
  53. margin:10pxauto;
  54. font-size:16px;
  55. line-height:1.5;
  56. }
  58. </style>
  59. </head>
  61. <body>
  62. <divclass="container">
  63. <divclass="box1">box1</div>
  64. <divclass="box2">box2</div>
  65. <p>box1的margin-bottom为30px，box2的margin-top为20px，两个margin都是正数，取绝对值大的。</p>
  66. </div>
  67. <divclass="container">
  68. <divclass="box3">box3</div>
  69. <divclass="box4">box4</div>
  70. <p>box3的margin-bottom为30px，box4的margin-top为-30px，两个margin一正一负，相加。</p>
  71. </div>
  72. <divclass="container">
  73. <divclass="box5">box5</div>
  74. <divclass="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 margin
关于好代码 | 联系方式 | 版权声明 | 合作赞助 | 网站地图