ss中的負(fù)邊距(negative margin)是布局中的一個常用技巧，只要運用得合理常常會有意想不到的效果。

負(fù)邊距他符合正常的文檔流特性，w3c也支持使用負(fù)邊距，因此他有很好的兼容性不是在使用hack。

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

1. 讓鏈接不可點擊

2. 文本變得很難選中

3. 失去焦點的時候按tab鍵失效

只要對節(jié)點添加position:relative屬性就可以解決上述問題。

負(fù)邊距+絕對定位實現(xiàn)水平垂直居中

常用的已知寬高讓內(nèi)容垂直水平居中就是使用絕對定位之后讓內(nèi)容定位到中心點，然后使用負(fù)邊距margin將content的中心拉回到父親節(jié)點的中心重合，這樣就達(dá)到了垂直居中的目的。如下圖所示：

負(fù)邊距實現(xiàn)垂直水平居中

去除掉列表排列中多余的空隙

在項目的開發(fā)過程中，經(jīng)常會有使用浮動列表展示信息的時候，但在設(shè)計的時候為了美觀每個item之間都會設(shè)置一定的間距來達(dá)到信息隔離的目的，并且在設(shè)計的時候一般都是使用分散兩段對齊完成布局，但是在代碼實現(xiàn)過程總能都會讓每個item有一個右邊距（margin-right）。這樣導(dǎo)致最右邊的item就會產(chǎn)生一個多余的右邊距而被擠到下一行去。

當(dāng)代碼是后端渲染后者是循環(huán)出來的時候?qū)ψ钣疫叺膇tem增加class還得不斷的判斷每個item的索引值，并且當(dāng)父親節(jié)點寬度改變時有可能最右一個item還在不斷的變化中，這個時候就需要對父親節(jié)點完成實現(xiàn)負(fù)邊距并且在外層實現(xiàn)超出部分隱藏的功能就可以實現(xiàn)。

負(fù)邊距實現(xiàn)列的多余margin隱藏

負(fù)邊距實現(xiàn)列超出部分的效果

去除列表最后一個li元素的border-bottom

列表中我們經(jīng)常會使用到border-bottom來讓li與li之間的內(nèi)容有一個明顯的區(qū)分，單最后一個li的邊框會與外邊框連在一起或者重合導(dǎo)致外觀上的不好看，一種方法就是使用css3中的最后一個的選擇器來實現(xiàn)，li:last-of-type{border-bottom:0 none;}

負(fù)邊距實現(xiàn)最后一個的border-bottom隱藏

完成左右的自適應(yīng)布局

在響應(yīng)式布局中，經(jīng)常會用到左邊固定右邊自適應(yīng)或者右邊固定左邊自適應(yīng)的兩欄布局或者三欄布 局，在這種情況中如果不考慮兼容可以使用css的calc函數(shù)來實現(xiàn)（100% - 100px）這樣的動態(tài)計算值，但是這玩意連中國手機(jī)端最大的UC瀏覽器都不支持，所以還是不要想使用了。因此需要用到負(fù)邊距來實現(xiàn)頁面布局。

負(fù)邊距實現(xiàn)響應(yīng)式布局

實現(xiàn)多列等高布局

多列等高布局實現(xiàn)起來較為復(fù)雜，如果要內(nèi)容自適應(yīng)撐大達(dá)到等高布局很不好設(shè)計，一般的可以使用js來實現(xiàn)高度的自定義，計算那個高度高就用那個。這兒使用極大的padding-bottom來增加高度，然后用負(fù)邊距拉回來相互抵消達(dá)到高度撐滿整個父親節(jié)點的效果。

負(fù)邊距實現(xiàn)等高布局

還有部分應(yīng)用，例如在實現(xiàn)左右都加入了邊框的分頁上，可以使用margin-left： -1px。直接實現(xiàn)抵消中間兩個item都有邊框而導(dǎo)致的邊框疊加的效果。在實現(xiàn)元素的寬度或者高度增加的時候，如果100%已經(jīng)不能達(dá)到需要的數(shù)字大小時就可以用負(fù)邊距在增加數(shù)值來達(dá)到目的。

