1 圖檔拉近
緣起是看到了下面的圖檔，我發現當滑鼠懸浮的時候，發現他是可以拉近的，也就是圖檔的寬高不變，但是圖檔被放大了
起初我以為是有一個這樣的方法，可以實作這個操作，但是查找了很多網站都沒有找到。
後來自己慢慢的摸索，才了解了其中的奧妙
子盒子和父盒子的大小一樣大，為了能展現出父子盒子，我讓父盒子略大，并未黃色，子盒子為白色
當滑鼠懸浮到該子盒子的時候，子盒子被放大（scale），如下圖
同時，我設定子盒子超出父盒子的部分隐藏（overflow:hidden），這樣我隻能看到黃色部分，但是圖檔卻被放大了，就看到了最初的效果，圖檔好像被拉進了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="mystyle.css"/>
</head>
<body>
<div class="div1">
<img src="../作業2/images/5.jpg" class="div2">
</div>
</body>
<style type="text/css">
.div1{
margin-top: 50px;
margin-left: 50px;
height:400px;
width: 400px;
border: 1px solid red;
overflow: hidden;
}
.div2{
width: 400px;
height: 400px;
background-color: #0000FF;
cursor: pointer;
}
.div2:hover{
transform: scale(2);
}
</style>
</html> 這樣似乎太突兀了，我們加一個實作的時間 1s transition: 1s;
這樣就舒服多了
寫這一篇部落格，我發現這個圖檔功能太簡單了。我自己用vue做的時候，用的是@mouseover @mouseout 需要兩個方法
讓其有1s動畫效果的時候，我用的是根據類名擷取元素，然後滑鼠懸浮的時候給他加上動畫的效果。
但是動畫的效果預設是不會儲存的，間隔一秒後又會回到初始化的狀态，是以又加了一句animation-fill-mode:forwards，讓其保持動畫的狀态。
寫這篇部落格之後，原來隻需要幾行代碼就解決了！
2 全屏背景
<template>
<div id="app">
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
<style>
body {
margin: 0;
background: #e8e8e8 url('@/assets/oprea_background02.png') center bottom;
/* 設定背景圖檔會不會随着螢幕滾動 */
background-attachment: fixed;
/* 此時會保持圖像的縱橫比并将圖像縮放成将完全覆寫背景定位區域的最小大小。 */
background-size: cover;
/* 去掉好像也沒什麼 */
display: flex;
/* 設定height:100vh，能夠保證元素無論是否有沒有内容，高度都等于螢幕高度。 */
min-height: 100vh;
flex-direction: column;
}
</style> 2.1 background-attachment
background-attachment設定背景圖像是否固定或者随着頁面的其餘部分滾動。
scroll就是說，這個背景圖檔不是固定的，會随着頁面高度的改變而變
fixed意味着，圖檔是固定的，不會随着頁面高度的改變而改變
| 值 | 描述 |
| scroll | 背景圖檔随着頁面的滾動而滾動，這是預設的。 |
| fixed | 背景圖檔不會随着頁面的滾動而滾動。 |
| local | 背景圖檔會随着元素内容的滾動而滾動。 |
| initial | 設定該屬性的預設值。 |
| inherit | 指定 background-attachment 的設定應該從父元素繼承。 |
2.2 background-size
| 值 | 描述 |
| length | 設定背景圖檔高度和寬度。第一個值設定寬度，第二個值設定的高度。如果隻給出一個值，第二個是設定為 auto(自動) |
| percentage | 将計算相對于背景定位區域的百分比。第一個值設定寬度，第二個值設定的高度。如果隻給出一個值，第二個是設定為"auto(自動)" |
| cover | 此時會保持圖像的縱橫比并将圖像縮放成将完全覆寫背景定位區域的最小大小。 |
| contain | 此時會保持圖像的縱橫比并将圖像縮放成将适合背景定位區域的最大大小。 |
2.3 display:flex;
彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成。
彈性容器通過設定 display 屬性的值為 flex 或 inline-flex将其定義為彈性容器。
彈性容器内包含了一個或多個彈性子元素。
不加display:flex
加上display:flex
還是挺有用的以前一直用，float:left，float:right解決布局，現在又學到了一個方法。
2.4 flex-direction
flex-direction 屬性規定靈活項目的方向。
**注意：**如果元素不是彈性盒對象的元素，則 flex-direction 屬性不起作用。
本來是按行排序的，flex-direction可以靈活的排序，可以按列排序，也可以按行反着來
一些效果如下：
2.5 100vh
vh就是目前螢幕可見高度的1%，也就是說
height:100vh == height:100%;
但是當元素沒有内容時候，設定height:100%，該元素不會被撐開，此時高度為0，
但是設定height:100vh，該元素會被撐開與螢幕高度一緻。
對比
100%