box-sizing的屬性及作用詳細(xì)介紹【CSS3】

更新時(shí)間:2021-09-24 來(lái)源:黑馬程序員瀏覽量:

IT培訓(xùn)班

當(dāng)一個(gè)盒子的總寬度確定之后，要想給盒子添加邊框或內(nèi)邊距，往往需要更改 width屬性值，才能保證盒子總寬度不變，操作起來(lái)煩瑣且容易出錯(cuò)，運(yùn)用CSS3的box-sizing屬性可以輕松解決這個(gè)問(wèn)題。box-sizing屬性用于定義盒子的寬度值和高度值是否包含元素的內(nèi)邊距和邊框，其基本語(yǔ)法格式如下。

box-sizing: content-box/border-box;

在上面的語(yǔ)法格式中，box-sizing屬性的取值可以為content-box或border-box，對(duì)它們的解釋如下。

●content-box：瀏覽器對(duì)盒模型的解釋遵從W3C標(biāo)準(zhǔn)，當(dāng)定義width和height時(shí)，它的參數(shù)值不包括border和padding。

●border-box：當(dāng)定義width和height時(shí)，border和padding的參數(shù)值被包含在width和height之內(nèi)。

下面通過(guò)一個(gè)案例對(duì)box-sizing屬性進(jìn)行演示，如下所示。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>box-sizing屬性用法</title>
    <style type="text/css">
        .box1{
            width: 300px;
            height: 100px;
            padding-right: 10px;
            background: #F90;
            border: 10px solid #ccc;
            box-sizing: content-box;
        }
        .box2{
            width: 300px;
            height: 100px;
            padding-right: 10px;
            background: #F90;
            border: 10px solid #ccc;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="box1">content_box屬性</div>
    <div class="box2">border_box屬性</div>
</body>
</html>

在上面案例中定義了兩個(gè)盒子，并對(duì)它們?cè)O(shè)置相同的寬、高、右內(nèi)邊距和邊框樣式。并且，對(duì)第一個(gè)盒子定義“box-sizing: content-box;”樣式，對(duì)第二個(gè)盒子定義“box-sizing: border-box;”樣式。

box-sizing用法

可以發(fā)現(xiàn)應(yīng)用了“box-sizing: content-box;”樣式的盒子1，寬度比width參數(shù)值多出30px，總寬度變?yōu)?30px;而應(yīng)用了“box-sizing: border-box;”樣式的盒子 2，寬度等于width參數(shù)值，總寬度仍為300px。應(yīng)用“box-sizing: border-box;”樣式后，盒子border和padding的參數(shù)值是被包含在width和height之內(nèi)的。

猜你喜歡：

CSS怎樣更換鼠標(biāo)樣式？

圓角矩形css怎么寫(xiě)？

清除input默認(rèn)樣式

CSS中px、em、rem有什么區(qū)別和不同？

黑馬程序員HTML&JS+前端高手班

上一篇：:after和:before是什么意思？有什么用？ 下一篇：什么是外邊距重疊?如何解決外邊距重疊?