景樣式

1.背景屬性縮寫

Background: 背景色 背景圖片 背景平鋪方式 背景定位

例：body {

background-color:# EDEDED;

background-image:url(images/bg.png);

background-repeat:no-repeat;

background-position:50% 30px;

}

縮寫后：

body { background:#EDEDED url(images/bg.png) no-repeat 50% 30px;}

尺寸樣式

1.寬度

width : auto | length

例：

p { width:300px;} div { width:50%;}

2.高度

height : auto | length

例：

img { height:200px;}

div { height:100px;}

邊框樣式

1.邊框線

border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

例：div { width:300px; height:100px; border-style:solid; ｝

border-top-style 設(shè)置上邊框線

border-bottom-style 設(shè)置下邊框線

border-left-style 設(shè)置左邊框線

border-right-style 設(shè)置右邊框線

2.邊框?qū)挾?/p>

border-width : medium | thin | thick | length

例：

div { width:300px; height:100px; border-style:solid; border-width:1px; ｝

border-top-width 設(shè)置上邊框?qū)挾?/p>

border-bottom-width 設(shè)置下邊框?qū)挾?/p>

border-left-width 設(shè)置左邊框?qū)挾?/p>

border-right-width 設(shè)置右邊框?qū)挾?/p>

3.邊框顏色

border-color : color

例：div {

width:300px;

height:100px;

border-style:solid;

border-width:1px;

border-color:#FF0000;

}

border-top-color 設(shè)置上邊框顏色

border-bottom-color 設(shè)置下邊框顏色

border-left-color 設(shè)置左邊框顏色

border-right-color 設(shè)置右邊框顏色

4.邊框樣式縮寫

border : border-width || border-style || border-color

例：div {

width:300px;

height:100px;

border-style:solid;

border-width:1px;

border-color:#FF0000;

}

縮寫后：div {

width:300px;

height:100px;

border:1px solid #FF0000;

}

外邊距

margin : auto | length

例：div { width:300px; height:100px; margin:10px;}

div { width:300px; height:100px; margin:0 auto;}

margin-top 設(shè)置上邊的外邊距

margin-bottom 設(shè)置下邊的外邊距

margin-left設(shè)置左邊的外邊距

margin-right設(shè)置右邊的外邊距

縮寫型式：

margin: 上邊距 右邊距 下邊距 左邊距

margin: 上下邊距左右邊距

margin: 上邊距 左右邊距 下邊距

內(nèi)邊距

padding : length

例：

div { width:300px; height:100px; padding:10px;}

padding-top 設(shè)置上邊的內(nèi)邊距

padding-bottom 設(shè)置下邊的內(nèi)邊距

padding-left設(shè)置左邊的內(nèi)邊距

padding-right設(shè)置右邊的內(nèi)邊距

縮寫型式：

padding: 上邊距 右邊距 下邊距 左邊距

padding : 上下邊距左右邊距

padding : 上邊距 左右邊距 下邊距

列表樣式

1.項目符號

list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha |

katakana | katakana-iroha | lower-latin | upper-latin

例：

ul { list-style-type:disc;}/*實心圓*/

ul { list-style-type:circle;}/*空心圓*/

ul { list-style-type:square;}/*實心方塊*/

ul { list-style-type:none;}/*不顯示項目符號*/

ol { list-style-type:decimal;}/*阿拉伯?dāng)?shù)字*/

ol { list-style-type:lower-roman;}/*小寫羅馬數(shù)字*/

ol { list-style-type:upper-alpha;}/*大寫英文字母*/

2.自定義項目符號

list-style-image : none | url ( url )

例：

ul {list-style-image:url(images/arrow.gif)}

鏈接樣式

1.鏈接沒有被訪問時的樣式

a:link

例： a:link { color:#ff0000; }

2.鏈接被訪問后的樣式

a:visited

例： a:link { color:#0000ff; text-decoration:none; }

3.鼠標(biāo)懸停在鏈接上的樣式

a:hover

例： a:link { background-color:#ccc; }

4.鼠標(biāo)點擊鏈接時的樣式

a:active

例：a:active { background-color:#ff0000;}