CSS3 邊框大小
box-sizing 屬性
允許以特定的方式定義符合某個區域的特定元素。
默認值： content-box
JavaScript 語法： object.style.boxSizing="border-box"
語法
box-sizing: content-box|border-box|inherit;
content-box：寬度和高度分別套用到元素的內容框。在寬度和高度之外繪製元素的內邊距和邊框。
border-box：為元素設定的寬度和高度決定了元素的邊框盒。是說，為元素指定的任何內邊距和邊框都會在已設定的寬度和高度內進行繪製。透過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。
inherit：規定應從父元素繼承 box-sizing 屬性的值。
如果在元素上設定了box-sizing: border-box; 則padding(內邊距) 和border(邊框) 也包含在width 和height 中:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="div1">两个 div 现在是一样大小的!</div>
<br>
<div class="div2">php中文网</div>
</body>
</html>
不使用CSS3 box-sizing 屬性
#預設情況下，元素的寬度與高階計算方式如下：
# width(寬) + padding(內邊距) + border(邊框) = 元素實際寬度
height(高) + padding(內邊距) + border(邊框) = 元素實際高度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="div1">这个是个较小的框 (width 为 300px ，height 为 100px)。</div>
<br>
<div class="div2">这个是个较大的框 (width 为 300px ，height 为 100px)。</div>
</body>
</html>
新建檔案
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
.box_sizing{
width:180px;
padding:40px 20px;
background:#a0b3d6;
overflow:hidden;
}
.box_sizing .in{
width:100%;
border:12px double #34538b;
background:white;
padding:5px;
box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
</style>
</head>
<body>
<div class="box_sizing">
<div class="in">此处12像素的border和5像素的padding值算在宽度里面了~~</div>
</div>
</body>
</html>
預覽
Clear
- 課程推薦
- 課件下載
課件暫不提供下載，工作人員正在整理中，後期請多關注該課程~ 