干货：CSS之元素竖向的百分比设定是宽度，而不是高度

在css中，当按百分比设定的一个元素的宽度时，它确实是相对于宽度计算的，但是，对于一些竖向的距离属性呢？比如padding-top或者bottom和margin-top或者bottom等，当按百分比设定时，它们依据的是父容器的宽度，而不是高度。

下面是一个实例演示，你可以调整容器的宽度，但你会发现，黄块的padding-bottom的距离也会随之宽度而变大或变小。

以下为大家展示下

HTML：

CSS:

效果：

总结：

当移动滑动条时，我们css只修改了容器的宽度。但是，这三个属性的高度也随之变化。所以，可以看出，当按把百分比计算的是按容器的宽度，而不是高度来的。

切图 qiewtu(.com)

eb前端开发课程：css字体模块-文字大小。

讲课人：波波老师。

再来看一下字体模块。

·第一个是字体大小，font-size，常用的单位是px。网页的默认文字大小一般是16px，可以根据自己的需要进行设置。

·看一下代码，新建一个文件，font.html，字体p，文字大小，可以看到默认的文字大小是16px。

·加一个class="size"，在style里做一个.size，font-size设到24px，可以看到文字一下子变大了。事实上来讲，一般都是把它设置到12px或者14px。

者：Tam Hanna

转发链接：https://www.creativebloq.com/how-to/21-ways-to-optimise-your-css-and-speed-up-your-site

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。