每日一步: css 強制換行word-wrap: break-word

限制文字內容寬度，當文字內容達寬度限制時，強制其換行之css設定:

word-wrap: break-word;

每日一步: css box-sizing效果

box-sizing:border-box設定讓在設定padding時不會影響總寬高，而是內部調整，例如原本width:100px，設定padding-left:5px時，總寬會變105px，若是在box-sizing:border-box設定底下，總寬會是100px，含padding-left:5px

每日一步: css 消除inline-block的元素間距

將父元素的font-size設為0即可

每日一步: css 讓border重疊，並且同時可正常顯示focus特效方法

讓border重疊可透過設定負值的margin，例如div1的右邊界要與div2的左邊界重疊，可設定div1的margin-right:-1px或是div2的margin-left:-1px即可

focus狀態邊框特效在邊界重疊的情況下通常會有一方會被遮住，解法為將被遮住的元素position設為relative，然後設定該元素的focus狀態變更其z-index，使其比另一個元素高即可，例如:

div1的右邊界和div2的左邊界重疊，focus div1時右邊界特效被div2遮住，此時設定div1的position為relative，然後設定div1:focus { z-index:n;}，n要比div2的z-index高，即可正常顯示。

每日一步: padding單位用%的意義

padding: 20%

padding屬性單位用%給定時，其基準為父元素的寬度，不論top,bottom,left,right皆同

每日一步: css 單位 vw

vw單位的意義:

width:20vw;

讓元素寬度等於viewport的20%;

javascript let 和 var 的差別

1、scope的差別

在最外層宣告的時候，兩者都會是global scope，除此之外let範圍只在' { } ' block內部, 需要注意的是若是let使用為迴圈的遞增或遞減變數，每次執行迴圈的該變數都是獨立的scope，var 則是以function為層級

2、let不會hoist

var 的宣告會hoist，let不會

來看例子:

function test ( ) {

        //alert(y)可正常運作

        //alert(x)會出錯，x is not defined

        for(var i=0 ; i<2 ; i++ ) {

    

        //alert(y)可正常運作

        //alert(x)會出錯，x is not defined

        let x;

        var y;

        //alert(x)可正常運作

   }

}

迴圈的情況

for (let i = 1; i <6; i++) {
    setTimeout(function() {
        console.log(i)
    }, i * 1000)
}

每次的i都是獨立的

對照組

for (var i = 1; i <6; i++) {
    setTimeout(function() {
        console.log(i)
    }, i * 1000)
}

是同一個i