尺寸樣式屬性介紹
| 屬性 | 值 | 含義 |
|---|---|---|
| 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 >
</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 >
</div>
</body>
</html>
-
結果圖
- 為什么會這樣呢？其實是這樣的如果我們沒有給
div標簽設定寬度，div標簽將會自動的占用父元素的百分百的寬度，注意的是：高度和寬度是不一樣的哈，高度不會自動占用父元素的任何位置， - 只有塊級元素才可以設定寬高度，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/106462.html
標籤：Html/Css
上一篇：前端之css（一）