CSS 基础练习 #

定位相关 #

• 35 请利用相对定位、绝对定位、定位层级实现上图的效果。其中盒子的颜色分别为：#ff8077、#5cd8a2、#1fc0cc，盒子的尺寸为 100px。

盒子相关 #

• 39 请回答 margin/padding 有几种简写方式，分别代表什么作用？

• 40-1 请利用渐变背景实现上图的效果。其中渐变颜色为 #1fc0cc，盒子的尺寸为 100px。

• 40-2 通过阅读上方代码，请描述它要实现什么效果，以及存在什么问题？

• 41 请利用盒子边框实现上图效果。其中边框颜色为 #5cd8a2，边框宽度为 2px。

• 43 请实现上图的阴影效果，阴影的颜色为 #000，其余参数不会提供，请尽可能 1:1 还原。

• 45 请描述上方代码中的 box1 和 box2 的两种展示效果有什么区别？

• 46 请描述两种盒子模型的区别，以及验证你说的是对的。

字体相关 #

• 48-1 如果给一个文字设置 16px 字号，默认是微软雅黑字体，那它实际占用的高度是多少？以及如何证明？

• 48-2 如果给一个文字设置 16px 字号，假设它实际占用了 21px，请通过编写代码的方式改为 16px。

• 50 请描述 font-family: PingFang SC,Microsoft YaHei,Arial Regular; 有什么作用？

对齐相关 #

• 55 请利用 vertical-align 实现上图效果。

动画相关 #

• 56 请利用 translateX 和 translateY 实现上图动画效果。

• 58 请利用 scale 实现上图动画效果。

• 59 请利用 scale 和 rotate 实现上图动画效果。

其他 #

• 63 实现一个功能，当网页宽度小于 750px 时正文字体使用 12px，当网页宽度小于 1280px 时使用 14px ，其他情况使用 16px。

• 64 当一行文字内容超出宽度时，使用省略号进行展示。

选择器 #

• 70 通过以上代码，请描述盒子最终输出什么颜色，以及原因。

• 76 请利用伪类选择器实现一个功能，将每一行末尾的盒子颜色设置为 #5cd8a2

flex 布局 #

• 79 请利用 flex 实现水平居中效果。

• 80 请结合 flex-wrap 实现上图 4 x 4 效果。

• 83 请利用 flex 实现垂直居中效果。

• 90 请利用 flex 实现独立对齐方式。

布局方式 #

• 90-1 请描述静态布局有什么缺点？并通过代码编写一个例子来证明。

• 90-2 请描述自适应布局有什么缺点？并通过代码编写一个例子来证明。