深入了解 HTML 和 CSS(尺寸、背景效果與更多布局技巧)
在創建動態且響應式的網頁設計時，HTML 和 CSS 是不可或缺的工具。在這篇文章中，將深入探討一些常見但卻非常強大的 CSS 屬性，包括如何使用 100% 和 100vw 的區別、背景效果的應用、parallax 效果的實現、以及如何有效地使用 vw 和 vh 來進行響應式設計。這些技巧將幫助你提升網頁的視覺效果與用戶體驗。
1. 100% 和 100vw：它們有何區別？
在 CSS 中，100% 和 100vw 都用來設置元素的寬度，但它們的計算方式有所不同。了解它們的區別，能幫助你在布局中選擇最合適的單位。100%：相對於父元素的尺寸
當你使用 100% 設置元素的寬度或高度時，它是相對於父元素的尺寸來計算的。也就是說，元素將會填滿父容器的可用空間。
例子：
.container {
width: 80%;
}
.box {
width: 100%; /* 這裡的 100% 是指父元素 container 的 100% */
}
在上面的例子中，.box 的寬度會等於父元素 .container 的 100%。因此，.box 的寬度會隨著父元素的尺寸而變化。
100vw：相對於視口的寬度
vw（viewport width）是相對於視口的單位。1vw 等於視口寬度的 1%。因此，100vw 會使元素的寬度等於視口的整個寬度，無論父容器的寬度是多少。
例子：
.box {
width: 100vw; /* 這裡的 100vw 代表視口的寬度 */
}
這樣設置後，.box 的寬度將會與瀏覽器視口的寬度完全一致，這在做全屏背景或需要滿足視口寬度的設計時非常有用。
2. 背景效果：讓你的網站更加生動
CSS 的 background 屬性允許你為元素添加各種背景效果，包括顏色、圖片、重複模式、固定背景等。這些效果可以增強網頁的視覺吸引力。
background-color - 設置背景顏色
最基本的背景設置就是為元素設置背景顏色。
例子：
.box {
background-color: lightblue; /* 設置背景顏色 */
}
這樣，.box 元素的背景顏色會變為淺藍色。
background-image - 設置背景圖片
你可以使用 background-image 屬性為元素添加背景圖片，並且可以控制圖片的重複、對齊等。
例子：
.box {
background-image: url('path/to/image.jpg'); /* 設置背景圖片 */
background-size: cover; /* 背景圖片自動縮放以填充元素 */
background-position: center; /* 背景圖片居中顯示 */
}
這樣設置後，.box 會顯示背景圖片，並且圖片會被自動縮放以覆蓋整個元素，並且居中顯示。
background-attachment: fixed - 固定背景效果
background-attachment: fixed 用來創建固定背景效果，這個效果通常在創建 parallax（視差滾動）效果 時使用。
3. parallax 效果：打造動態視差滾動
parallax 是一種創建動態視覺效果的技術，使背景圖像在頁面滾動時移動速度與前景內容不同，產生深度感。這種效果非常吸引人，常用於現代網站設計中。
實現方法：使用 background-attachment: fixed
.parallax {
background-image: url('parallax-bg.jpg');
height: 100vh; /* 設置元素高度為視口高度 */
background-position: center;
background-attachment: fixed; /* 固定背景，實現視差效果 */
background-size: cover;
}
這樣，當用戶滾動頁面時，.parallax 元素的背景圖片會保持固定，而前景內容則會正常滾動，創造出視差效果。
4. vw 和 vh：視口單位的使用
vw（viewport width）和 vh（viewport height）是相對於視口尺寸的單位，讓你的元素能夠隨著視口的變化進行自動調整。這在實現響應式設計時非常有用。
vw - 相對於視口寬度
vw 是相對於視口寬度的百分比單位，1vw 等於 1% 的視口寬度。
例子：
.box {
width: 50vw; /* 設置寬度為視口寬度的 50% */
height: 100px;
}
在這個例子中，.box 的寬度會是視口寬度的一半，這讓你的元素可以隨著視口的變化而調整大小。
vh - 相對於視口高度
vh 是相對於視口高度的百分比單位，1vh 等於 1% 的視口高度。
例子：
.box {
height: 50vh; /* 設置高度為視口高度的 50% */
width: 300px;
}
這樣設置後，.box 的高度會是視口高度的一半，這對於創建全屏元素或響應式頁面非常有用。
小結
在這篇文章中，我們探討了 HTML 和 CSS 中一些強大的屬性和技巧，從 100% 和 100vw 的區別，到如何創建動態的背景效果，甚至實現引人注目的視差滾動效果。還有如何使用 vw 和 vh 來實現響應式設計，讓你的網站更加適應各種屏幕大小。
這些技巧可以幫助你設計出更加靈活且有吸引力的網站，並且提升用戶體驗。接下來會介紹CSS選擇器。
對於這類的撰寫方式習慣嗎?歡迎多多進行良性的知識交流喔!目前是在學習階段，大家有不同看法的話歡迎進行良性的知識交流!
大家可以考慮多多分享文章和考慮訂閱沙龍方案或贊助等喔!不過請注意不要違反著作權等行為。當然決定權都在於您，不會干涉您的任何決定。
提醒，文章僅供正當的知識參考，文章不負任何責任。
