box-sizing的用法

定义和用法

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 border-box。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。

box-sizing: content-box|border-box|inherit;

以下来自

作者：程序员poetry
链接：https://www.jianshu.com/p/e2eb0d8c9de6
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

关于CSS重要的一个概念就是CSS盒子模型。它控制着页面这些元素的高度和宽度。盒子模型多少会让人产生一些困惑，尤其当涉及到高度和宽度计算的时候。真正盒子的宽度(在页面呈现出来的宽度)和高度，需要加上一些其它的属性，例如：

padding + border + width = 盒子的宽度
padding + border + height = 盒子的高度

这看起来并不是那么直观，那么我们看一个图：

这意味着，如果我们设置一个宽度为200px，而实际呈现的盒子的宽度可能会大于200px(除非没有左右边框和左右补白)。这可能看起来比较怪，CSS设置的宽度仅仅是内容区的宽度，而非盒子的宽度。同样，高度类似。

这导致的直接结果是当我们希望页面呈现的盒子的宽度是200px的时候，我们需要减去它的左右边框和左右补白，然后设置为对应的CSS宽度。例如上图，我们设置希望盒子宽度为200px，则需要先减去左右补白各20px，左右边框各1px，然后设置对应的CSS宽度158px。

幸运的是，我们有更好的方法达到我们想要的目的。

与上面不同的是，当你设置 box-sizing:border-box 以后，这就能达到你想要的目的。例如，上面我们想要一个宽度为200px的盒子，那么我们直接设置宽度为200px。是不是看起来清晰多了。当再设置它的左右边框和左右补白后，它的内容区会自动调整。这可能更直接和一目了然。CSS代码如下：

div {
    box-sizing: border-box;
    width: 200px;
    padding: 20px;
    border: 1px solid #DDD;
}

实际上，这更被设计者和开发者推崇

一些开发人员觉得box-sizing使用起来十分方便,所以他们主张通过通用选择器将这个属性应用于每个元素

但这样的观点未免有些偏激,而且还会导致不必要的困难,所以更好的方法是只在实际需要时才使用这个属性

* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}

写上 box-sizing: border-box; 设置padding值 也不用担心没有减小宽度值而变形

• content-box: 在宽度和高度之外绘制元素的内边距和边框。
• border-box: 为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制
• inherit: 继承父元素 box-sizing 属性的值

box-sizing 布局三栏目案例

代码

div{
        height:700px;
        float:left;
}
div.left{
        width:25%;
        background:red;
}
div.cent{
        width:50%;
        box-sizing:border-box;/*可以改变元素以使其宽度包含填充*/
                /* 现在整个元素,包括填充在内,占页面总宽度的50%,所以元素的组合宽度为100%,这全程它们很好地适应于它们的容器.*/
        background:yellow;
        padding:0 20px;/*加了这个会使盒子内容溢出 但是box-sizing很好的自适应了*/
}
div.right{
       width:25%;
        background:blue;
}
<div class="left"></div>
<div class="cent"></div>
<div class="right"></div>

效果

本文来自：https://blog.duhbb.com

本文链接地址：box-sizing的用法，英雄不问来路，转载请注明出处，谢谢。

有话想说：那就赶紧去给我留言吧。