margin:負(fù)值也挺有用

Scliang 發(fā)布于2019-08-28 17:56 / 3051人閱讀

摘要：中一些屬性設(shè)置成負(fù)值可以得到不一樣的效果。如負(fù)值成就了雪碧圖。負(fù)值實(shí)現(xiàn)鏈接文字隱藏當(dāng)然這個(gè)在未來(lái)不推薦使用了哈，有點(diǎn)影響讀屏器首先定義一下?？梢杂秘?fù)值來(lái)搞掂。那么中的屬性就會(huì)給右側(cè)多出一些空隙，這個(gè)時(shí)候弄一個(gè)負(fù)值會(huì)有神奇的效果。

css中一些屬性設(shè)置成負(fù)值可以得到不一樣的效果。

如：

background-position: 負(fù)值成就了 css sprite 雪碧圖。

text-indent: 負(fù)值實(shí)現(xiàn)鏈接文字隱藏, 當(dāng)然這個(gè)在未來(lái)不推薦使用了哈，有點(diǎn)影響讀屏器

首先定義一下margin。
margin定義盒模型的外邊距

margin的一些特性

first-child 的 margin-top 值會(huì)穿透給上一層

last-child 的 margin-bottom 會(huì)無(wú)效

同級(jí)間的 margin-top bottom 會(huì)合并.

當(dāng)然一些IE低端瀏覽器可能會(huì)有不一樣的表現(xiàn) >///< 沒(méi)仔細(xì)測(cè)過(guò)

使用負(fù)margin使icon同文字水平劇中

平常做一個(gè)icon 16x16需要跟文案的行文字水平劇中對(duì)齊，需要用到vertical-align: middle

當(dāng)然這個(gè)時(shí)候要給icon配上display:inline-block，這樣可以給icon設(shè)置寬高。
但是 vertical-align: middle 的時(shí)候icon下方會(huì)有4px的 baseline空隙，這個(gè)時(shí)候看起來(lái)會(huì)對(duì)不齊。具體可以看[vertical-align]的定義。

所以這個(gè)時(shí)候需要使用 margin 負(fù)值來(lái)調(diào)節(jié)上下偏移。

阻止浮動(dòng)元素?fù)Q行

這個(gè)我挺喜歡，有的時(shí)候因?yàn)楦?dòng)元素的寬度問(wèn)題，導(dǎo)致不必要的換行?？梢杂胢argin 負(fù)值來(lái)搞掂。

flaoat:left; margin-right:-10px;

另外在ul>li 的結(jié)構(gòu)中也可以用margin 負(fù)值來(lái)阻止換行，
比如你為了實(shí)現(xiàn)float的li間距，以及ul兩側(cè)的空隙相等，這個(gè)時(shí)候如果外圍dom兩側(cè)本身有padding了。
那么li中的 margin-right 屬性就會(huì)給右側(cè)多出一些空隙，
這個(gè)時(shí)候 ul 弄一個(gè) margin-right:負(fù)值會(huì)有神奇的效果。

云服務(wù)器 GPU云服務(wù)器負(fù)值 margin: margins margin

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

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

相關(guān)文章

布局中常見(jiàn)的居中問(wèn)題

摘要：說(shuō)到布局除了浮動(dòng)以及定位外還有一個(gè)不得不提的點(diǎn)，那就是居中，居中問(wèn)題我們?cè)诰W(wǎng)頁(yè)布局當(dāng)中經(jīng)常遇到，那么以下就是分為兩部分來(lái)講，一部分是傳統(tǒng)的居中，另一種則是居中，每個(gè)部分又通過(guò)分為水平垂直居中來(lái)講。參考參考學(xué)習(xí)布局視覺(jué)格式化模型居中詳解說(shuō)到布局除了浮動(dòng)以及定位外還有一個(gè)不得不提的點(diǎn)，那就是居中，居中問(wèn)題我們?cè)诰W(wǎng)頁(yè)布局當(dāng)中經(jīng)常遇到，那么以下就是分為兩部分來(lái)講，一部分是傳統(tǒng)的居中，另一種則是fle...

1fe1se 2019-04-23 13:34 評(píng)論0 收藏0
不定元素寬高用css實(shí)現(xiàn)內(nèi)容水平和垂直都居中

摘要：在開(kāi)發(fā)中經(jīng)常遇到這個(gè)問(wèn)題，即讓某個(gè)元素的內(nèi)容在水平和垂直方向上都居中，內(nèi)容不僅限于文字，可能是圖片或其他元素。這篇文章就來(lái)總結(jié)一下都有哪些方法可以實(shí)現(xiàn)水平和垂直都居中。表示這些元素將相對(duì)于本容器水平居中，也是同樣的道理垂直居中。在開(kāi)發(fā)中經(jīng)常遇到這個(gè)問(wèn)題，即讓某個(gè)元素的內(nèi)容在水平和垂直方向上都居中，內(nèi)容不僅限于文字，可能是圖片或其他元素。而且我們希望不要涉及寬度和高度，也就是說(shuō)，我們不...

Chao 2019-08-30 15:52 評(píng)論0 收藏0
實(shí)用的margin負(fù)值

摘要：下和右方的負(fù)值使該元素下方右方的元素被拉向該元素。這里引用懌飛博客由淺入深漫談屬性中參考線的概念。負(fù)值在實(shí)際當(dāng)中的應(yīng)用負(fù)值雖然不是常常被提起，但是在實(shí)際當(dāng)中已經(jīng)有相當(dāng)廣泛的應(yīng)用。無(wú)論是在介紹前端知識(shí)的書(shū)籍還是談?wù)摵心Ｐ偷奈恼?，margin 都是最重要的屬性之一，然而它的負(fù)值用法卻極少被提到。其實(shí) margin 負(fù)值是一個(gè)相當(dāng)實(shí)用的屬性，可以被應(yīng)用于日常前端開(kāi)發(fā)當(dāng)中的不少場(chǎng)景。 mar...

yanwei 2019-08-28 18:02 評(píng)論0 收藏0
三欄布局的n種實(shí)現(xiàn)

摘要：本文主要討論左右邊欄固定寬度，中間欄填滿其余空間的布局。每一種布局都會(huì)有個(gè)，個(gè)人依然認(rèn)為文章里帖代碼并沒(méi)有來(lái)的直接。其中討論了這么多種種布局，有以下理由是每種布局也都有他的毛病，沒(méi)有十全十美的，每種布局也都有人在用。本文主要討論左右邊欄固定寬度，中間欄填滿其余空間的布局。至于其他類型，基本上也就是半斤和八兩。每一種布局都會(huì)有個(gè)Demo，個(gè)人依然認(rèn)為文章里帖代碼并沒(méi)有Demo來(lái)的直接。...

aisuhua 2019-08-29 10:54 評(píng)論0 收藏0
css垂直水平居中解決方案

摘要：寫在前面垂直水平居中即垂直與水平方向上都要居中，也就是視覺(jué)效果中的，處于視圖的正中間。我們把需要垂直水平居中的設(shè)置為。使用使塊級(jí)元素垂直居中是很簡(jiǎn)單的。寫在前面：垂直水平居中即垂直與水平方向上都要居中，也就是視覺(jué)效果中的，處于視圖的正中間。下面，我們來(lái)講講幾個(gè)css中常用的垂直水平居中的解決方案方法1: 1、把外層的div的顯示方式設(shè)置為table，即display: table...

taoszu 2019-08-29 14:18 評(píng)論0 收藏0