您现在的位置是:首页 >>CssCss

box-sizing 属性

zhang2021-03-08 11:32:34【Css】人已围观

简介:
box-sizing 最主要的用法是规定容器元素的最终尺寸计算方式。如果你创造了一个 <div> 没有设置 box-sizing 属性为 border-box(不设置的话默认值为 co...

box-sizing 最主要的用法是规定容器元素的最终尺寸计算方式。

如果你创造了一个 <div> 没有设置 box-sizing 属性为 border-box(不设置的话默认值为 content-box.),同时你设置 width:100px; border:10px solid red; padding:10px; 那么最终 div 容器的实际宽度为:

100px(width)+2*10px*(padding)+2*10px(border)=140px

所以你会得到一个比你预期(100px)还要更大的容器,结果就是会破坏网页布局。

注意:容易 margin 的尺寸不会被计算入最终容器宽度,因为对他的定义为对这个容器的留白,但不属于容器本身。

如果当我们定义一个容器的 box-sizing 属性为 border-box 时(表达式:br{box-sizing:border-box}),那么我们创建一个和上段中相同设置的 <div> 容器时,那么他的最终宽度即为 100px, 那么它的内容部分(content)的有效宽度变成了 100px-2*10px-2*10px =60px; 所以你会得到一个你预期大小的盒子容器,但是只是被压缩了内容部分尺寸而已,但是对于整体布局而言益处颇多。

所以要合理利用好这个属性,这个属性十分重要。


直观通俗的解释是:

content-box:指定盒模型为 W3C 标准模型,设置 border、padding 会增加元素 width与 height 的尺寸,即 border 与 padding 相当于是元素的“殖民地”,元素的“土地”、尺寸会增加,为向外延伸。

border-box:指定盒模型为 IE模型(怪异模式),设置 border、padding 不会影响元素 width 与 height 的尺寸,即 border 与 padding 由元素已设空间转变。即空间还是这个空间,只是将部分空余的地方,转变成了其他空间用法而已,为内部转变。

设置border与padding与被影响属性值的关系公式:

W3C标准盒模型(conten-box值)【width/height被改变,扩展】
width = content + border + padding;

// 其中,width 为浏览器视窗呈现尺寸,content 为在CSS中设置的元素的 width;

IE怪异盒模型(border-box值)【content被改变,压缩】
content = width - border - padding;

// 其中,width 为在CSS中设置的元素的width;


具体可用浏览器调试看看,多观察观察就懂了。

总之:

1.W3C标准盒模型(content-box),border、padding 的设置会破坏元素宽高,必须得重新计算,非常麻烦(除了在IE浏览器,默认就是标准盒模型,所以可以用 box-sizing 来转换);

2.IE(怪异)盒模型(border-box),border、padding 的设置不会影响元素的宽高,这非常实用(且因为IE盒模型不是标准,所以才有 box-sizing 这个标准属性来设置,将它标准化)【IE6/5 是怪异模型,IE7开始是标准盒模型】

另外的小技巧:【行高的计算】

/* 默认, W3C标准盒模型、 box-sizing: content-box */
<style type="text/css">
.box {
width: 200px;
height: 200px;
text-align: center;
border: 10px solid black;
padding: 15px;
}
</style>
/* 此时的行高:line-height = height = 200px;*/
/* 【因为行高即内容的高,而内容在这里即元素的高(边框和填充是扩展外部空间的)】 */

/* - - - - - - 分割线 - - - - - - */

/* IE怪异盒模型、box-sizing: border-box; */
<style type="text/css">
.box {
width: 200px;
height: 200px;
text-align: center;
border: 10px solid black;
padding: 15px;
box-sizing: border-box;
}
</style>
/* 此时的行高:line-height = height - border*2 - padding*2 = 200px - 10px*2 - 15px*2 = 150px; */
/* 【因为此时,内容的其余空间被边框和填充占用,所以是元素的高减去边框和填充的空间,剩余即为内容空间】 */



文章评论

    评论加载中...

标签云

站点信息

  • 建站时间:2018-11-17
  • 文章统计:134篇文章
  • 微信交流:扫描二维码,添加我
在线客服
在线客服
在线咨询:
点击这里给我发消息技术交流
点击这里给我发消息技术交流
点击这里给我发消息技术交流
电话咨询:
(微信同步)
15629136039
微信二维码