效果预览点击右侧“点击预览”按钮在当前页面预览，点击链接预览全文屏幕。https://codepen.io/comehop??e/pen/WaaBNV互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/c3DQeC7源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，容器中包含的三个元素分别代表帽子、胡子和手杖：居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；justify-content:center;}定义容器的大小，并设置子元素水平居中：.chaplin{width:40em;高度：30em；字体大小：10px；背景色：#eee；盒子阴影：003emrgba（0、0、0、0.2）；显示：弹性；弹性方向：列；align-items:center;}定义默认颜色，后面用currentColor引用这个颜色：.chaplin{color:#555;}画帽子的轮廓：.chaplin{position:relative;}。帽子{位置：绝对；宽度：6.4em；高度：4.6em；背景颜色：currentColor；边界半径：2.3em2.3em00；top:1.4em;}用伪元素绘制边缘：.hat::before{content:'';位置条件：绝对的；宽度：10em；高度：0.8em；背景颜色：currentColor；边界半径：0.4em；顶部：计算（100%+0.4em）；left:calc((100%-10em)/2);}画胡子：.beard{position:absolute;宽度：1.5em；高度：0；顶部：11.6em；边框：实心透明；边框宽度：00.4em1em0.4em；border-bottom-color:currentColor;}画棒中的棒：.stick{position:absolute;宽度：0.8em；高度：10.5em；背景颜色：currentColor；bottom:0;}使用::before伪元素绘制棍子的手柄：.stick::before{content:'';位置：绝对；框大小：边框框；宽度：5.6em；高度：3em；边框：0.8em实心；边界半径：5.6em5.6em00；-底部：无；top:-3em;}使用::after伪元素修饰句柄末端，使其圆润自然：.stick::after{content:'';位置：绝对；宽度：0.8em；高度：0.8em；背景颜色：currentColor；边界半径：50%；左：计算（5.6em-0.8em）；顶部：-0.4em；}水平居中杆：.stick{left:calc((100%-(5.6em-0.8em))/2);}至此，卓别林的抽象形象就完成了，接下来排版一句他的名言，在dom，并把一句话分成3段：一天没有笑声浪费了一天
定位文本并垂直行3段文本：.quote{position:absolute;左：50%；底部：2.5em；字体系列：无衬线；文本转换：大写；字体粗细：粗体；显示：弹性；flex-direction:column;}调整字体大小和字间距以对齐3段文本：.quotespan:nth-child(1){letter-spacing:0.05em;}.quotespan:nth-child(2){font-size:1.6em;}大功告成！
