当前位置 博文首页 > 文章内容

    border,border-box宽度计算方式

    作者:zyd1113wz 栏目:网站相关 时间:2021-04-01 16:11:09

    本站于2023年9月4日。收到“大连君*****咨询有限公司”通知
    说我们IIS7站长博客,有一篇博文用了他们的图片。
    要求我们给他们一张图片6000元。要不然法院告我们

    为避免不必要的麻烦,IIS7站长博客,全站内容图片下架、并积极应诉
    博文内容全部不再显示,请需要相关资讯的站长朋友到必应搜索。谢谢!

    另祝:版权碰瓷诈骗团伙,早日弃暗投明。

    相关新闻:借版权之名、行诈骗之实,周某因犯诈骗罪被判处有期徒刑十一年六个月

    叹!百花齐放的时代,渐行渐远!



         css3 box-sizing定义了两种盒模型:

         content-box

         border-box

         没有padding-box哦,别瞎猜。

         二者区别就是容器的宽度计算方式不同

         content-box是块级默认属性,宽度计算方式为:

         boxWidth=padding-left+padding-right+border-left+border-right+width;

         border-box这种盒模型的计算宽度的方式网上大部分方式都有问题。

         他的真实所占宽度不是定义的width;真实宽度为左右padding和左右border之和,与width属性之间较大的值boxWidth=Math.max(padding-left+padding-right+border-left+border-right,width);

         例子:

         chrome浏览器的computed

         css样式如下:

         原文链接:https://blog.csdn.net/Next__One/article/details/85873229