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