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

html-css013

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

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

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

width:calc(50% + 5px)

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

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

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

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

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

一、创建一个新的HTML文件

二、创建HTML标记和内容。

三、预览效果如图所示。

四、设置左边框的宽度border-left-width: 15px。

五、预览效果如图。

六、设置左边框的宽度border-left-width: thin。

七、预览效果如图所示。