веб-сайт, использующий 960.gs, какое правило CSS отвечает за div, заполняющие 100% ширины экрана - PullRequest
5 голосов
/ 08 июня 2009

Привет. Я пытаюсь выучить CSS и искал источник веб-сайтов, чтобы узнать, как он работает на практике. Я наткнулся на систему сетки 960 на днях и нашел действительно красивый дизайн сайта, использующий фреймворк 960gs >> OneHub

На данном этапе, я не думаю, что для меня было бы очень разумно использовать CSS-фреймворк, пока у меня не появится лучшее понимание CSS. Поэтому мой вопрос касается того, как они достигли централизованного поля контента на веб-сайте с фоном, который заполняется, чтобы расширяться до ширины вашего браузера.

У меня установлен firebug, и я не могу понять, почему divs на их сайте, например. #gutter, #navigation развернется, чтобы заполнить всю ширину браузера. Я не понимаю, как эти div вычисляют значение ширины, потому что кажется, что ни один из дочерних элементов не является достаточно большим или не имеет правила, которое заставляло бы эти div увеличиваться.

Я не понимаю, как ширина равна 100%, я бы ожидал увидеть какое-то автоматическое правило поля или ширину 100%, указанное где-то в CSS, но я не могу его найти. Другие веб-сайты, использующие 960gs, могут делать то же самое, но я просто использовал этот сайт для справки, так как считаю, что он имеет хороший дизайн.

Я надеюсь, что мой вопрос имеет смысл, и спасибо за любую помощь с этим

Ответы [ 3 ]

7 голосов
/ 08 июня 2009

DIVs без стиля всегда будут заполнять 100% родительского элемента. Если это тело или другой элемент, который заполняет окно браузера, он заполнится на 100%.

Это называется элементом уровня блока. Все элементы уровня блока ведут себя следующим образом: div, p, form, ul и т. Д.

2 голосов
/ 08 июня 2009

Если вы не укажете правило для ширины, ширина будет по умолчанию 100%, то есть она расширяется, чтобы заполнить свой родительский элемент. В этом случае родительским элементом является тело, которое также является полной шириной области просмотра.

0 голосов
/ 21 августа 2009

В системе сетки 960, когда вы говорите всю ширину браузера, вы имеете в виду 960 пикселей. Согласитесь с rpflo, выше.

...