css負外邊距是什麼？ css負外邊距的作用（詳解）

本章帶給大家css負外邊距是什麼？ css負外邊距的作用（詳解），帶大家看看css負外邊距有什麼作用。有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

負邊距介紹

負邊距的使用如下：

#content {margin-left:-100px;}

負邊距通常在小範圍內使用。但是接下來你會看到，它能做的事情很多。以下是一些你應該知道的關於負邊距的事情：

他們是完全有效的CSS
這不是在跟你開玩笑。 W3C甚至都說，在外邊框中使用負邊距是允許的。

負邊距不是在hack
這是尤其正確的。正是因為沒有很好地了解負邊距才是導致各種奇怪的問題。只有在被用來解決其他地方的bug的時候才是hack

它符合正常的文檔流
當負邊距使用在沒有浮動的元素上時並不會破壞正常的文檔流。所以付過你使用負邊距把元素向上微調的話，所有後面的元素也會向上微調。

它是相當好的兼容性
負邊距基本上被所有現代的瀏覽器支援（IE6的大部分情況也是）

當使用了float之後，會有不同的表現
負邊距不是你平常使用的屬性，所以使用的時候要格外小心。

Dreamweaver不理解它
負邊距不會在DW的設計視窗顯示出效果。那你為什麼還要用DW的設計視窗查看效果呢？與其共事呢？

負邊距如果可以正確的使用的話它的功能是很強大的。有兩種場景負邊距是很重要的。

在static元素中使用負邊距：

#一個static元素是沒有使用過float的元素。上面的圖片顯示了一個static的元素使用負邊距之後的情況。

當一個static元素在top/left使用負邊距時，它把元素朝這個特定的方向拉，例如

/* Moves the element 10px upwards */
#mydiv1 {margin-top:-10px;}

但是當你將負邊距設定為相對bottom/ right時，它並不會把元素向下或右拉，相反，它會把後面的元素往裡面拉，從而覆蓋自己。

/*
所有在#mydiv1后面的元素都会向上
移动10px，而#mydiv1一点都不会移动
*/#mydiv1{margin-bottom:-10px;}

如果寬度沒有設置，左右負邊距會把元素往兩個方向拉以增加寬度。這裡margin的作用相當於padding
在浮動中使用負邊距

加入下面就是我們的html程式碼：

<div id="mydiv1">First</div>
<div id="mydiv2">Second</div>

如果對一個浮動的元素使用負邊距，它會產生一個空白，其他元素可以覆蓋這一部分。這個技巧可以很好地用戶流式佈局。例如有一列寬度100%，另一列有固定的寬度，比如說100px。

#mydiv1 {float:left; margin-right:-100px;}

如果兩個元素都使用了左浮動並且設定margin-right:-20px。 #mydiv2會把#mydiv1看成寬度縮小20px（所以會覆蓋一部分），但是有趣的是#mydiv1並不會有任何變化，而是仍然保持原先的寬度。
如果負邊距和寬度一樣大的話，它就會被完全覆蓋掉。因為外邊距，內邊距，邊框和內容加起來等於元素的寬度。如果負外邊距等於元素的寬度的話，那麼該元素的寬度就會變成0px。
學以致用

既然我們知道使用負邊距在CSS2中是有效的，使用它可以給我們提供一些非常有趣的CSS技巧。

把單一清單變成三列

如果你有一個清單垂直方向太長了，為什麼不把它分成幾列呢？負邊距可以讓你在不增加任何浮動和標籤的情況下完成。你會發現用負邊距實現這個是多麼地簡單，就像下面：

HTML：

<ul>
<li class="col1">Eggs</li>
<li class="col1">Ham<li>
<li class="col2 top">Bread<li>
<li class="col2">Butter<li>
<li class="col3 top">Flour<li>
<li class="col3">Cream</li>
</ul>

CSS

ul {list-style:none;}
li {line-height:1.3em;}
.col2 {margin-left:100px;}
.col3 {margin-left:200px;}
.top {margin-top:-2.6em;} /* the clincher */

透過對.top的新增margin-top :-2.6em。所有的元素會完美的對齊好。使用負邊距會比使用相對定位好很多，因為你只需要給新的一列的第一個元素添加負邊距。

重疊來強調

故意重疊元素也是一個很好地設計隱喻。重疊效果可以增強深度感從而為突顯特定元素。一個很好地例子就像上圖一樣，透過重疊來吸引註意力。只需要使用z-index屬性和一點小創意你就可以做到。

驚豔的3D文字效果

#

这是一个精致的技巧。通过使用两个视图的两种颜色创建safari一样有点倾斜的效果。然后通过负边距来把其中一个叠加到另一个上面，保持1到2像素的偏移。这样你就可以二道可选的，机器友好的倾斜字体。就不需要浪费很多贷款来加载大的图片来实现这个效果啦

简单的两列布局

负边距也是在流式布局中创建简单一列宽度固定，一列内容为宽度的100%的两列布局的好方法。

HTML

<div id="content"> <p>Main content in here</p> </div>
<div id="sidebar"> <p>I’m the Sidebar! </p> </div>

CSS

#content {width:100%; float:left; margin-right:-200px;}
#sidebar {width:200px; float:left;}

哈哈，这样你就得到了一个简单的两列布局。它也能在IE6完美的渲染出来。现在为了让#sidebar不要被#content给掩盖，只要简单的加上：

/* Prevent text from being overlapped */
#content p {margin-right:210px;}
/* It’s 200px + 10px, the 10px being an additional margin.*/

当适当的使用的时候，负外边距能够提供一个灵活的文档结构，完爆table的布局。灵活的文档布局是一种可访问性和SEO的技巧，通过它能够让你根据你的关注点以任意顺序组织你的html代码。这里有一个文章讨论了负边距在多列布局中的应用。

微调元素

这是负外边距最常也是最简单的使用方式。假如你把第十个div插入到9个其他的div中，不知道什么原因没有正确的排列，使用负边距来调整这个div就不需要改变其他9个div了，很方便。

解决bug

文本和链接问题

在float中使用负边距可能会在旧的浏览器造成一些问题，比如下面的这些：

让链接不可点击
文本变得很难选择
失去焦点的时候按tab键失效

解决方法：只要添加position:relative，就可以啦。

图片被剪切啦

如果你运气不好刚好在办公室使用IE6，当遇到覆盖和浮动的时候内容有些时候回突然被剪切掉。

解决方法：同样的只要给浮动元素加上position:relative，所有的问题就解决啦。

结论

负外边距能够在不使用任何额外标签的情况下定位元素让它在现在网页设计中占有一席之地。随着更多的用户使用更新的浏览器（包括IE8)，未来使用这些技巧的网站会变得更加有前景。

以上是css負外邊距是什麼？ css負外邊距的作用（詳解）的詳細內容。更多資訊請關注PHP中文網其他相關文章！