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

html-css08

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

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

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

width:calc(50% + 5px)

要注意加号(或减号)两边一定要加上空格!

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

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

乘号(或除号)两边可以不加空格,但建议最好加上!

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

1. 用百分比实现 width:50%,这样会根据屏幕的大小来自适应宽度

(插一条calc的属性详解)

vw :Viewport width,即容器(可以是div)的宽度,默认1vw=整个视窗宽度的1%,全屏为100vw。比如视窗宽度为1200px,1vw=120px=1200px*1%,如果是满屏就则为100vw=1200px。

vh :Viewport height,即容器(如div)的高度,默认1vh=整个可视窗口高度的1%,全屏是100vh。

2. calc(100vmin)也可以达到自适应的效果,但还是用起来效果一般

3. calc(100vw - px)  vw是根据屏幕的大小来计算的,屏幕缩小,100vw也会变大