首頁(yè)技術(shù)文章正文

CSS3中怎樣將box-sizing設(shè)為content-box？

更新時(shí)間:2021年06月09日16時(shí)13分來(lái)源:傳智教育瀏覽次數(shù):

在CSS3中，通過(guò)box-sizing屬性可以更改盒子尺寸的計(jì)算方式。將box-sizing設(shè)為content-box（默認(rèn)值）時(shí)，表示使用傳統(tǒng)的計(jì)算方式；設(shè)為border-box時(shí)，表示使用CSS 3的一種新的計(jì)算方式，通過(guò)這種方式可以解決傳統(tǒng)盒子在添加了邊框和內(nèi)邊距之后，盒子被撐大的問(wèn)題。示例代碼如下。

/* 傳統(tǒng)計(jì)算方式 */
box-sizing: content-box;
/* 新的計(jì)算方式 */
box-sizing: border-box;

使用content-box計(jì)算方式的盒子模型，其寬度的計(jì)算公式如下。

盒子的寬度 = CSS中設(shè)置的width + border + padding

使用border-box計(jì)算方式的盒子模型，其寬度的計(jì)算公式如下。

盒子的寬度 = CSS中設(shè)置的width

當(dāng)采用border-box計(jì)算方式時(shí)，CSS中設(shè)置的寬度width已經(jīng)包含了border和padding值，不用擔(dān)心因?yàn)樵O(shè)置了元素的border和padding導(dǎo)致盒子被撐大的問(wèn)題。這種方式的優(yōu)點(diǎn)在于，盒子的大小是固定的，不會(huì)受到邊框和內(nèi)邊距的影響，也不會(huì)影響到頁(yè)面中其他盒子的結(jié)構(gòu)。因此，在移動(dòng)Web開(kāi)發(fā)中，推薦使用border-box這種計(jì)算方式。

為了讓讀者更好地理解，下面通過(guò)例2-4演示content-box和border-box的區(qū)別。

【例2-4】

（1）創(chuàng)建C:\web\chapter02\demo04.html文件，具體代碼如下。

   <!DOCTYPE html>
   <html>
   <head>
    <meta charset="UTF-8">
    <title>box-sizing</title>
    <style>
     div {
      width: 100px;
      height: 100px;
     padding: 10px;
     background-color: #eee;
    }
    div:nth-child(1) {
     border: 10px solid #999;
     box-sizing: content-box;
    }
    div:nth-child(2) {
     border: 10px solid #666;
     box-sizing: border-box;
    }
   </style>
  </head>
  <body>
   <div>content-box</div>
   <div>border-box</div>
  </body>
  </html>

上述代碼中，第7~12行代碼用于為所有div設(shè)置樣式，第13~16行代碼用于為第1個(gè)div設(shè)置樣式，第17~20行代碼用于為第2個(gè)div設(shè)置樣式。第15行將第1個(gè)div設(shè)置為content-box，第19行將第2個(gè)div設(shè)置為border-box。

（2）在瀏覽器中打開(kāi)demo04.html文件，運(yùn)行結(jié)果如圖1所示。

將box-sizing設(shè)置為border-box