尺寸樣式屬性介紹 屬性 | 值 |含義 | | height| auto：自動，瀏覽器會自動計算高度length：使用px定義高度%：基於包含它的塊級對象的百分比高度|設置元素高度 width |同上|設置元素的寬度 height屬性和width屬性 接下來讓我們進入 屬性、 屬性實踐，筆者用 屬性 ...
尺寸樣式屬性介紹
| 屬性 | 值 | 含義 |
|---|---|---|
| height | auto：自動，瀏覽器會自動計算高度length：使用px定義高度%：基於包含它的塊級對象的百分比高度 | 設置元素高度 |
| width | 同上 | 設置元素的寬度 |
height屬性和width屬性
- 接下來讓我們進入
height屬性、width屬性實踐，筆者用class屬性值為.box，給div標簽設置寬度和高度以及div標簽背景顏色。 代碼塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>尺寸樣式屬性</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>代碼塊
假設我們不給
div標簽設置寬度，會變成什麼樣呢？那咱們就試試看哦。代碼塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>尺寸樣式屬性</title>
<style>
.box{
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>結果圖
- 為什麼會這樣呢？其實是這樣的如果我們沒有給
div標簽設置寬度，div標簽將會自動的占用父元素的百分百的寬度，註意的是：高度和寬度是不一樣的哈，高度不會自動占用父元素的任何位置。 - 只有塊級元素才可以設置寬高度。
