2020-08-04 html的js位置 + css的flex实现九宫格 + JS的Array + 软技能的硬编码

2020-08-04 题目来源:http://www.h-camel.com/index.html

[html] 一般习惯把js写在</body>前,但有例外的情况吗?说说看

html文件的执行方式是自上而下,css在引入时,程序仍然会向下执行,js在引入时会中断线程,等待js加载完成后程序才会继续向下执行。所以通常情况下,js的脚本会被放在</body>之前的最后位置,这样dom在生成时就不会因为加载js而耗费时间更长。但是,一些需要访问dom元素的js脚本放在body之前,由于还没有渲染dom元素,会报错或无效。

那么原则是:页面效果实现类的js放在body之前,动作、交互、事件驱动等需要访问dom属性的js可以放在body之后</body>之前。

[css] 使用flex实现一个自适应的九官格

<!DOCTYPE html>
<html>
<style>
.blockDiv{
    width: 100%;
    display:flex;
    flex-wrap: wrap;
}
.block{
    width: calc(calc(100% / 3) - 10px);
    margin:5px;
    height:50px;
    box-sizing: border-box;
    border:1px  solid #000;
}
</style>
<body>
   <div class="blockDiv">
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
    </div>
</body>
</html>

微信开发中 可以看看这个 https://blog.csdn.net/saber123321/article/details/81988352

有几个常用的flex属性:

1.flex的排列方向 flex-direction: row|row-reverse|column|column-reverse; 水平起点左|水平起点右|垂直起点上|垂直起点下;

2.flex的换行 flex-wrap: nowrap|wrap|wrap-reverse; 不换行|换行,第一行在上|换行,第一行在下;

3.flex的水平排列方式 justify-content: flex-start|flex-end|center|space-between|space-around; 左对齐|右对齐|水平居中对齐|等间隔对齐

4.flex的垂直排列方式 align-items: flex-start | flex-end | center | baseline | stretch; 上对齐|下对齐|垂直居中对齐|文字基线|充满容器(未设置高度)

5.flex属性 是flex-grow放大比例, flex-shrink缩小比例 和 flex-basis占据空间的简写,默认值分别为0 1 auto。后两个属性可选

flex:none; == flex: 0 0 auto;

flex:auto; == flex: 1 1 auto;

[js] Array(3)和Array(3, 4)的区别是什么?

let arr1 = Array(3) // Array(3)为定义了一个长度为3的空数组

let arr2 = Array(3,4)// arr2 = [3,4]

[软技能] 你知道什么是硬编码吗?什么时候会用到硬编码呢?

硬编码和软编码的区别是:软编码可以在运行时确定,修改;而硬编码是不能够改变的。

在计算机程序或文本编辑中,硬编码是指将可变变量用一个固定值来代替的方法。用这种方法编译后,如果以后需要更改此变量就非常困难了。

例如: let a=2,b=2;

硬编码:if(a==2) return false;

不是硬编码 if(a==b) return true;

猜你喜欢

转载自blog.csdn.net/vampire10086/article/details/108356106