淺談對CSS盒模型的一些理解

標(biāo)簽中包含一段文字，把div元素看做一個盒子的話，里面的文字就是div盒子的元素內(nèi)容，div默認(rèn)沒有內(nèi)邊距，邊框和外邊距。此時盒子的大小剛好能包含所有的內(nèi)容，內(nèi)容與盒子邊緣沒有空隙。

二、內(nèi)邊距padding

接下來可以利用background屬性為元素設(shè)置一個背景色和背景圖片，使div元素的內(nèi)容更加醒目，如下，我們發(fā)現(xiàn)文字覆蓋在背景圖片上，顯得很混亂

為了把背景圖片和文字從視覺上剝離，可以創(chuàng)建一些看得見的空間，通過設(shè)置padding屬性即可實現(xiàn)。

如下，分別指定上、右、下、左的內(nèi)邊距，由于內(nèi)邊距是透明的，可以呈現(xiàn)背景顏色和背景圖片，從視覺上，美化了文檔。

padd

解析padding屬性

通過CSS，可以分別指定盒模型任意一邊（上、右、下、左）的內(nèi)邊距，如上所示，也可以等價簡寫為

padding:?20px?20px?20px?100px;

其他簡寫形式：（注：和上面的沒有直接關(guān)系）

三、邊框 border

為了在視覺上進(jìn)一步使div元素和其他的頁面隔開，可以通過border設(shè)置邊框，邊框可以有各種不同的寬度、顏色和樣式。先設(shè)置一種看一下效果

border:?1px?solid?black;

解析border屬性：

1）邊框樣式 border-style

border-style屬性可以控制邊框的視覺樣式，有多種樣式可選，如solid、dotted、dashed、double、groove、inset、outset，ridge默認(rèn)值是none，表示無邊框。如下圖所示

2）邊框?qū)挾?border-width

border-width屬性可以控制邊框的寬度，可以使用像素值精確控制，也可以使用關(guān)鍵字thin、medium、thick指定

3)邊框顏色 border-color

border-color屬性設(shè)置邊框的顏色，和設(shè)置背景顏色一樣，屬性值可以是顏色名、十六進(jìn)制碼、rgb函數(shù)值，此處不做詳細(xì)說明

簡寫形式：

可以使用border-top、border-right、border-bottom、border-left分別定義四條邊框的所有屬性（樣式、寬度、顏色）

也可以直接使用border一次性對四條邊框的樣式、寬度、顏色同時進(jìn)行設(shè)置，如下

border:border-width?border-style?border-color;

四、外邊距

如下圖，默認(rèn)情況下，div是緊挨著父元素body擺放的，可以通過margin設(shè)置外邊距，在div元素的周圍設(shè)置額外的空間，控制和其他元素的距離。

設(shè)置

margin-top:?20px;?????/*div邊框上面增加20px的外邊距*/ margin-right:?50px;????/*右邊增加50px外邊距*/ margin-bottom:?20px;???/*下邊增加20px外邊距*/ margin-left:?100px;????/*左邊增加100px外邊距*/

以上樣式分別控制上、右、下、左四個方向的外邊距，外邊距同內(nèi)邊距一樣也是透明的，本身沒有顏色也沒有裝飾，主要作用是控制元素和元素之間的距離。

同padding一樣，margin也有簡寫形式，以上等價于margin:?20px 50px 20px 100px;

當(dāng)然也可以只有三個值，兩個值，一個值，分別代表不同的含義，這里不再贅述

PS:

margin左右屬性值設(shè)置為auto時，可以設(shè)置元素左右居中顯示的效果，

如 margin:20px auto;???/*設(shè)置元素上下外邊距為20px，左右為auto，左右auto相互作用下元素居中顯示*/

最后，總結(jié)一下，以上只是對盒子模型本身的討論，在實際應(yīng)用中，一個HTML頁面中，每個元素都可以看做是一個盒子，如p、h1~h5、ul li，甚至內(nèi)聯(lián)元素在CSS看來都是盒子，都可以根據(jù)盒子模型的屬性來進(jìn)行精準(zhǔn)的控制，實現(xiàn)HTML元素的布局。

補(bǔ)充：width和padding、border、margin之間的關(guān)系是什么？

width定義的只是內(nèi)容本身的寬度，要確定整個盒子的寬度，就需要將內(nèi)容的寬度、左右內(nèi)邊距、左右邊框?qū)挾群妥笥彝膺吘喽技釉谝黄稹?/p>

如上圖，div盒子的寬度=margin-left+border-left+padding-left+width+padding-right+border-right+margin-right

=100+1+100+600+20+1+50=872px

height同理。

注：以上內(nèi)容為個人通過老師講課和查閱資料，結(jié)合個人理解寫的一點對CSS盒子模型的認(rèn)識，有錯誤和不足之處，歡迎大家指正！

軟件開發(fā)

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。