建站
咨詢
售后
建站咨詢
新聞中心
成都創(chuàng)新互聯(lián)-專業(yè)網站定制、快速模板網站建設、高性價比湘陰網站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式湘陰網站制作公司更省心,省錢,快速模板網站建設找我們，業(yè)務覆蓋湘陰地區(qū)。費用合理售后完善，十載實體公司更值得信賴。
網頁中的每個元素都可以看作是如下圖所示一個盒子模型：
圖：盒子模型
內容區(qū)（content）
內容區(qū)是整個盒子模型的中心，其中存放了盒子的主要內容，這些內容可以是文本、圖像等資源。內容區(qū)有 width、height、overflow 三個屬性，其中 width 和 height 屬性用來指定盒子內容區(qū)域的寬度和高度，當內容信息過多，超出內容區(qū)所設置的范圍時，則可以使用 overflow 屬性設置溢出內容的處理方式，overflow 屬性有四個可選值：
- hidden：表示隱藏溢出的部分；
- visible：表示顯示溢出的部分（溢出的部分將顯示在盒子外部）；
- scroll：表示為內容區(qū)添加一個滾動條，您可以通過滑動這個滾動條來查看內容區(qū)的全部內容；
- auto：表示由瀏覽器決定如何處理溢出部分。
下面通過一段代碼演示盒子模型中的內容區(qū)：
盒子模型
運行結果如下圖所示：
圖：內容區(qū)演示
上圖中左側的盒子模型示意圖是通過瀏覽器的調試工具查看的，您可以通過快捷鍵
F12 來打開，或者在頁面中點擊鼠標右鍵，在彈出的菜單中選擇“檢查”選項即可。
內邊距（padding）
內邊距是內容區(qū)和邊框之間的空間，您可以通過 padding-top、padding-right、padding-bottom、padding-left 以及它們的簡寫屬性 padding 來設置內容區(qū)各個方向上與邊框之間的距離。在為盒子模型設置背景屬性時，背景屬性可以覆蓋到內邊距區(qū)域。
示例代碼如下：
盒子模型
運行結果如下圖所示：
圖：內邊距演示
邊框（border）
邊框是環(huán)繞內容區(qū)和內邊距的邊界，您可以使用 border-style、border-width 和 border-color 以及它們的簡寫屬性 border 來設置邊框的樣式。其中 border-style 屬性為邊框中最主要的屬性，如果沒有設置該屬性的話，其它的邊框屬性也會被忽略。
注意：在 IE 瀏覽器中背景屬性不會覆蓋到邊框區(qū)域，但是在其它主流瀏覽器中，背景屬性則可以覆蓋到邊框區(qū)域，當將邊框設置為虛線時就可以透過虛線看到后面的背景。
示例代碼如下：
盒子模型
運行結果如下圖所示：
圖：邊框演示
外邊距（margin）
外邊距位于盒子模型的最外圍，是邊框之外的空間，通過外邊距可以使盒子與盒子之間不會緊湊的連接在一起，是 CSS 布局中的一種重要手段。您可以使用 margin-top、margin-bottom、margin-left、margin-right 以及它們的簡寫屬性 margin 來設置各個方向上外邊距的寬度。
對于兩個相鄰的（水平或垂直方向 ）且都設置有外邊距的盒子，它們之間的距離并不是兩者外邊距相加的和，而是它們之中較大的那個值。另外，您也可以將外邊距的值設置為負值，當外邊距的值為負時整個盒子將向反方向移動，當到達一定程度時盒子之間會產生重疊效果。
示例代碼如下：
盒子模型
運行結果如下圖所示：
圖：邊框演示
元素的寬度和高度
當您使用 CSS 中的 width 和 height 屬性設置元素的寬度和高度時，實際上設置的只是元素內容區(qū)域的寬度和高度，元素的實際寬度和高度還取決于一些其它因素：
- 總寬度：width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
- 總高度：height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom
網頁名稱：CSS盒子模型精講
文章位置：http://fisionsoft.com.cn/article/djieohg.html
