https://github.com/haizlin/fe-interview/issues/ 题目
1 div下加圆点
需求如下图：项目需要 使用封装过的组件vue-calendar,所以无法修改dom结构，在对应div下再加一个元素;
使用border的dotted样式 无法控制大小，圆点会很大，难以修改；
最后想到用伪类::after；
dom:
<Calendar format="YYYY-MM-DD" :markDateMore="markers" @choseDay="handleDayChange" :textTop="['一', '二', '三', '四', '五', '六','日']" ref="Calendar"></Calendar>
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实践过优雅降级了，为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效。）
网友评论