求教CSS宽度百分比是如何算来的？

html-css021

求教CSS宽度百分比是如何算来的？,第1张

这个宽度是以其父节点的width来计算的，如果父节点未设置width属性，就上溯其祖父节点，这样一直上溯，直到找到明确指定了width属性的祖先节点。如果整个家族的节点都没有设置width属性，那么就以当前浏览器窗口的实际宽度为基准。

比如宽度为父元素的50%加上5像素：

width:calc(50% + 5px)

要注意加号（或减号）两边一定要加上空格！

再比如宽度是父元素的三分之一再减去3像素：

width:calc((100% / 3) - 3px)

乘号（或除号）两边可以不加空格，但建议最好加上！

此外必须注意这种方法属于css3标准，不是什么浏览器都适用的哦！

结果是：从左依次是 117px,117px,116px,117px,117px. 两边的边框都是4px ，中间4个边框是2px. 我是Dreamweaver 画了一个Table，在Photoshop 中用测量工具测的。不清楚如何算。