box-sizing布局学习笔记

首先学习box-sizing布局之前，来了解一下css盒子模型（Box Model）

---

盒子模型（Box Model）

---

一般来说，css盒子模型有两种模式：

• W3C的标准模型 相当于 box-sizing：content-box

---

我们对元素设置的宽度和高度就是内容（content）的宽度和高度，也就是内盒子的宽度；外盒子的宽度包括：content+padding+border的

---

• IE的传统模型 相当于box-sizing：border-box

---

这个模型下，我们设置的宽度和高度是包括：content+padding+border的，此时这个宽度和高度，相当于我们在W3C模型下面的宽度和高度。其内容的宽度比我们设置的宽度要小的。

---

box-sizing：content-box

---

默认值，标准的盒模型，width和height只包括内容（content）的宽度和高度，不包括border，padding，margin，这些都是盒子的外部。

---

ps：当我们设置好了宽度和高度的时候，其外盒子的宽度和高度基本上就定了，当我们想在内容（content）外面设置padding和margin或者border时，非常容易破坏我们的布局，此时我们就需要想到box-sizing：border-box

---

box-sizing：border-box

---

这个模式下，当我们设置了盒子宽度和高度的时候，其包括：content+padding+border，但是不包括margin。

---

ps如果计算的content的内容宽度为负值，其都会被计算为0，内容还在，故不能通过border-box来隐藏元素。元素的内容宽度和高度是在我们设置的宽度和高度的里面渲染的。当我们想给元素添加border或者padding时，这个模型不会破坏我们的布局，因为其会适当的调整我们内容content的宽度和高度来满足。故可以用来设置自适应布局

---

案例：box-sizing三栏布局

---

html代码：

---

<div class="left"></div>
<div class="mid"></div>
<div class="right"></div>

cssd代码：

---

div{
                height: 600px;
                float: left;
            }
            .left{
                width: 25%;
                background: #000000;
            }
            .mid{
                /*默认是box-sizing：content-box*/
                box-sizing: content-box;
                width: 50%;
                background: #ff00ff;
            }
            .right{
                width: 25%;

                background: #ffff00;
            }

---

当我们试着给粉红色加上border的时候，你会发现，黄色掉下去了，因为此时的宽度正好是body的100%，其是标准的盒子模型。但是我们一定要给中间的加上padding，那咋办？此时我们可以给中间的添加：

> box-sizing：border-box

之后，再去给中间的加上padding就可以了，不管我们怎么设置padding的大小，其布局依然完好。

---

box-sizing的另外一个作用是在表单元素上面调整布局，因为我们的表单元素还有一部分是IE的传统盒子模型，详情参考：W3Cplus
欢迎访问我的github