CSS margin全面掌握

日期：2021-03-18 类型：科技新闻 

关键词：h5平台，手机端网页，手机端网页模板，免费的h5场景制作平台，h5制作工具

1、margin能够为负值

在盒实体模型中，內容区的width/height、padding、border都不可以为负值，可是margin列外，它能够为负值。

有关margin负值的应用技能，掌握很少，往后还有机会再填补，此处先贴1个經典运用，margin-left负值融合波动完成不更改DOM构造的流体合理布局。

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

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf⑻">  
  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:⑵00px;   
  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>倘若有1段文字和1幅图象，在DOM连接点中，文字在前，图象在后，如何能把图象精准定位到右侧呢？</p>  
  50.                 <p>一般的做法是，替换DOM连接点中图象与文字的部位，让图象在前，文字在后，随后将图象波动到右侧便可。</p>  
  51.                 <p>但这样更改DOM连接点次序自始至终不当之处，也有甚么更好的方式呢？</p>  
  52.                 <p>下面就详细介绍1种新的思路来进行合理布局。</p>  
  53.                 <ul>  
  54.                     <li>将文字用div包起来，界定为box1；如今的构造是1个box1和1个img。</li>  
  55.                     <li>将box1宽度设为100%，左波动；将img设定1个宽度，也左波动，随后margin-left设为负的宽度值；此时图象就精准定位到文字的右侧啦。</li>  
  56.                     <li>可是有1个难题，图象盖住了文字內容，这可如何办？</li>  
  57.                     <li>关键来了，在box1中提升1个box2，box2把文字所有包起来，随后margin-right设为图象的宽度（+附加的间隔），这样就处理难题啦！</li>  
  58.                 </ul>  
  59.                 </div><!--关掉box2-->  
  60.             </div><!--关掉box1-->  
  61.             <img src="http://imgsrc.baidu.com/forum/w%三d580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="a picture" style="width:200px;height:300px" />  
  62.         </div><!--关掉container-->  
  63.     </body>  
  64. </html>  

2、margin的百分比标值

当margin特性的值为百分数时，其一直以父元素的width为基数开展测算。

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

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf⑻">  
  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>  

3、竖直方位上margin的合拼

这个难题常常导致1些疑惑，但是只必须记牢1句话便可，竖直方位上的margin要是亲密无间触碰就汇合并，也仅有亲密无间触碰才汇合并。

竖直方位上margin的合拼，假如产生在邻近元素，实际上是很好了解的；可是假如产生在父元素与子元素之间，就一些奇异了。

看来事例：

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf⑻">  
  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亲密无间触碰了呀，因此它们合拼在1起了啊。</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⑻">  
  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: ⑶0px;   
  40.             }   
  41.   
  42.             .box5 {   
  43.                 margin-bottom: ⑶0px;   
  44.             }   
  45.   
  46.             .box6 {   
  47.                 margin-top: ⑸0px;   
  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为⑶0px，两个margin1正1负，相加。</p>    
  71.         </div>  
  72.         <div class="container">  
  73.             <div class="box5">box5</div>  
  74.             <div class="box6">box6</div>  
  75.             <p>box5的margin-bottom为⑶0px，box6的margin-top为⑸0px，两个margin全是负数，取肯定值大的。</p>    
  76.         </div>  
  77.     </body>  
  78. </html>  

1.    两个margin全是正数，取肯定值大的；

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

3.    两个margin全是负数，取肯定值大的。

以上这篇CSS margin全面掌握便是网编共享给大伙儿的所有內容了，期待能给大伙儿1个参照，也期待大伙儿多多适用脚本制作之家。

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

上一篇：聊友圈，咱聊城市人自身的微信朋友圈将要发布 返回下一篇：没有了