box-sizing有兩個(gè)值
- content-box 是默認(rèn)值民镜。 默認(rèn)值踩叭，標(biāo)準(zhǔn)盒子模型锨苏。 width 與 height 只包括內(nèi)容的寬和高耿币， 不包括邊框（border）梳杏，內(nèi)邊距（padding），外邊距（margin）
- border-box width 和 height 屬性包括內(nèi)容淹接，內(nèi)邊距和邊框十性，但不包括外邊距
盒子溢出
查看元素
/* 文本框的樣式 */
.input{
width: 100%;
padding: 20px;
}
文本框的寬度就超過(guò)了父元素的寬度，因?yàn)閎ox-sizing默認(rèn)是content-box塑悼，width是不包含padding的劲适，100%的width加上20px的padding就超出了，設(shè)置為border-box即可拢肆。
.input{
width: 100%;
padding: 20px;
box-sizing: border-box;
}
border-box
