一、margin可以为负值在盒模型中,内容区的width/height、padding、border都不能为负值,但是margin例外,它可以为负值。margin负值的本质,在于它改变了元素在普通流中所占据的空间。 关于margin负值的使用技巧,了解不多,日后有机会再补充, ...
一、margin可以为负值
在盒模型中,内容区的width/height、padding、border都不能为负值,但是margin例外,它可以为负值。
margin负值的本质,在于它改变了元素在普通流中所占据的空间。
关于margin负值的使用技巧,了解不多,日后有机会再补充,此处先贴三个经典应用。
1. margin-left负值结合浮动实现不改变DOM结构的流体布局。
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
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。