2019-09-06 今天的第一次笔试总结

作者: 枫叶落尽 | 来源:发表于2020-05-09 16:19 被阅读0次

2019-09-06 今天的第一次笔试总结
一道高中排列组合题
2016.8.29计划
今天笔试
教师资格证笔试面试通过总结
第一次笔试
笔试总结
改变人生，好难！
2019 | 腾讯暑期实习【HR】笔试：题型分析&总结
记一次大厂笔试

数组一维化

三道编程题：
1、使用flex布局实现如下布局：

要求：中间的元素占据总宽度50%，和两边元素的距离为20px；
分析：

元素为一排的横排，所以设置容器的 flex-direction 属性，此处为：row；（其实默认值就是这样，可以不用设置）
对于要实现两边的元素靠边，应该设置容器的 justify-content 属性，两边靠边，设置为space-between
然后中间的元素要占宽50%，直接设置其 width 为50%即可
两边的元素如何自动占位呢？设置它们的 flex-grow 属性，顾名思义，控制放大的，设置为一个数字之后，如果和大于1，它们按比例分配剩余空间。所以我们让它们分别分配剩余空间的1/2
要让中间元素距离两边元素为20px，我们设置它的margin-left:20px、margin-right:20px即可
单纯的CSS实现：

<div id="div1">
    <div class="inner inner2"> right </div>
    <div class="inner" id="div3">  50%</div>
    <div class="inner inner2">  left width:20px</div>
</div>
<style>
    #div1{
        display:flex;
        flex-direction: row;
        justify-content: space-between;
        height:30px;
    }
    .inner2
    {
        background-color:yellow;
        flex-grow:1;
        flex-basis:auto;
        
    }   
    #div3{
        background-color:green;
        width:50%;
        margin-left:20px;
        margin-right:20px; 
    }
</style>

不更改提供的元素，实现：

<div id="div1">
    <div class="inner"> right </div>
    <div class="inner">  50%</div>
    <div class="inner">  left width:20px</div>
</div>
<script>
    var inners = document.getElementsByClassName("inner");
    inners[0].style.flexGrow=0.5; inners[0].style.backgroundColor="yellow";
    inners[2].style.flexGrow=0.5; inners[2].style.backgroundColor="yellow";
    
    inners[1].style.width="50%";
    inners[1].style.marginLeft="20px";
    inners[1].style.marginRight="20px";
    inners[1].style.backgroundColor="green";
</script>
<style>
    #div1{
        display:flex;
        flex-direction: row;
        justify-content: space-between;
        height:30px;
    }
</style>

效果：

待看：https://www.cnblogs.com/lynnmn/p/6262941.html
https://www.zhangxinxu.com/wordpress/2018/10/display-flex-css3-css/comment-page-1/?tdsourcetag=s_pcqq_aiomsg#flex-grow
2、实现函数一次调用
https://segmentfault.com/q/1010000011489774

问答题

什么是 FOUC？你如何来避免？

FOUC即无样式内容闪烁

引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的。

导入的话会等文档加载完之后再加载css样式文件，而link是顺序加载，这样页面就会等css下载完之后再下载html文件，这样就先布好了局，所以就不会出现focus闪烁问题

即，在IE中，CSS如果以@import方式导入的话，会等文档加载完成，才加载样式文件，所以出现FOUC。解决方法是以link的方式导入样式文件。

https://www.cnblogs.com/gxx129/p/10859117.html
https://blog.csdn.net/sinat_36414515/article/details/81290726
https://www.jianshu.com/p/92f459069488

清除浮动

浮动的意义是让文字环绕图片
浮动元素单独在一层，它们脱离了文档流，但后面的文字还是能识别到浮动元素的。
但是我们有办法可以让后面的元素感应到，比如给后面的元素设置clear：both，则后面的元素会换行布局。
消除浮动的影响无非是让后面的元素识别到float元素。
怎么样让后面的元素的识别float元素呢？
1、给父元素设置为float元素，这样它们在同一层了，但副作用明显
2、在浮动元素后放置clear：both 元素，这样父元素会感应到最后一个元素
3、给父元素设置overflow：hidden属性，不过也容易出bug
4、类似2，不过不是放置一个元素，而是由css生成一个伪元素

总结起来，分两类：