css margin
浏览数：35 /
时间：2015年06月09日
诚实地面对自己，知之为知之，不知为不知。
好像看了几篇博客，不过懂得东西，吸收到的只有这么点...
css中margin边界叠加问题：
看个同方向和异方向margin重叠现象：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> body { background-color:#CFC} .outer{ margin: 30px; width: 300px; background-color:#669; } .inner1{ margin: 30px; padding: 8px; background-color:#3CF; color: white;} .inner2{ margin: 30px; padding: 8px; background-color:#96F; color: white; } </style> </head> <body> <div class="outer"> <div class="inner1">margin1</div> <div class="inner2">margin2</div> </div> </body> </html>
效果为：
图1
这里inner1与outer的上边距重叠了，inner1的下边界与inner2的上边界重叠了，inner2的下边距与outer的下边距重叠了
参考这里的解决办法:margin边界重叠问题
只知道如何解决同方向margin重叠问题：
①给外部的div添加清除浮动相同的样式即可。常用的样式代码为：overflow:hidden; zoom:1;
.outer{ margin: 30px; width: 300px; background-color:#669;overflow:hidden; zoom:1}
效果将如下：
图2
②增加些边缘属性。例如padding值，padding:1px;或是border属性，border:1px solid #cacbcc。
.outer{ margin: 30px; width: 300px; background-color:#669;padding:1px;}
效果将如图2。
然后再认真滴看下这篇博客：CSS中margin边界叠加问题及解决方案
没看懂了.....
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
