第12天 - 16天搞定前端，CSS的邊距，內(nèi)外有別？

多程序員朋友，在用CSS進(jìn)行邊距調(diào)整時(shí)，老分不清楚外邊距margin和內(nèi)邊距padding的區(qū)別，在我部門，就有兩個(gè)迷糊蟲。于是我上網(wǎng)找了一幅圖，一副不可描述的圖(你可不要想歪了)，他們一看就完全明白了，現(xiàn)在分享給你。

12.1 內(nèi)外抉擇

在什么場(chǎng)景中使用padding，在什么場(chǎng)景中使用margin，這是一個(gè)學(xué)問(wèn)。你掌握了，學(xué)問(wèn)就有了。

這是用padding的學(xué)問(wèn)

（1）需要在border內(nèi)側(cè)添加空白，在文字與邊框留有距離時(shí)；

（2）空白處需要背景色時(shí)；

（3）上下相連的兩個(gè)盒子之間的空白希望等于兩者之和時(shí)，比如15px+20px的padding，將得到35px的空白。

這是用margin的學(xué)問(wèn)

（1）需要在border外側(cè)添加空白時(shí);

（2）空白處不需要有背景色時(shí);

(3）上下相連的兩個(gè)盒子之間的空白需要相互抵消時(shí)，比如15px+20px的margin，將得到20px的空白。

12.2 內(nèi)外有別

在CSS中，通過(guò)外邊距margin屬性，可設(shè)置元素周圍的空間。可用margin統(tǒng)一指定4邊，也可用margin-top等屬性，特指其中一邊。這種方案，在CSS中是很常見(jiàn)的。padding和margin的作用不同，但用法是一樣的。為了區(qū)分效果，我只在一個(gè)div中用了padding，通過(guò)比較，一目了然。

在CSS表文件ys2.css中的代碼

/*單獨(dú)指定一個(gè)邊距*/
.one-margin {
    margin-left: 100px;
}

/*4個(gè)邊距*/
.four-margin {
    background: cadetblue;
    width: 400px;
    height: 200px;
    margin: 10px 20px 30px 50px;
}

/*加上padding*/
.use-padding {
    background: cadetblue;
    width: 400px;
    height: 200px;
    margin: 10px 20px 30px 50px;
    padding-top: 20px;
}

在HTML文件中的代碼

<div class="big-div">
    <h1 class="one-margin">margin用法</h1>
    <div class="four-margin">
        margin一個(gè)值：4個(gè)邊距;<br/>
        margin兩個(gè)值：上下邊距、左右邊距;<br/>
        margin三個(gè)值：上邊距、左右邊距、下邊距;<br/>
        margin四個(gè)值：上邊距、右邊距、下邊距、左邊距。
    </div>
    <div class="use-padding">
        padding一個(gè)值：4個(gè)邊距;<br/>
        padding兩個(gè)值：上下邊距、左右邊距;<br/>
        padding三個(gè)值：上邊距、左右邊距、下邊距;<br/>
        padding四個(gè)值：上邊距、右邊距、下邊距、左邊距。<br/>
        為了區(qū)分margin和margin，我只用 padding-top,你能看出效果么?
    </div>
</div>

輸出結(jié)果

好了，有關(guān)CSS邊距的內(nèi)容，老陳講完了，如果覺(jué)得對(duì)你有所幫助，希望老鐵能轉(zhuǎn)發(fā)點(diǎn)贊，讓更多的人看到這篇文章。你的轉(zhuǎn)發(fā)和點(diǎn)贊，就是對(duì)老陳繼續(xù)創(chuàng)作和分享最大的鼓勵(lì)。

一個(gè)當(dāng)了10年技術(shù)總監(jiān)的老家伙，分享多年的編程經(jīng)驗(yàn)。想學(xué)編程的朋友，可關(guān)注：老陳說(shuō)編程。分享Python，前端(小程序)、App和嵌入式方面的干貨。關(guān)注我，沒(méi)錯(cuò)的。

#前端##HTML5##CSS##程序員##Web#

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

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

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

讓鏈接不可點(diǎn)擊
文本變得很難選中
失去焦點(diǎn)的時(shí)候按tab鍵失效

只要對(duì)節(jié)點(diǎn)添加position:relative屬性就可以解決上述問(wèn)題。

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

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

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

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

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

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

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

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

去除列表最后一個(gè)li元素的border-bottom

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

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

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

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

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

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

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

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

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

例：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.項(xiàng)目符號(hào)

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

例：

ul { list-style-type:disc;}/*實(shí)心圓*/

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

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

ul { list-style-type:none;}/*不顯示項(xiàng)目符號(hào)*/

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

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

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

2.自定義項(xiàng)目符號(hào)

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

例：

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

鏈接樣式

1.鏈接沒(méi)有被訪問(wèn)時(shí)的樣式

a:link

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

2.鏈接被訪問(wèn)后的樣式

a:visited

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

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

a:hover

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

4.鼠標(biāo)點(diǎn)擊鏈接時(shí)的樣式

a:active

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

在線咨詢

上一篇：CSS自動(dòng)換行、強(qiáng)制不換行、強(qiáng)制斷行、超出顯示省略號(hào)
下一篇：6.HTML 標(biāo)題、段落和文本格式

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

第12天 - 16天搞定前端，CSS的邊距，內(nèi)外有別？

12.1 內(nèi)外抉擇

12.2 內(nèi)外有別

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

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

去除列表最后一個(gè)li元素的border-bottom

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

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

您的項(xiàng)目需求