资讯专栏INFORMATION COLUMN

前端面试之CSS相关

i_garfileo / 2562人阅读

摘要:写出以下分别有多少说实话,看到这道题,刚开始我是自信满满的,可算到后面自己就越来越不确定了,为什么会出这么简单的题呢由此可见,自己的基本功真不扎实呀为了展示,我加了两个背景,效果见解析首先明确块会相对于块定位,并且块是块的包

写出以下 %分别有多少 px

说实话,看到这道题,刚开始我是自信满满的,可算到后面自己就越来越不确定了,为什么会出这么简单的题呢?由此可见,自己的基本功真不扎实呀!为了展示,我加了两个背景,效果见CodePen

解析

首先明确box-item块会相对于box块定位,并且box块是box-item块的包含块;

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四个方向的值为%时,都是基于包含元素的宽度计算的,一定要记住!

答案

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/114738.html

相关文章

  • JavaScript - 收藏集 - 掘金

    摘要:插件开发前端掘金作者原文地址译者插件是为应用添加全局功能的一种强大而且简单的方式。提供了与使用掌控异步前端掘金教你使用在行代码内优雅的实现文件分片断点续传。 Vue.js 插件开发 - 前端 - 掘金作者:Joshua Bemenderfer原文地址: creating-custom-plugins译者:jeneser Vue.js插件是为应用添加全局功能的一种强大而且简单的方式。插....

    izhuhaodev 评论0 收藏0
  • 前端 CSS 面试大纲

    摘要:比如说预处理器,组件化,工程化,兼容性处理等方面,这些主要是基于自己的开发经验业界流行技术方案进行准备。但是在开始谈面试前我想先提出一个概念学霸面试模型学校的学习和公司的工作有很多相似的地方。所以对于面试,请参考上学那会儿你们班学霸的姿势。 背景 参加完 厦门第四届CSS Conf 后,让我对 CSS 产生了新的思考。CSS 是前端必须熟练掌握并保持持续关注的技术,但是我又不想在 CS...

    mating 评论0 收藏0
  • 18年求职面经及总结

    摘要:年求职面经及总结我的求职之路差不多走到尽头了感觉真是精疲力尽了把这大半年的经历和面试总结写下来希望能给和我一样在求职路上煎熬的人一点帮助先说背景微电子科学与工程专业学过两门和相关的课程语言和单片机这个专业的唯一好处就是大部分人并不知道这个专 18年求职面经及总结 我的求职之路差不多走到尽头了,感觉真是精疲力尽了.把这大半年的经历和面试总结写下来,希望能给和我一样在求职路上煎熬的人一点帮...

    zhangwang 评论0 收藏0
  • 18年求职面经及总结

    摘要:年求职面经及总结我的求职之路差不多走到尽头了感觉真是精疲力尽了把这大半年的经历和面试总结写下来希望能给和我一样在求职路上煎熬的人一点帮助先说背景微电子科学与工程专业学过两门和相关的课程语言和单片机这个专业的唯一好处就是大部分人并不知道这个专 18年求职面经及总结 我的求职之路差不多走到尽头了,感觉真是精疲力尽了.把这大半年的经历和面试总结写下来,希望能给和我一样在求职路上煎熬的人一点帮...

    fjcgreat 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<