更新時間:2021-09-24 來源:黑馬程序員 瀏覽量:
當一個盒子的總寬度確定之后，要想給盒子添加邊框或內邊距，往往需要更改 width屬性值，才能保證盒子總寬度不變，操作起來煩瑣且容易出錯，運用CSS3的box-sizing屬性可以輕松解決這個問題。box-sizing屬性用于定義盒子的寬度值和高度值是否包含元素的內邊距和邊框，其基本語法格式如下。
box-sizing: content-box/border-box;
在上面的語法格式中，box-sizing屬性的取值可以為content-box或border-box，對它們的解釋如下。
●content-box：瀏覽器對盒模型的解釋遵從W3C標準，當定義width和height時，它的參數值不包括border和padding。
●border-box：當定義width和height時，border和padding的參數值被包含在width和height之內。
下面通過一個案例對box-sizing屬性進行演示，如下所示。
JavaEE
鴻蒙應用開發(fā)
集成電路應用開發(fā)
人工智能開發(fā)
AI+Linux云計算運維
Python+大數據開發(fā)
AI+設計
軟件測試
新媒體+短視頻
HTML&JS+前端
<!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>
在上面案例中定義了兩個盒子，并對它們設置相同的寬、高、右內邊距和邊框樣式。并且，對第一個盒子定義“box-sizing: content-box;”樣式，對第二個盒子定義“box-sizing: border-box;”樣式。
可以發(fā)現應用了“box-sizing: content-box;”樣式的盒子1，寬度比width參數值多出30px，總寬度變?yōu)?30px;而應用了“box-sizing: border-box;”樣式的盒子 2，寬度等于width參數值，總寬度仍為300px。應用“box-sizing: border-box;”樣式后，盒子border和padding的參數值是被包含在width和height之內的。
猜你喜歡：
.jpg)