CSS3之box-sizing属性分析

最新推荐文章于 2021-01-30 13:14:29 发布

DarinZanya

最新推荐文章于 2021-01-30 13:14:29 发布

阅读量617

点赞数 1

分类专栏： Web前端文章标签： javascript slider border-box

本文链接：https://blog.csdn.net/DarinZanya/article/details/62038447

版权

Web前端专栏收录该内容

19 篇文章 0 订阅

订阅专栏

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的值是包含边框在内的。