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

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

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

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

如：

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

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

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

margin的一些特性

first-child 的 margin-top 值會穿透給上一層

last-child 的 margin-bottom 會無效

同級間的 margin-top bottom 會合并.

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

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

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

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

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

阻止浮動元素?fù)Q行

這個(gè)我挺喜歡，有的時(shí)候因?yàn)楦釉氐膶挾葐栴}，導(dǎo)致不必要的換行?？梢杂胢argin 負(fù)值來搞掂。

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/110906.html

相關(guān)文章

布局中常見的居中問題

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

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

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

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

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

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

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

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

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

taoszu 2019-08-29 14:18 評論0 收藏0