成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

[譯] 負(fù)邊距詳解

Richard_Gao / 3071人閱讀

摘要：正是因?yàn)闆]有很好地了解負(fù)邊距才是導(dǎo)致各種奇怪的問題。不理解它負(fù)邊距不會在的設(shè)計(jì)窗口展示出效果。有兩種場景負(fù)邊距是很重要的。微調(diào)元素這是負(fù)外邊距最常也是最簡單的使用方式。

原文 The Definitive Guide to Using Negative Margins

自從1998年CSS2作為推薦以來，表格的使用漸漸退去，成為歷史。正因?yàn)榇耍瑥哪且院驝SS布局成為了優(yōu)雅代碼的代名詞。

對于所有設(shè)計(jì)師使用過的CSS概念，負(fù)邊距作為最少討論到的定位方式要記上一功。這就像是在線紋身-每個(gè)人都會做，但是沒有人會談?wù)撍?。（It’s like an online taboo—everyone’s doing it, yet no one wants to talk about it.）

為其正名

我們都使用過CSS得外邊距，但是當(dāng)談到負(fù)邊距的時(shí)候，我們好像往差的方向發(fā)展啦。在網(wǎng)頁設(shè)計(jì)中負(fù)邊距的使用出現(xiàn)了兩種極端，一種特別喜歡它，也有一些人認(rèn)為這完全就是魔鬼的作品。

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

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

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

他們是完全有效的CSS
這不是在跟你開玩笑。W3C甚至都說，在外邊框中使用負(fù)邊距是允許的。要了解更多可以點(diǎn)擊這篇文章

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

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

它是相當(dāng)好的兼容性
負(fù)邊距基本上被所有現(xiàn)代的瀏覽器支持（IE6的大部分情況也是）

當(dāng)使用了float之后，會有不同的表現(xiàn)
負(fù)邊距不是你平常使用的屬性，所以使用的時(shí)候要格外小心。

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

與其共事

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

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

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

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

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

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

    /*
     所有在#mydiv1后面的元素都會向上
     移動(dòng)10px，而#mydiv1一點(diǎn)都不會移動(dòng)
    */
    #mydiv1{margin-bottom:-10px;}

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

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

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

First


Second

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

    /* 
    A negative margin is applied opposite the float 
    */
    #mydiv1 {float:left; margin-right:-100px;}

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

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

學(xué)以致用

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

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

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

HTML

     
    
  • Eggs
    • 
    
  • Ham
  •  
    
  • Bread
  •  
    
  • Butter
  •  
    
  • Flour
  •  
    
  • Cream
    •

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。所有的元素會完美的對齊好。使用負(fù)邊距會比使用相對定位好很多，因?yàn)槟阒恍枰o新的一列的第一個(gè)元素添加負(fù)邊距即可?？岚?，哈哈哈

重疊來強(qiáng)調(diào)

故意重疊元素也是一種很好地設(shè)計(jì)隱喻。重疊效果可以增強(qiáng)深度感從而為突出特定元素。一個(gè)很好地例子就像上圖一樣，通過重疊來吸引注意力。只需要使用z-index屬性和一點(diǎn)小創(chuàng)意你就可以做到。

驚艷的3D文本效果

這是一個(gè)精致的技巧。通過使用兩個(gè)視圖的兩種顏色創(chuàng)建safari一樣有點(diǎn)傾斜的效果。然后通過負(fù)邊距來把其中一個(gè)疊加到另一個(gè)上面，保持1到2像素的偏移。這樣你就可以二道可選的，機(jī)器友好的傾斜字體。就不需要浪費(fèi)很多貸款來加載大的圖片來實(shí)現(xiàn)這個(gè)效果啦

簡單的兩列布局

負(fù)邊距也是在流式布局中創(chuàng)建簡單一列寬度固定，一列內(nèi)容為寬度的100%的兩列布局的好方法。

HTML

 
Main content in here

CSS

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

哈哈，這樣你就得到了一個(gè)簡單的兩列布局。它也能在IE6完美的渲染出來?，F(xiàn)在為了讓#sidebar不要被#content給掩蓋，只要簡單的加上：

/* Prevent text from being overlapped */

#content p {margin-right:210px;}

/* It’s 200px + 10px, the 10px being an additional margin.*/

當(dāng)適當(dāng)?shù)氖褂玫臅r(shí)候，負(fù)外邊距能夠提供一個(gè)靈活的文檔結(jié)構(gòu)，完爆table的布局。靈活的文檔布局是一種可訪問性和SEO的技巧，通過它能夠讓你根據(jù)你的關(guān)注點(diǎn)以任意順序組織你的html代碼。這里有一個(gè)文章討論了負(fù)邊距在多列布局中的應(yīng)用。

微調(diào)元素

這是負(fù)外邊距最常也是最簡單的使用方式。假如你把第十個(gè)div插入到9個(gè)其他的div中，不知道什么原因沒有正確的排列，使用負(fù)邊距來調(diào)整這個(gè)div就不需要改變其他9個(gè)div了，很方便。

解決bug 文本和鏈接問題

