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