CSS margin全面了解
副标题[/!--empirenews.page--]
一、margin可以为负值 在盒模型中,内容区的width/height、padding、border都不能为负值,但是margin例外,它可以为负值。 关于margin负值的使用技巧,了解不多,日后有机会再补充,此处先贴一个经典应用,margin-left负值结合浮动实现不改变DOM结构的流体布局。 此demo与CSS float浅析篇中的是同一个。
XML/HTML Code复制内容到剪贴板
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>不改变DOM结构的流体布局</title> <style> .container { width:600px; margin-left: auto; margin-right: auto; background-color: orange; font-size: 16px; line-height: 1.5; }
.box1 { width:100%; float:left; }
.box2 { margin-right: 220px; padding-left: 20px; }
img { width:200px; float:left; margin-left:-200px; }
.clearfix:after { content: ""; display: table; clear: both; }
.clearfix { *zoom: 1; }
</style> </head> <body> (编辑:好传媒网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |