当我查看网站时,有时让我感到困惑的一个css方面是用于布局的负边距.我需要一段时间来了解设计师在整个页面中使用负边距尝试做什么.我的意思是一个页面有几个div,有几个使用负边距,我试图让我的头脑试图找出它们.我使用Firebug来更改值并查看效果.
是否有一个很好的教程,一套技巧网站,教网络设计师如何使用负边距为他们的优势.当然是跨浏览器工作的技巧.
试图找出剩下的边距:-100%.
cle*_*tus 11
CSS宽度通常会有点混乱.绝对宽度很容易.相对宽度可能会导致一些有趣的行为.基本上,百分比宽度相对于包含元素.如果父元素具有绝对宽度,那么很容易计算出来.通常情况并非如此,您可以进行复杂的计算,了解浏览器如何计算所需的空间.如果它的所有孩子都是百分比宽度,那么它通常最终会比设计师通常想要的宽度更小.
因此,当您看到时margin-left: -100%,这基本上意味着将此元素移动到其父元素之外,向左移动父元素的整个宽度.负边际(特别是)的一个后果是,他们经常进入的空间不会满足他们在那里的需要,在规划布局时你必须考虑到这一点.
另一个好的建议是,如果你有这种情况:
<div id="outer">
Outer
<div id="inner">Inner</div>
</div>
<style type="text/css">
#outer { width: 100px; }
#inner { width: 50px; margin-left: -100px; }
<style>
它不会真正起作用.或者更确切地说,它可以在(iirc)Firefox上运行,但不适用于IE(任何版本).所以如果你想做这样的事情,你需要使用一个包含元素.
<div id="outer">
Outer
<div id="wrap">
<div id="inner">Inner</div>
</div>
</div>
<style type="text/css">
#outer { width: 100px; }
#wrap { width: 100px; margin-left: -100px; }
#inner { width: 50px; }
<style>
这将是更多浏览器兼容.
这是一个展示负边距的完整示例(在FF,Chrome和IE8上验证):
删除了死的ImageShack链接
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Negative Margins</title>
<style type="text/css">
html, body, div { margin: 0; padding: 0; }
body { background: #A7A37E; }
#outer { width: 800px; background: #E6E2AF; margin: 0 auto; padding: 15px 0; }
#wrap { width: 500px; background: #EFECCA; margin: 0 auto; padding: 10px 0; }
#inner { color: #002F2F; margin: 10px 30px; }
div.left-note, div.right-note { width: 150px; }
div.left-note div, div.right-note div { background: #046380; margin: 10px; color: #EFECCA; padding: 10px; font-weight: bold; }
div.left-note { margin-left: -180px; float: left; }
div.right-note { margin-right: -180px; float: right; }
</style>
</head>
<body>
<div id="outer">
<div id="wrap">
<div id="inner">
<div class="left-note"><div>Some important text to the left</div></div>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<div class="right-note"><div>Some important text to the right</div></div>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
</div>
</body>
</html>
| 归档时间： |
|
| 查看次数： |
4285 次 |
| 最近记录： |