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

2020-05-09 本文已影响0人枫叶落尽

数组一维化

三道编程题：
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生成一个伪元素

总结起来，分两类：

在容器内放一个不可见，但能识别浮动元素的元素，用来撑起容器。
设置容器元素，让它能够感应到内部浮动元素，但要达到这样的目的，对容器元素的属性必须进行设置，难免引入新的外层布局问题。
http://www.ruanyifeng.com/blog/2009/04/float_clearing.html

https://www.zhangxinxu.com/wordpress/2010/01/css-float%E6%B5%AE%E5%8A%A8%E7%9A%84%E6%B7%B1%E5%85%A5%E7%A0%94%E7%A9%B6%E3%80%81%E8%AF%A6%E8%A7%A3%E5%8F%8A%E6%8B%93%E5%B1%95%E4%B8%80/
https://blog.csdn.net/u012468376/article/details/79458948
https://www.w3h5.com/post/72.html

:after伪类+content内容生成经典应用举例
https://www.zhangxinxu.com/wordpress/2010/09/after%E4%BC%AA%E7%B1%BBcontent%E5%86%85%E5%AE%B9%E7%94%9F%E6%88%90%E5%B8%B8%E8%A7%81%E5%BA%94%E7%94%A8%E4%B8%BE%E4%BE%8B/

为什么js中要用void 0 代替undefined，还是有特别的含义呢
https://blog.csdn.net/qq_33834489/article/details/81540018

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

猜你喜欢

热点阅读