你的位置:首页 > 软件开发 > 网页设计 > CSS marging浅析

CSS marging浅析

发布时间:2016-07-21 03:00:15
一、margin可以为负值在盒模型中,内容区的width/height、padding、border都不能为负值,但是margin例外,它可以为负值。关于margin负值的使用技巧,了解不多,日后有机会再补充,此处先贴一个经典应用,margin-left负值结合浮动实现不改变DO ...

一、margin可以为负值

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

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

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

CSS marging浅析CSS marging浅析
 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='/images/loading.gif' data-original="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg"  style="width:200px;height:300px" />62     </div><!--关闭container-->63   </body>64 </html>

原标题:CSS marging浅析

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。