css - 网站使用 960.gs 什么 css 规则负责 div 填充 100% 屏幕宽度

Question

嗨，我正在尝试学习 CSS，并且一直在查看网站的来源以了解它在实践中的工作原理。前几天偶然发现了960网格系统，发现一个非常漂亮的网站设计是使用960gs框架>> OneHub

在这个阶段，在我对 CSS 有更好的理解之前，我认为使用 CSS 框架对我来说并不是很明智。所以我的问题是关于他们如何在网站上实现居中的内容框，背景填充以扩展到您的浏览器宽度。

我安装了萤火虫，但我不知道为什么他们网站上的 div 如此。#gutter, #navigation 将扩展以填充整个浏览器宽度。我看不到这些 div 是如何计算它们的宽度值的，因为似乎没有一个子元素足够大，或者没有一个规则会迫使这些 div 变大。

我不明白宽度是 100%，我本来希望在 CSS 的某处看到一些边距自动规则或宽度 100%，但我找不到它。其他使用 960gs 的网站可能也在做同样的事情，但我只是将这个网站用作参考，因为我认为它的设计很好。

我希望我的问题是有道理的，并感谢您对此提供的任何帮助

Answer 1

无样式的 DIV 将始终填充 100% 的父元素。如果那是主体，或者填充浏览器窗口的其他元素，它将填充 100%。

它被称为“块级”元素。所有块级元素都以这种方式运行：div、p、form、ul 等。

Answer 2

如果没有为宽度指定规则，则默认宽度为 100%——也就是说，它会扩展以填充其父元素。在这种情况下，父元素是 body，也是视口的全宽。

Answer 3

对于 960 网格系统，当您说整个浏览器宽度时，您的意思是 960 像素。同意上面的rpflo。