当我查看网站时,有时让我感到困惑的一个css方面是用于布局的负边距.我需要一段时间来了解设计师在整个页面中使用负边距尝试做什么.我的意思是一个页面有几个div,有几个使用负边距,我试图让我的头脑试图找出它们.我使用Firebug来更改值并查看效果.
是否有一个很好的教程,一套技巧网站,教网络设计师如何使用负边距为他们的优势.当然是跨浏览器工作的技巧.
试图找出剩下的边距:-100%.
CSS宽度通常会有点混乱.绝对宽度很容易.相对宽度可能会导致一些有趣的行为.基本上,百分比宽度相对于包含元素.如果父元素具有绝对宽度,那么很容易计算出来.通常情况并非如此,您可以进行复杂的计算,了解浏览器如何计算所需的空间.如果它的所有孩子都是百分比宽度,那么它通常最终会比设计师通常想要的宽度更小.
因此,当您看到时margin-left: -100%,这基本上意味着将此元素移动到其父元素之外,向左移动父元素的整个宽度.负边际(特别是)的一个后果是,他们经常进入的空间不会满足他们在那里的需要,在规划布局时你必须考虑到这一点.
另一个好的建议是,如果你有这种情况:
OuterInnerSome important text to the leftLorem 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.
Some important text to the rightDuis 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.