box-sizing的使用场景

box-sizing的属性值有两个，分别为border-box;content-box;
border-box；这个属性的总宽度是由内容宽度加内边距宽度再加上边框的宽度
（width=content+padding+border）
content-box；它的宽度就是内容的实际宽度，
border-box属性在form上的使用
当我们要做一个登陆页面的时候，这时候就需要表单和按钮这些元素
首先我们在一个div中设置两个表单，一个用来输入用户名，一个用来输入密码，同时还有有一个登录按钮，
当我们想让这两个表单与一个登录按钮的长度相同时，这时我们试着把它们三个的width的值都设置为100%

Paste_Image.png

这里看到它们三个的width都设置为100%，而它们的长度并不一致，由此可以看出表单和按钮的padding、border值不统一，这时我们给表单的属性中添加一个
box-sizing：border-box；此时表单和按钮的长度保持一致。
当不给表单添加box-sizing：border-box；属性时，而是添加一个padding值会发现表单长度宽度都有所增加。
当给按钮添加padding时它的长度并不会改变。由此可以看出表单默认content-box，按钮submit默认border-box，button的默认值也为border-box。

Paste_Image.png

        <style>

              .user-form{
                    width: 100%;
                    height: 2em;
                   box-sizing: border-box;
              }
              .password-form{
                    width: 100%;
                    height: 2em;

              }
              .login-form{
                    width: 100%;
                    height: 2em;

              }

        </style>

border-box属性在盒子中的使用
当我们设置一个宽度为500px的盒子，在里面放入四个盒子，分别为上（width：100%） 中左（width：60%） 中右（width：40%） 下（width：100%），
此图可以看出在大盒子里的四个盒子排列的都很整齐

Paste_Image.png

例如我们这时需要给上盒子设置一个padding或者border为5px，我们看下此时的效果图，这里我只是添加了一个border：5px，这就和之前预想的不一样了，我们只想他在大的盒子里存在5px的border，并不想它超出这个大的盒子，这时我们就要添加border-box属性给它重新布局，使它添加的border值包含在width：100%之中。

Paste_Image.png

我们需要添加一个box-sizing：border-box在上盒子的属性中，这时上盒子在拥有5px的border同时不会超出大盒子的边距

Paste_Image.png

如果是给middle-left增加一个5px的border那么原先的布局就会被打乱，middle-left盒子就会被挤到middle-left的下方，同样我们只需要添加box-sizing属性便可以解决问题。

  <style type="text/css">
              body{
                    width: 100%;
              }
        .box{
              width: 500px;
              background: cyan;
              margin: 0 auto;
              border: solid 1px black;
        }
        .top-box{
              width: 100%;
              background: red;
             border: solid 5px greenyellow;
             box-sizing: border-box;

        }
        .middle-left{
              width: 60%;
              background: yellow;
              float: left;
        }
        .middle-right{
              width: 40%;
              background: orange;
              float: left;
        }
        .bottom-box{
              width: 100%;
              background: green;
        }
  </style>