你的位置:首页 > 软件开发 > 网页设计 > CSS marging负值及其它

CSS marging负值及其它

发布时间:2016-07-22 13:00:17
一、margin可以为负值在盒模型中,内容区的width/height、padding、border都不能为负值,但是margin例外,它可以为负值。margin负值的本质,在于它改变了元素在普通流中所占据的空间。 关于margin负值的使用技巧,了解不多,日后有机会再补充, ...

一、margin可以为负值

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

margin负值的本质,在于它改变了元素在普通流中所占据的空间。

CSS marging负值及其它

 

关于margin负值的使用技巧,了解不多,日后有机会再补充,此处先贴三个经典应用。

1.    margin-left负值结合浮动实现不改变DOM结构的流体布局。

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

原标题:CSS marging负值及其它

关键词:CSS

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