CSS佈局與定位——height百分比設置無效/背景色不顯示

時間 2019-12-13

標籤 css 佈局定位 height 百分比設置無效背景顯示欄目 CSS 简体版

原文原文鏈接

CSS佈局與定位——height百分比設置無效/背景色不顯示html

html元素屬性width和height的值有兩種表達方式，一是固定像素如「100px」，一是百分好比「80%」，佈局

使用百分比的好處是元素會按父元素寬高自動調節大小，有更好的自適應性，htm

但因爲<body>元素默認寬度有效，默認高度無效，it

所以<div>（定位方式爲默認值static）父元素爲<body>時width="100%" height="100%"，其高度設置是無效的，io

如該<div>無內容，僅設置了背景色和邊框，則<div>背景顏色和邊框也不顯示。自適應

PS：當<div>的定位方式爲絕對定位或固定定位，即position屬性值爲absolute或fixed時，總結

父元素爲<body>時width="100%" height="100%"，其高寬設置均有效，默認爲當前窗口的寬高百分比，static

若設置了背景色和邊框，則<div>背景顏色和邊框都可顯示。di

absolute定位和fixed定位區別見【 CSS佈局與定位——Positioning(定位)四種定位方式要點總結】。position

相關標籤/搜索