search

vianvio / FE-Companions

山虽高，我心已决要攀登， 路再难，绊不住我的脚跟； 因为我看到生命之路就在这里。 -- 《天路历程》
447 stars 34 forks source link

20200225 - jia58960 #17

Open vianvio opened 4 years ago

vianvio commented 4 years ago

问题列表：

  1. 根据以下结构实现图片中的效果，及格线5种，核心知识点不可重复，注释说明原理，附上github仓库地址 result

    <html>
<style>
.parent {
  background-color: rgba(255,0,0,0.2);
}
.child {
  background-color: rgba(0,255,0,0.2);
}
.child1 {

}
.child2 {

}
.child3 {
}
</style>
<body>
<div class="parent" style="width: 200px; height: 20px;">
  <div class="child child1" style="width: 20px; height: 20px;"></div>
  <div class="child child2" style="width: 20px; height: 20px;">2</div>
  <div class="child child3" style="width: 20px; height: 20px;">3</div>
</div>
</body>
</html>

  2. 招股书长文档相关：

    • 如何渲染超长文本页面，考虑内存问题
    • 如果使用图片或者canvas，如何处理前端文本搜索
    • 如何高亮搜索结果
Mcnwork2018 commented 4 years ago

第一题答案

1.传统的float布局 float 2.position布局 absolute 3.flex布局 flex 4.grid布局 grid 5.transform布局 transform 6.inline-block布局 inline-block 7.table布局 tabel-cell

vianvio commented 4 years ago

楼上优秀啊~~~

scv057 commented 4 years ago

我加一个有点脱裤子放屁感觉的方法 carbon

vianvio commented 4 years ago

我加一个有点脱裤子放屁感觉的方法

为何你如此机智

scv057 commented 4 years ago

@vianvio 我想的CSS的功能不就布局，绘制，动画三个方面。然后就用绘制这块整活了 :satisfied: