教育行業(yè)A股IPO第一股（股票代碼 003032）

全國咨詢/投訴熱線：400-618-4000

css盒子是什么，在網頁中起到什么作用？

更新時間:2020年11月11日15時58分 來源:傳智播客 瀏覽次數:

　　在瀏覽網站時，我們會發(fā)現頁面的內容都是按照區(qū)域劃分的。在頁面中，每一塊區(qū)域分別承載不同的內容，使得網頁的內容雖然零散，但是在版式排列上依然清晰有條理。例如圖1所示的設計類網站。

　　圖1 設計類網站

　　在圖1所示的網站頁面中，這些承載內容的區(qū)域被稱為盒子模型。盒子模型就是把HTML頁面中的元素看作是一個方形的盒子，也就是一個盛裝內容的容器。每個方形都由元素的內容、內邊距(padding)、邊框(border)和外邊距(margin)組成。

　　為了更形象地認識CSS盒子模型，首先我們從生活中常見的手機盒子的構成說起。一個完整的手機盒子通常包含手機、填充泡沫和盛裝手機的紙盒。如果把手機想象成HTML元素，那么手機盒子就是一個CSS盒子模型，其中手機為CSS盒子模型的內容，填充泡沫的厚度為CSS盒子模型的內邊距，紙盒的厚度為CSS盒子模型的邊框，如圖2所示。當多個手機盒子放在一起時，它們之間的距離就是CSS盒子模型的外邊距。

　　圖2 手機盒子的構成

　　網頁中所有的元素和對象都是由圖2所示的基本結構組成，并呈現出矩形的盒子效果。在瀏覽器看來，網頁就是多個盒子嵌套排列的結果。其中，內邊距出現在內容區(qū)域的周圍，當給元素添加背景色或背景圖像時，該元素的背景色或背景圖像也將出現在內邊距中，外邊距是該元素與相鄰元素之間的距離，如果給元素定義邊框屬性，邊框將出現在內邊距和外邊距之間。

　　需要注意的是，雖然盒子模型擁有內邊距、邊框、外邊距、寬和高這些基本屬性，但是并不要求每個元素都必須定義這些屬性。



猜你喜歡：

如何使用選擇器獲取元素？常用的jQuery選擇器列舉

網頁制作中初學者該如何使用DW？

BFC是什么？10 分鐘講透BFC 原理

zookeeper命名服務詳細介紹

0 分享到：
和我們在線交談！