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

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

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

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

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

原理

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

這些屬性我們可以把它轉(zhuǎn)移到我們?nèi)粘Ｉ钪械暮凶樱ㄏ渥樱┥蟻砝斫猓粘Ｉ钪兴姷暮凶右簿褪悄苎b東西的一種箱子，也具有這些屬性，所以叫它盒子模式。

特點

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

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

結(jié)構(gòu)

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

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

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

填充只有寬度屬性，每個HTML標記都可看作一個盒子；

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

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

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

廣告

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