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>

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,150评论 1 92
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 3,246评论 0 26
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 2,949评论 0 6
  • 阅读目录移动开发基本知识点 calc基本用法box-sizing的理解及使用理解display:box的布局理解f...
    张宪宇阅读 1,247评论 0 1
  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 1,120评论 0 7
  • 我不喜欢这样的应酬式的娱乐方式,甚至厌恶。同样也清楚这样的生活不是我想要的 甚至男朋友 未来的丈夫如果是这样也是很...
    Meilan阅读 97评论 0 0
  • 人和猫的区别: 猫的公式很简单:“寻找猎物吃”或者“寻找其他的猫,要么玩耍,要么打架。再或是“找到主人,磨...
    木子默阅读 129评论 0 0
  • 多少风前月下,迤逦天涯海角,魂梦亦凄凉。又是春将暮,无语对斜阳 《水调歌头·江上春山远》 【宋】葛长庚 江上春山远...
    胖乎乎先生阅读 275评论 0 10
  • 恍恍惚惚的到了8月份,我们认识大概一年也仅有这一年。把自己发布的第一篇文章写为你,不知道你知晓后会不会有点点小傲娇...
    酸枣仁阅读 220评论 0 0