屬性 | 值 | 含義 |
---|---|---|
height | auto:自動,瀏覽器會自動計算高度length:使用px定義高度%:基於包含它的塊級對象的百分比高度 | 設置元素高度 |
width | 同上 | 設置元素的寬度 |
height
屬性、width
屬性實踐,筆者用class
屬性值爲.box
,給div
標籤設置寬度和高度以及div
標籤背景顏色。代碼塊html
<!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
標籤設置寬度,會變成什麼樣呢?那我們就試試看哦。ui
代碼塊code
<!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>
結果圖htm
div
標籤設置寬度,div
標籤將會自動的佔用父元素的百分百的寬度,注意的是:高度和寬度是不同的哈,高度不會自動佔用父元素的任何位置。