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