登录/注册

box-sizing 盒类型

它主要用来告诉浏览器怎么计算元素的展示宽高的。

1. 官方定义

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

2. 慕课解释

在开发过程中,当有一个 固定宽高的元素带有 boder 或 padding 的时候,它在 IE 中展示和 Chrome 中是不同的,如果我们不设置这个属性,那么在 IE浏览器中它的实际宽高是小于 Chrome 浏览器的这是为什么呢?

Chrome 浏览器使用的是标准盒模型 content-box,IE 盒模型是 border-box。

下面就是一个盒模型的结构图

不同浏览器中的展示效果图
不同浏览器中的展示效果图

说明:左侧是 Chorme 浏览器右侧是低版本 IE 浏览器。

  1. 给上面 demo 中设置 box-sizingborder-box
.demo{
    width:100px;
    height:100px;
    background:#000;
    color:#fff;
    padding:10px;
    border:5px solid red;
    box-sizing:border-box;
}

效果图

使用`border-box`效果图
使用`border-box`效果图
  1. 给上面 demo 中设置 box-sizingcontent-box
.demo{
    width:100px;
    height:100px;
    background:#000;
    color:#fff;
    padding:10px;
    border:5px solid red;
    box-sizing:content-box;
}

效果图

使用`content-box`效果图
使用`content-box`效果图

6. 经验分享

推荐大家设置 box-sizingborder-box 这样方便我们写样式不必在去减去 padding 也不会造成 IE 和 Chorme 这类浏览器展示不同的 bug 。

7. 小结

如果不设置 box-sizing 不同浏览器会有不同的计算方式。

原文地址:https://blog.csdn.net/q7825103/article/details/105379906
文章来源与用户投稿或网络采集,如果您是本文的作者,发现版权或转载方式问题请右侧邮箱联系管理员。

抢沙发

共同学习,写下你的评论
姓名
电子邮件
个人主页