border-box宽度计算方式

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样式如下：

border-box宽度计算方式相关推荐

详解CSS的盒模型(box model) 及 CSS3新增盒模型计算方式box-sizing
W3C规范一般来说,页面中的每一个元素都会形成一个矩形盒子,渲染引擎根据给定的样式确定这个盒子的呈现.通俗的来说,页面的布局就是一个个盒子的排列和摆放.掌握了盒子呈现的本质,布局也就轻而易举. 在 ...
CSS中百分比单位计算方式整理
整理于:https://www.w3cplus.com/css/a-percentage-unit-in-css.html 1.font-size 相对于父元素的font-size来计算,如果父元素( ...
在线作图|在线做生态位宽度计算
生态位宽度计算生态位宽度(又称生态位广度.生态位大小)是生物利用资源多样性的一个指标,指一个种群在一个群落中所利用的各种不同资源的总和.生态位宽度反映物种或种群对环境适应的状况或对资源利用的稚度,一 ...
[css] absolute的containing block（容器块）计算方式和正常流有什么区别？
[css] absolute的containing block(容器块)计算方式和正常流有什么区别? absolute会先向上找到第一个position不为static或者fixed的祖先元素,然后根 ...
voc数据集的map计算方式
相关概念 map mean average precision,表示各类别ap的平均值 ap average precision,表示P-R曲线下的面积 p precision,查准率,p = T P ...
页面布局的几种宽度设置方式—html
今天分享下"页面布局的几种宽度设置方式-html"这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark一起学习 ...
计算机屏幕面积大约多少,电脑屏幕尺寸怎么计算？-常见电脑屏幕尺寸的计算方式 - 河东软件园...
电脑屏幕尺寸如何计算?电脑屏幕尺寸的计算方式!现如今电脑屏幕尺寸有多种多样,我们通过对笔记本与台式显示器的尺寸进行对比就会发现明显的区别,市面上常见的电脑屏幕尺寸包含19.21.21.5.22.23. ...
ap 目标检测算法map_目标检测算法的评估指标：mAP定义及计算方式
前面依次介绍了: 本节介绍目标检测算法的评估指标:mAP定义及计算方式 mAP:mean Average Precision,平均精度均值,即AP(Average Precision)的平均值,它是目 ...
河道中心线提取、平均宽度计算（Arcgis+CAD）
在做项目中遇到的河道平均宽度计算问题,稍作总结如下: 首先,提取河道中心线,若已有河道中心线,请直接忽略. 1.单独加载水体数据,设置好纯色符号(建议为纯黑色),去掉轮廓线,这样是为了提升栅格数据质量 ...

border-box宽度计算方式

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

border-box

border-box宽度计算方式相关推荐

最新文章

热门文章