在float中使用負(fù)邊距可能會在舊的瀏覽器造成一些問題，比如下面的這些：

讓鏈接不可點(diǎn)擊

文本變得很難選擇

失去焦點(diǎn)的時(shí)候按tab鍵失效

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

圖片被剪切啦

如果你運(yùn)氣不好剛好在辦公室使用IE6，當(dāng)遇到覆蓋和浮動(dòng)的時(shí)候內(nèi)容有些時(shí)候回突然被剪切掉。

解決方法：同樣的只要給浮動(dòng)元素加上position:relative，所有的問題就解決啦。

結(jié)論

負(fù)外邊距能夠在不使用任何額外標(biāo)簽的情況下定位元素讓它在現(xiàn)在網(wǎng)頁設(shè)計(jì)中占有一席之地。隨著更多的用戶使用更新的瀏覽器（包括IE8)，未來使用這些技巧的網(wǎng)站會變得更加有前景。

資源鏈接

更多關(guān)于負(fù)邊距的信息可以在看下面的鏈接：

Search This

Severn Solutions

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/49640.html

相關(guān)文章

  • [譯] 負(fù)邊距詳解

    摘要：正是因?yàn)闆]有很好地了解負(fù)邊距才是導(dǎo)致各種奇怪的問題。不理解它負(fù)邊距不會在的設(shè)計(jì)窗口展示出效果。有兩種場景負(fù)邊距是很重要的。微調(diào)元素這是負(fù)外邊距最常也是最簡單的使用方式。 原文 The Definitive Guide to Using Negative Margins 自從1998年CSS2作為推薦以來，表格的使用漸漸退去，成為歷史。正因?yàn)榇?，從那以后CSS布局成為了優(yōu)雅代碼的代名詞。...

    Vixb 評論0 收藏0

  • 那些年，奇妙的圣杯與雙飛翼，還有負(fù)邊距

    摘要：奇妙的圣杯與雙飛翼相信很多人和我在學(xué)習(xí)前端差不多的時(shí)候就聽說過了圣杯布局與雙飛翼布局。他往前移動(dòng)之后，文檔流也會跟著移動(dòng)元素寬度負(fù)邊距負(fù)邊距可以增加元素的寬度，對于沒有的元素，負(fù)邊距可以加寬他們。 [TOC] 沒錯(cuò)，題目就是模仿《那些年，我們一起清除過的浮動(dòng)》而來的。 奇妙的圣杯與雙飛翼 相信很多人和我在學(xué)習(xí)前端差不多的時(shí)候就聽說過了圣杯布局與雙飛翼布局。關(guān)于取名無非是覺得長得像圣杯，...

    tianhang 評論0 收藏0

  • 負(fù)margin的幾個(gè)問題

    摘要：可是這個(gè)籬笆的寬度偏偏可以是個(gè)負(fù)值。圖當(dāng)我們?nèi)サ舻拇a中的后，竟然超出了的范圍也就是說它把負(fù)的絕對值，加到了自身的內(nèi)容中，這無疑增大了元素本身的寬度?？偨Y(jié)如果元素沒有設(shè)置負(fù)邊距方向上的長度或?qū)挾?，?fù)邊距會使負(fù)邊距方向上的長度或?qū)挾仍黾印? ??????此文持續(xù)更新，發(fā)現(xiàn)有趣的東西??????負(fù)邊距是一個(gè)比較奇葩的東西，為什么說它奇葩呢？padding在border的里面；margin在b...

    ddongjian0000 評論0 收藏0

  • CSS 布局經(jīng)典問題初步整理

    摘要：布局經(jīng)典問題初步整理標(biāo)簽前端本文主要對布局中常見的經(jīng)典問題進(jìn)行簡單說明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù)，清除浮動(dòng)，居中布局，響應(yīng)式設(shè)計(jì)，布局，等等。 CSS 布局經(jīng)典問題初步整理 標(biāo)簽 ： 前端 [TOC] 本文主要對 CSS 布局中常見的經(jīng)典問題進(jìn)行簡單說明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù) margin，清除浮動(dòng)，居中布局，響應(yīng)式設(shè)計(jì)，F(xiàn)l...

    Amos 評論0 收藏0

  • CSS中的負(fù)邊距

    摘要：之后仔細(xì)的百度了一下，發(fā)現(xiàn)了這么一個(gè)叫做內(nèi)外補(bǔ)丁負(fù)值法的東西。在這個(gè)解決方案中，又涉及到了傳說中的負(fù)。深入研究之后又發(fā)現(xiàn)了圣杯布局雙飛翼布局等很多示例，確實(shí)要好好研究負(fù)邊距這個(gè)東西了。相關(guān)推薦那些年，奇妙的圣杯與雙飛翼，還有負(fù)邊距 2015-04-22 時(shí)候?qū)懙睦衔?，因?yàn)橄Ｍ盟阅昧顺鰜怼?那天被一個(gè)同學(xué)問了一個(gè)問題，三列的div，要求父div的高度和三個(gè)div的高度都和三個(gè)中字?jǐn)?shù)...

    cocopeak 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<