這篇文章主要介紹css盒子模型的工作原理，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供元寶網(wǎng)站建設(shè)、元寶做網(wǎng)站、元寶網(wǎng)站設(shè)計(jì)、元寶網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、元寶企業(yè)網(wǎng)站模板建站服務(wù)，10多年元寶做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

網(wǎng)頁(yè)設(shè)計(jì)中常聽的屬性名：內(nèi)容(content)、內(nèi)邊距(padding)、邊框(border)、外邊距(margin)， CSS盒子模式都具備這些屬性。

這些屬性我們可以用日常生活中的常見事物——盒子作一個(gè)比喻來(lái)理解，所以叫它盒子模式。

CSS盒子模型就是在網(wǎng)頁(yè)設(shè)計(jì)中經(jīng)常用到的CSS技術(shù)所使用的一種思維模型。

原理

先說(shuō)說(shuō)我們?cè)诰W(wǎng)頁(yè)：內(nèi)容(content)、內(nèi)邊距(padding)、邊框(border)、外邊距(margin)， CSS盒子模式都具備這些屬性。

這些屬性我們可以把它轉(zhuǎn)移到我們?nèi)粘Ｉ钪械暮凶樱ㄏ渥樱┥蟻?lái)理解，日常生活中所見的盒子也就是能裝東西的一種箱子，也具有這些屬性，所以叫它盒子模式。

特點(diǎn)

想象一個(gè)盒子，它有：外邊距（margin）、邊框（border）、內(nèi)邊距（padding）、內(nèi)容（content）四個(gè)屬性；

讓我們俯視這個(gè)盒子，它有上下左右四條邊，所以每個(gè)屬性除了內(nèi)容（content），都包括四個(gè)部分：上下左右；這四部分可同時(shí)設(shè)置，也可分別設(shè)置；內(nèi)邊距可以理解為盒子里裝的東西和邊框的距離，而邊框有厚薄和顏色之分，內(nèi)容就是盒子中間裝的東西，外邊距就是邊框外面自動(dòng)留出的一段空白。

結(jié)構(gòu)

內(nèi)容（CONTENT）就是盒子里裝的東西；

而填充(PADDING)就是怕盒子里裝的東西（貴重的）損壞而添加的泡沫或者其它抗震的輔料；

邊框(BORDER)就是盒子本身了；至于邊界(MARGIN)則說(shuō)明盒子擺放的時(shí)候的不能全部堆在一起，要留一定空隙保持通風(fēng)，同時(shí)也為了方便取出。在網(wǎng)頁(yè)設(shè)計(jì)上，內(nèi)容常指文字、圖片等元素，但是也可以是小盒子（DIV嵌套），與現(xiàn)實(shí)生活中盒子不同的是，現(xiàn)實(shí)生活中的東西一般不能大于盒子，否則盒子會(huì)被撐壞的，而CSS盒子具有彈性，里面的東西大過(guò)盒子本身最多把它撐大，但它不會(huì)損壞的。

填充只有寬度屬性，每個(gè)HTML標(biāo)記都可看作一個(gè)盒子；

以上是“css盒子模型的工作原理”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道！

當(dāng)前標(biāo)題：css盒子模型的工作原理-創(chuàng)新互聯(lián)
轉(zhuǎn)載源于：http://jinyejixie.com/article48/deohep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、網(wǎng)頁(yè)設(shè)計(jì)公司、電子商務(wù)、用戶體驗(yàn)、移動(dòng)網(wǎng)站建設(shè)、虛擬主機(jī)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)