塊元素的行為是否就像它具有 100vw 寬度一樣？

Question

這兩個容器之間有什么深刻的區別嗎？ , 或者簡而言之是一樣的..

 <head> <style> * { margin: 0; padding: 0; } body { font-weight: bold; font-size: 30px; font-family: sans-serif; } div { padding: 10px; }.container-1 { background-color: tomato; }.container-2 { width: 100vw; margin-top: 20px; background-color: limegreen; } </style> </head> <body> <div class="container-1"> HELLO WORLD! (default width) </div> <div class="container-2"> HELLO WORLD! (vh width) </div> </body>

我想知道塊元素的行為是否就像它上面有 100vw 一樣。

Answer 1

塊元素的行為是否就像它具有 100vw 寬度一樣？

一點也不，塊元素的行為遵循以下規則：

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = 包含塊的寬度

如果所有邊距、邊框、填充都是 0 並且包含塊的寬度等於100vw那么您將看不到任何差異，但這是一種非常特殊的情況。

一個證明差異的基本示例：

 .box { height: 80px; background: red; margin: 10px; }

 <div class="box"></div> <div class="box" style="width: 100vw;"></div>

塊元素的行為是否就像它具有 100vw 寬度一樣？

問題描述

1 個解決方案

解決方案1
0 2022-12-09 20:38:32

塊元素的行為是否就像它具有 100vw 寬度一樣？

問題描述

1 個解決方案

解決方案1 0 2022-12-09 20:38:32

解決方案1
0 2022-12-09 20:38:32