%
在設定 width
height
時,會相對去看父層的長寬度。
假設我們有一個外框,它的長寬條件為: 500px
<div class="container">
<div class="box"></div>
</div>
.container {
width: 500px;
height: 500px;
border: 3px solid blue;
}
// box 是子層,來設定寬度各 50% 看看
.box {
background: red;
width: 50%;
height: 50%;
}
Learn More →
原理解釋:
container 的 width
/ height
為 500px
那麼 box 的長寬設定 50$ = 500 * 0.5 的意思,也就是 250px
vw、vh:
v = viewport,根據裝置的極限寬高來決定。
例如: 90vh,就是瀏覽器的 90% 高度
10vw,就是瀏覽器的 10% 高度
2022 網頁開發全攻略教程 / CSS篇章 - other
使目標元素透明度改變 opacity 可設定範圍: 0 ~ 1.0 // 0 為完全透明。 <h1>標題測試</h1> h1 { display: inline-block; background: red; }
Dec 10, 2022border-collapse: 假設我有個表格長這樣: <table> <tr> <th>標題一</th> <th>標題二</th> <th>標題三</th> </tr>
Dec 10, 2022在 CSS 製作時,可以被編輯的項目樣式: 以此 HTML ul 做範例: <ul> <li>2008:團團圓圓到台灣</li> <li>2013:圓仔出生</li> <li>還沒有其他熊貓</li> </ul>
Dec 10, 2022什麼是 default value 指 HTML Tag 本身具備的 CSS 效果: <h1>,本身的文字大小就比較大,font-size 就非常明顯。 <div>,本身具備 - display:block;等。 透過 box-model 瀏覽並且觀察 Tag 本身的 default styling
Dec 10, 2022or
By clicking below, you agree to our terms of service.
New to HackMD? Sign up