2019-10-15 tips

https://github.com/haizlin/fe-interview/issues/ 题目

1 div下加圆点

需求如下图：项目需要 使用封装过的组件vue-calendar,所以无法修改dom结构，在对应div下再加一个元素;
使用border的dotted样式 无法控制大小，圆点会很大，难以修改；
最后想到用伪类::after；
dom:
 
js:   this.markers=[   {  date:'2019/10/13', className:'class1' },
          { date:'2019/10/1', className:'class2' }    ]; //指定日期可添加class以设置css
css:
                  .wh_item_date.class1,.wh_item_date.class2{
                        display: block;//这样after元素方可换行，显示在下方
                   }
                  .wh_item_date.hasRange::after{
                       content: '';//必须，否则圆点不显示
                       display: block;
                        width:10px;
                        height:10px;
                        position:absolute;
                        left:calc(50% - 5px);//父级元素宽度减去自身宽度一半
                        bottom:0;
                        background-color: #32E95D;
                        border-radius:50%;
                    }

css 需求

2 元素可滚动、滚动条隐藏（chrome and Firefox）

css:
.box::-webkit-scrollbar{
    display:none;
} //Chrome等浏览器

.box{
    scrollbar-width:none;
} //firefox等浏览器

3 css3新特性

①CSS3 选择器

:last-child 匹配父元素的最后一个子元素。:nth-child(n)匹配父元素的第n个子元素。:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素。

②Font-face 特性

可用来加载字体样式，且能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。

③圆角

border-radius:可设置div四个角不同的圆角值,顺序为 左上角，右上角，右下角，左下角,设置一个值50%时 div显示为圆形。 eg:border-radius：10px 10px 0 0；

④ 阴影

box-shadow: h-shadow v-shadow blur spread colorinset; 分别代表水平阴影的位置，垂直阴影的位置，模糊距离，阴影的大小，阴影颜色，外层的阴影（开始时）改变阴影内侧阴影

⑤多列布局

eg: .multipleCol{count: 3;    column-gap: 5px;    column-rule: 1px solid gray;    border-radius: 5px;    border:1px solid gray;    padding: 10px  ;}

⑥⑦⑧⑨

4 优雅降级与渐进增强

渐进增强（progressive enhancement）：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。（从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能，向页面添加无害于基础浏览器的额外样式和功能。当浏览器支持时，它们会自动地呈现出来并发挥作用。）

优雅降级（graceful degradation）：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。（Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了，为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效。）