版權聲明：本文爲博主原創文章，未經博主允許不得轉載。 https://blog.csdn.net/DarinZanya/article/details/62038447
CSS中有個box-sizing的屬性，特別有意思：
定義：box-sizing: content-box|border-box|inherit;
解釋：box-sizing主要用來規定元素寬高。
①content-box - 默認屬性
CSS2.1規定的寬度高度行爲，寬度和高度分別到元素的內容爲止，而內邊距和邊框不計算在內；
也就是說，你使用content-box（默認）後，再使用內邊距和邊框，都會增加元素本身的寬高；
這樣可能會導致一些位置的計算，邊距、邊框長度會被忽略；
②border-box - CSS3屬性
CSS3這個屬性就比較有意思了，它爲元素設定的寬度和高度決定了元素的邊框盒；
就是說，爲元素指定的任何內邊距和邊框，都將包含在已設定的寬度和高度內；
通過從已設定的寬度和高度分別減去邊框和內邊距，才能得到其內容的寬度和高度；
這樣大大減輕了計算一些臨界值的麻煩
實踐：多說無益，看例子，
<!DOCTYPE html>
<html>
<head>
<style>
div.bar
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
border:10px solid red;
float:left;
position: relative;
left: 50px;
}
div.box{
width: 20px;
height: 20px;
background: #000;
position:absolute;
left: 80px;
top: 0;
}
</style>
</head>
<body>
<div class="bar">這個 div 佔據左半部分。<div class="box"></div></div>
<div class="bar">這個 div 佔據右半部分。</div>
<script>
var bar = document.getElementsByClassName('bar')[0];
var box = document.getElementsByClassName('box')[0];
bar.onclick = function(e){
alert(e.pageX-parseFloat(bar.offsetLeft)) //等於box-left的值
}
</script>
</body>
</html>
可以看到，這個box-left的值是包含邊框在內的。
我在寫滑塊插件的時候，計算滑塊位置，使用boder-box就省去了很大的計算麻煩。如果使用content-box，在border的寬度會對計算有影響。