当前位置: 首页 > Web前端 > CSS

前端面试CSS相关

时间:2023-03-31 12:54:44 CSS

写出以下%中有多少像素:

说实话,看到这道题的时候,一开始是信心满满的,后来越是自信越是不确定,怎么会有这么简单的一道题呢?可见我的基本功是真的不扎实!为了演示,我添加了两个背景,效果可以看CodePen分析首先,很明显box-itemblock会相对于boxblock定位,boxblock是box-itemblock的containingblock;top,bottom,left,right,width,height,padding,margin当这些属性的值为%时,计算规则如下:top,bottom,height:以包含元素的高度为准;left,right,width,padding-left,padding-right,margin-left,margin-right,padding-top,padding-bottom,margin-top,margin-bottom:基于包含元素的宽度;最容易混淆和容易出错的是padding-top、padding-bottom、margin-top、margin-bottom,这也是本题的重点检查点:当margin和padding四个方向的值是%,是根据包含元素的宽度计算的,一定要记住!回答