什么决定了页眉的高度和宽度？

Question

在此主题中：http://ironsummitmedia.github.io/startbootstrap-freelancer/ 如果您 "inspect element" 在绿色部分（该元素被命名为 <header> ) 并查看其所有属性的列表，您会注意到它的高度和宽度像素值会随着您重新调整 window 的大小而动态变化。

这些值从何而来？

即如果我要在它上面漂浮一些东西来覆盖，我如何确保它保持相同的高度？

这是我在 chrome 检查时所指的值：

Answer 1

没什么神奇的。您正在查看 计算出的盒子模型样式 ，当您接近 window 调整大小时，它们是动态的。如果您查看 styles 中的 <header> 元素，您会注意到它是一个经典的 HTML5 <header> 块元素，其中包含 auto ("100%") 默认宽度（像所有块级元素一样）。调整 window 的大小，您将获得当前计算的元素大小。

|    this is some long content here    |  
|                [IMAGE]               |  -- responsive width since `width:auto;`
|             more nice text           |  -- height dictated by content

对比：

|  this is  |  
|   some    |
|   long    |
|  content  |  -- responsive width since `width:auto;`
|   here    |
|  [IMAGE]  |  
| more nice |  
|   text    |  -- height dictated by content

什么决定了页眉的高度和宽度？

What determines the header's height and width?

html

css

twitter-bootstrap

twitter-bootstrap-3