margin:負值也挺有用

Scliang 發布于2019-08-28 17:56 / 3045人閱讀

摘要：中一些屬性設置成負值可以得到不一樣的效果。如負值成就了雪碧圖。負值實現鏈接文字隱藏當然這個在未來不推薦使用了哈，有點影響讀屏器首先定義一下。可以用負值來搞掂。那么中的屬性就會給右側多出一些空隙，這個時候弄一個負值會有神奇的效果。

css中一些屬性設置成負值可以得到不一樣的效果。

如：

background-position: 負值成就了 css sprite 雪碧圖。

text-indent: 負值實現鏈接文字隱藏, 當然這個在未來不推薦使用了哈，有點影響讀屏器

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

margin的一些特性

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

last-child 的 margin-bottom 會無效

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

當然一些IE低端瀏覽器可能會有不一樣的表現 >///< 沒仔細測過

使用負margin使icon同文字水平劇中

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

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

所以這個時候需要使用 margin 負值來調節上下偏移。

阻止浮動元素換行

這個我挺喜歡，有的時候因為浮動元素的寬度問題，導致不必要的換行。可以用margin 負值來搞掂。

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

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

GPU云服務器云服務器負值 margin: margins margin

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/110906.html

布局中常見的居中問題

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

1fe1se 2019-04-23 13:34 評論0 收藏0
不定元素寬高用css實現內容水平和垂直都居中

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

Chao 2019-08-30 15:52 評論0 收藏0
實用的margin負值

摘要：下和右方的負值使該元素下方右方的元素被拉向該元素。這里引用懌飛博客由淺入深漫談屬性中參考線的概念。負值在實際當中的應用負值雖然不是常常被提起，但是在實際當中已經有相當廣泛的應用。無論是在介紹前端知識的書籍還是談論盒模型的文章，margin 都是最重要的屬性之一，然而它的負值用法卻極少被提到。其實 margin 負值是一個相當實用的屬性，可以被應用于日常前端開發當中的不少場景。 mar...

yanwei 2019-08-28 18:02 評論0 收藏0
三欄布局的n種實現

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

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

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

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