這篇文章主要介紹“css負(fù)外邊距怎么實現(xiàn)”，在日常操作中，相信很多人在css負(fù)外邊距怎么實現(xiàn)問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”css負(fù)外邊距怎么實現(xiàn)”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供西山網(wǎng)站建設(shè)、西山做網(wǎng)站、西山網(wǎng)站設(shè)計、西山網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、西山企業(yè)網(wǎng)站模板建站服務(wù)，十年西山做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

    負(fù)邊距介紹

    負(fù)邊距的使用如下：

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

    負(fù)邊距通常在小范圍使用。但是接下來你會看到，它能做的事情很多。下面是一些你應(yīng)該知道的關(guān)于負(fù)邊距的事情：

    他們是完全有效的CSS

    這不是在跟你開玩笑。W3C甚至都說，在外邊框中使用負(fù)邊距是允許的。

    負(fù)邊距不是在hack

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

    它符合正常的文檔流

    當(dāng)負(fù)邊距使用在沒有浮動的元素上時并不會破壞正常的文檔流。所以付過你使用負(fù)邊距把元素向上微調(diào)的話，所有后面的元素也會向上微調(diào)。

    它是相當(dāng)好的兼容性

    負(fù)邊距基本上被所有現(xiàn)代的瀏覽器支持（IE6的大部分情況也是）

    當(dāng)使用了float之后，會有不同的表現(xiàn)

    負(fù)邊距不是你平常使用的屬性，所以使用的時候要格外小心。

    Dreamweaver不理解它

    負(fù)邊距不會在DW的設(shè)計窗口展示出效果。那你為什么還用DW的設(shè)計窗口查看效果呢？與其共事呢？

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

    在static元素中使用負(fù)邊距：

    1.gif

    一個static元素是一個沒有使用過float的元素。上面的圖片展示了一個static的元素使用負(fù)邊距之后的情況。

    當(dāng)一個static元素在top/left使用負(fù)邊距時，它把元素向這個特定的方向拉，比如

    /*Movestheelement10pxupwards*/

    #mydiv1{margin-top:-10px;}

    但是當(dāng)你將負(fù)邊距設(shè)置為相對bottom/right時，它并不會把元素向下或右拉，相反，它會把后面的元素往里面拉，從而覆蓋自己。

    /*

    所有在#mydiv1后面的元素都會向上

    移動10px，而#mydiv1一點都不會移動

    */#mydiv1{margin-bottom:-10px;}

    如果寬度沒有設(shè)置，左右負(fù)邊距會把元素向兩個方向拉以增加寬度。在這里margin的作用相當(dāng)于padding

    在浮動中使用負(fù)邊距

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

    First