所以，我有一個 html 檔案，檔案的 BODY 小于 HTML 標簽。
| 顏色： | 元素 |
|---|---|
| 紫色的 | 體內的div |
| 綠 | 身體 |
| 橘子 | HTML |
| 圖書館： |
|---|
| 水.css |
代碼：
* {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
* {
border:1px solid red;
}
#app,body,html {
height:100%;
width:100%;
margin:0;
padding:0;
}
#app {background:purple;}
body {background:green;}
html {background:orange;}<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
</head>
<body>
<div id="app">
</div>
</body>
</html>預期結果：
我得到的：
uj5u.com熱心網友回復：
除錯步驟：
您需要學習在瀏覽器中使用開發者工具。在 Chrome 中，執行以下操作：
- 右鍵單擊紫色元素
- 選擇“檢查”
- 滾動到“樣式”窗格的底部。
您將看到布局顯示內容的寬度和高度以及邊距、邊框、填充等。您將看到內容區域設定為 800 像素。如果您還在Elements窗格中選擇“body”元素，您將看到 body 的最大寬度設定為 800px。如果您搜索鏈接的 CSS 檔案 (water.css)，800您還會看到它的最大寬度設定為 800 像素。如果您不希望它是 800px，則需要更改或覆寫它。
優先順序：
此外，以防萬一您不知道，當您有沖突的樣式時，代碼中最后的樣式優先。因此，如果您首先擁有指向 water.css 檔案的鏈接（使用 max-width: 800px），然后在您自己的 CSS 中使用 max-width: 100% 覆寫，則您的將優先。另一方面，如果您首先擁有自己的樣式，其次是 water.css，則 water.css 樣式將優先。
uj5u.com熱心網友回復：
在css下面添加
身體{高度：適合內容；}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/337321.html