box-sizing 盒类型

发布时间：2023-03-15 11:08:10 所属栏目：教程来源：

导读：Box-sizing 盒类型
它主要用来告诉浏览器怎么计算元素的展示宽高的。

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

2. 解释
在开发过程中，当有一个固定宽高的元素带有 bo

Box-sizing 盒类型
它主要用来告诉浏览器怎么计算元素的展示宽高的。

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

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

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

3. 语法
Box-sizing: content-Box | border-Box
它接受一个参数 content-Box 或 border-Box。

content-Box 的计算方式是:

width = content width;

height = content height

border-Box 的计算方式是：

width = border + padding + content width

heigth = border + padding + content heigth

4. 兼容性
IE Edge Firefox Chrome Safari Opera ios android
10+ 12+ 28+ 4+ 6.1+ 12.1+ 7+ 4.4
5. 实例
不是设置 Box-sizing 分别在不同浏览器中的展示。
<div class="demo">网 CSS3 学习分享</div>
.demo{
width:px;
height:px;
background:#000;
color:#fff;
padding:px;
border:px solid red;

不同浏览器中的展示效果图
说明:左侧是 Chorme 浏览器右侧是低版本 IE 浏览器。

给上面 demo 中设置 Box-sizing 为 border-Box。
.demo{
width:px;
height:px;
background:#000;
color:#fff;
padding:px;
border:px solid red;
Box-sizing:border-Box;

使用`border-Box`效果图
给上面 demo 中设置 Box-sizing 为 content-Box。
.demo{
width:px;
height:px;
background:#000;
color:#fff;
padding:px;
border:px solid red;
Box-sizing:content-Box;

使用`content-Box`效果图
6. 经验分享
推荐大家设置 Box-sizing 为border-Box 这样方便我们写样式不必在去减去 padding 也不会造成 IE 和 Chorme 这类浏览器展示不同的 bug 。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!