box-sizing:的两个属性在程序中具体的作用

box-sizing:的两个属性在程序中具体的作用

border-box

content-box

这两个属性在这个例题中蓝框的大小为什么不一样

http://img1.sycdn.imooc.com//climg/5d53bafb00014d0108870499.jpg

正在回答

登陆购买课程后可参与讨论,去登陆

1回答

同学你好!

  1. border-box:padding和border被包含在定义的width和height之内,盒子的实际宽度=设置的width(padding和border不会影响实际宽度),可以看以下例子,虽然设置了padding-top和padding-left,但是盒子的实际大小与设置的相同

    http://img1.sycdn.imooc.com//climg/5d53c29e0001eea912840738.jpg

  2. content-box:padding和border不被包含在定义的width和height之内。盒子的实际宽度=设置的width+padding+border。看一下例子,盒子的高度以及宽度是分别与padding-top和padding-left相加之后的结果:

    http://img1.sycdn.imooc.com//climg/5d53c354000175b712500672.jpg

如果我的回答解决了你的疑惑,请采纳,祝学习愉快~

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师