SOURCE

// console.log('script start')
// let promise1 = new Promise(function(resolve) {
//     console.log('promise1')
//     resolve()
//     console.log('promise1 end')
// }).then(function() {
//     console.log('promise2')
// })

// setTimeout(function() {
//     console.log('setimeout')
// })

// console.log('script end')

// let obj = {a:1, b:2, c:3};
// let arr = [1, 2, 3, 4];
// for (let o in obj) {
//     // for - in 遍历对象的key
//     console.log('of is ', o);
// }

// for (let o of arr) {
//     console.log(' arr is ', o)
// }

// for (var i = 0; i < 10; i++) { setTimeout((i)=>{console.log(i)},1000) }

<div class="p-1">
    <div class="p-2">asdfasdf</div>
</div>

.p-1 {
    height: 200px;
    width: 100px;
    padding: 10px;
    transition: transform 0.3s ease;
    border-radius: 10px;
}

.p-1:hover {
    transform: translateX(50%);
    transition: transform 0.3s ease;
}

.p-2 {
    background: #ffffff;
}