css負(fù)外邊距怎么實(shí)現(xiàn)

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

    負(fù)邊距介紹

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

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

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

    他們是完全有效的CSS

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

    負(fù)邊距不是在hack

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

    它符合正常的文檔流

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

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

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

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

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

    Dreamweaver不理解它

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

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

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

    1.gif

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

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

    /*Movestheelement10pxupwards*/

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

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

    /*

    所有在#mydiv1后面的元素都會(huì)向上

    移動(dòng)10px，而#mydiv1一點(diǎn)都不會(huì)移動(dòng)

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

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

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

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

    <divid="mydiv1">First</div>

    <divid="mydiv2">Second</div>

    如果對一個(gè)浮動(dòng)的元素使用負(fù)邊距，它會(huì)產(chǎn)生一個(gè)空白，其他元素就可以覆蓋這一部分。這個(gè)技巧可以很好地用戶流式布局。比如有一列寬度100%，另一列有固定的寬度，比如說100px。

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

    如果兩個(gè)元素都使用了左浮動(dòng)并且設(shè)置margin-right:-20px。#mydiv2會(huì)把#mydiv1看成寬度縮小20px（所以會(huì)覆蓋一部分），但是有趣的是#mydiv1并不會(huì)有任何變化，而是依然保持原先的寬度。

    如果負(fù)邊距和寬度一樣大的話，它就會(huì)被完全覆蓋掉。因?yàn)橥膺吘啵瑑?nèi)邊距，邊框和內(nèi)容加起來等于元素的寬度。如果負(fù)外邊距等于元素的寬度的話，那么該元素的寬度就會(huì)變成0px。

    學(xué)以致用

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

    把單個(gè)列表變成三列

    如果你有一個(gè)列表垂直方向太長了，為什么不把它分成幾列呢？負(fù)邊距可以讓你在不增加任何浮動(dòng)和標(biāo)簽的情況下完成。你會(huì)發(fā)現(xiàn)用負(fù)邊距實(shí)現(xiàn)這個(gè)是多么地簡單，就像下面：

    HTML：

    <ul>

    <liclass="col1">Eggs</li>

    <liclass="col1">Ham<li>

    <liclass="col2top">Bread<li>

    <liclass="col2">Butter<li>

    <liclass="col3top">Flour<li>

    <liclass="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;}/*theclincher*/

    通過對.top的添加margin-top:-2.6em。所有的元素會(huì)完美的對齊好。使用負(fù)邊距會(huì)比使用相對定位好很多，因?yàn)槟阒恍枰o新的一列的第一個(gè)元素添加負(fù)邊距即可。

到此，關(guān)于“css負(fù)外邊距怎么實(shí)現(xiàn)”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！