前端录网站,记录前端点点滴滴,帮助程序猿快速成长!

快速理解Box-Sizing相关属性

css3

为了解决padding影响宽度造成破版的问题,推荐一个CSS3属性: Box-Sizing。

Box-Sizing只决定一事件:矩型元素在计算宽度及高度时,border及padding为内含还是外加? (参考: Box Model )而其设定值有三种: content-box、border-box及padding- box。预设值为content-box,意指元素实际宽高等于CSS指定宽高再加上border/padding(外加)、border-box时则border/padding为内含,元素的实际宽高即为CSS所指定宽高,而扣除border/padding后才是呈显内容元素的范围。支援padding-box的浏览器还不多,暂且忽略。

举例来说: 一个width 200px的

,若padding为10px、border也是10px,预设box-sizing: content-box时,
实际宽度将为220px(200+10+10);若box -sizing改为border-box,则
实际宽度为200px,其内容物范围宽度为180px(200-10-10)。



图中的两个

都被设为width: 200px; height: 100px; padding: 10px; border: 10px;,差别在于左方box-sizing设成border-box(另外加了margin-left: 20px以便与右方左右标齐),下方则不指定box-sizing,维持预设值(content-box)。

 

由结果可看出,设为border-box时,

尺寸为200x100,而内部浅灰区域被压缩到只剩180x80;而content-box时,
尺寸为220x120,内部浅灰内容区域维持200x100,面积与左方
相同,由此例可看出border/padding外加与内含的差异,也说明box-sizing的可应用时机。

 


演 示


转载请注明:前端录»快速理解Box-Sizing相关属性