本文小編為大家詳細(xì)介紹“CSS盒子模型及box-sizing屬性實(shí)例分析”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“CSS盒子模型及box-sizing屬性實(shí)例分析”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。
創(chuàng)新互聯(lián)建站專注于企業(yè)全網(wǎng)營(yíng)銷推廣、網(wǎng)站重做改版、龍子湖網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5建站、商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為龍子湖等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。
CSS 基礎(chǔ)框盒模型是 CSS 規(guī)范的一個(gè)模塊，它定義了一種長(zhǎng)方形的盒子, 包括它們各自的內(nèi)邊距（padding）與外邊距（margin
），并根據(jù)視覺(jué)格式化模型來(lái)生成元素，對(duì)其進(jìn)行布置、編排、布局。常被直譯為盒子模型、盒模型或框模型。
盒模型有以下分類：
標(biāo)準(zhǔn)定義：
標(biāo)準(zhǔn)盒模型
怪異模式盒模型
元素類型
塊級(jí)盒子
內(nèi)聯(lián)盒子
行內(nèi)塊
寬度width = 內(nèi)容寬度(content) + padding + border + margin
內(nèi)容寬度僅僅只有content。如果設(shè)置一個(gè)元素的寬為100px，那么這個(gè)元素的內(nèi)容區(qū)會(huì)有100px寬，并且任何邊框和內(nèi)邊距的寬度都會(huì)被增加到最后繪制出來(lái)的元素寬度中。
寬度width = 內(nèi)容寬度(content + padding + border) + margin
內(nèi)容寬度包含了content、border、padding。如果將一個(gè)元素的width設(shè)為100px，那么這100px會(huì)包含它的border和padding，內(nèi)容區(qū)的實(shí)際寬度是width減去(border + padding)的值。大多數(shù)情況下，這使得我們更容易地設(shè)定一個(gè)元素的寬高。
box-sizing屬性有以下兩個(gè)屬性值。
box-sizing屬性定義如何計(jì)算一個(gè)元素的總寬度和總高度，主要設(shè)置是否需要加上內(nèi)邊距(padding)和邊框等。
例如，假如您需要并排放置兩個(gè)帶邊框的框，可通過(guò)將 box-sizing 設(shè)置為 "border-box"。這樣就可以讓瀏覽器呈現(xiàn)出帶有指定寬度和高度的框，并把邊框和內(nèi)邊距放入框中。
默認(rèn)情況下，元素的寬度(width) 和高度(height)計(jì)算方式如下：
width(寬度) + padding(內(nèi)邊距) + border(邊框) = 元素實(shí)際寬度
height(高度) + padding(內(nèi)邊距) + border(邊框) = 元素實(shí)際高度
默認(rèn)值，使用標(biāo)準(zhǔn)盒子模型。
重慶分公司
重慶分公司
.contentBox {
box-sizing: content-box;
width: 350px;
border: 10px solid black;
padding: 0 10px;}以上代碼在瀏覽器中的渲染的實(shí)際寬度是390px。
使用怪異模式盒子模型。
.borderBox {
box-sizing: border-box;
width: 350px;
border: 10px solid black;
padding: 0 10px;}以上代碼在瀏覽器中的渲染的實(shí)際寬度就是350px。
示例如下：
