笔记：css3:box-sizing

box-sizing

值：content-box | border-box | inherit
我主要谈谈学习中对前俩者的认识

盒子

我们平时设置的宽度(width)、高度(height)，实际上只是设置了content的大小
padding + border + context-width= 盒子的宽度
padding+ border + context-height = 盒子的高度
padding+ border + content = 盒子大小

所以常常会出现在代码里设置了宽高都一样的俩个块，浏览器显示却发现大小不对称，可能就是因为它们有设置border或者是padding

content-box

content-box是box-sizing的默认值。

以下是引自w3c的定义：

这是由 CSS2.1 规定的宽度高度行为。
宽度和高度分别应用到元素的内容框。
在宽度和高度之外绘制元素的内边距和边框。

我的理解：

content是我们的身体，border和padding是我们的衣服，外套或者内衬。但这不重要，重要的是穿衣服的方式。

原本的穿衣方式（即content-box）是一直往外面加衣服，衣服是套在我们身体上的，所以我们一直穿衣服，占得位置就越大，越臃肿，但我们的身体占得位置不变。

它本来就是在我们的身体外面穿衣服，就无所谓穿的衣服是否会超过我们身体的宽高，需要注意的是它只会从起点（一开始的位置）开始向下，和向右拓展，绝不会向上向左延伸。

border-box

为元素设定的宽度和高度决定了元素的边框盒。
就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

新的穿衣方式是占了多少位置，还想穿衣服，就继续往占的位置仍衣服，而身体越缩越小，全给衣服占了，（相当于割肉留空间给衣服），直到衣服把占的位置堆满了，即我们身体完全不占位置。（衣服和身体抢位置，衣服优先度高）
而衣服（border+padding）超过了一开始占得位置，还想穿，同样，继续向外（向右和向下延伸）。

哈哈，原谅我这乱七八糟的比喻。

例子

<div>
        <input type="text" id="txt" value="请输入.." />
        <button id="btn">查询</button>
    </div>

<style>
        * {
            margin: 0;
            padding: 0;
        }
        div{
            margin: 150px 0 0 400px;
        }
        input {
            width: 500px;
            height: 40px;
            float: left;
            box-sizing: border-box;    
            outline-style: none;
            padding: 10px;
            /* border: 20px solid; */
        }

        button {
            height: 40px;
            float: left;
        }
    </style>
    

可以发现，设置的width:500px;已经变成整个盒子的宽度了
（476+102+1.9922=500）
其实通过F12可以很快理解box-sizing。

border+padding设置超过500px

border+padding 的值=600，原本输入框的值“请输入”就给覆盖掉了。