Почему я должен использовать контейнерный div в HTML? - PullRequest
Новая
       12

Почему я должен использовать контейнерный div в HTML?

63 голосов
/ 10 декабря 2008

В настоящее время я изучаю html / css и заметил, что распространенным методом является размещение общего контейнера div в корне тега body: 

<html>
  <head>
    ...
  </head>
  <body>
    <div id="container">
      ...
    </div>
  </body>
</html>

Есть ли веская причина для этого? Почему css не может просто ссылаться на тег body?

Ответы [ 9 ]

60 голосов
/ 10 декабря 2008

Контейнерный блок, а иногда и контентный блок, почти всегда используются для более сложных стилей CSS. В некоторых случаях тег body является особенным. Браузеры не воспринимают это как обычный div; его положение и размеры привязаны к окну браузера.

Но контейнерный div - это просто div, и вы можете оформить его с полями и границами. Вы можете задать ему фиксированную ширину, и вы можете центрировать его с помощью margin-left: auto; margin-right: auto.

Кроме того, контент, например, уведомление об авторских правах, может выходить за пределы контейнера div, но не может выходить за пределы тела, допуская контент за пределами границы.

10 голосов
/ 10 декабря 2008

Этот метод позволяет вам более гибко стилизовать весь ваш контент. Эффективно создав два контейнера, которые вы можете стилизовать. Тег HTML Body, который служит вашим фоном, и тег div с идентификатором контейнера, в котором содержится ваш контент.

Это позволяет вам размещать содержимое на странице, при этом стилизуя фон или другие эффекты без проблем. Думайте об этом как «Рамка» для контента.

2 голосов
/ 18 июня 2010

Это одна из самых больших вредных привычек, которые совершают передовые кодировщики.

Все ответы выше меня неверны. Тело принимает ширину, поля, границы и т. Д. И должно действовать как ваш начальный контейнер. Элемент html должен действовать как фоновый «холст», как и предполагалось. На десятках сайтов, которые я сделал, мне приходилось использовать контейнерный div только один раз.

Я бы хотел, чтобы те же самые кодеры, использующие контейнеры div, также засоряли свою разметку элементами div внутри div - везде.

Не делай этого. Используйте divs экономно и стремитесь к наценке.

- = - = - ОБНОВЛЕНИЕ - Не уверен, что не так с SO, потому что я могу отредактировать этот ответ 5 лет назад, но я не могу ответить на комментарии, так как он говорит, что мне нужно 50 Rep, прежде чем я смогу это сделать. Соответственно, я добавлю свой ответ к полученным ответам здесь. - = - = -

Я только что нашел это спустя годы после моего ответа и вижу, что есть некоторые последующие ответы. И, конечно, ты шутишь?

Установленный сайт-заменитель, который вы нашли для моего домена, который я никогда не утверждал, был моей разметкой или стилем, или даже упоминался в моем сообщении, был очень простой установкой CMS без единого слова контента (так много сказано на домашняя страница). Это была не моя разметка и стиль. Это был шаблон по умолчанию для Silverstripe. И я не беру на это должное. Это, пожалуй, один из двух примеров, о которых я могу подумать, что потребуется контейнер div.

Пример 1: универсальный шаблон, разработанный для размещения неизвестных. В этом случае вы видели шаблон CMS по умолчанию, в котором есть div внутри divs внутри divs.

Ужас.

Пример 2. Макет из трех столбцов, позволяющий правильно очистить нижний колонтитул (я думаю, что это был, вероятно, сценарий, в котором мне нужен контейнер div, трудно запоминающийся, потому что это было много лет назад.)

Я только что создал (еще не закончил) тему для своего домена и начал загружать контент. Для этого легко достижимого примера семантической разметки, нажмите на ссылку.

http://www.bitbeyond.com

Честно говоря, я озадачен тем, что люди думают, что вам на самом деле нужен контейнерный div, и начинайте с одного, прежде чем даже пытаться просто телом. Тело, как я слышал от одного из первоначальных авторов спецификации CSS, было задумано как «начальный контейнер».

Разметку следует добавлять по мере необходимости, а не потому, что это именно так, как вы видели.

1 голос
/ 30 января 2013

Я знаю, что это старый вопрос, но я столкнулся с этой проблемой, самостоятельно переделывая веб-сайт. Трой Далмассо заставил меня задуматься. Он делает хорошую мысль. Итак, я начал смотреть, смогу ли я заставить его работать без контейнера div.

Я мог бы, когда я установил ширину тела. В моем случае до 960px.

Это CSS, который я использую: 

html {
  text-align:center;
}

body {
  margin: 0 auto;
  width: 960px;
}

Это красиво центрирует встроенные блоки, которые также имеют фиксированную ширину.

Надеюсь, это кому-нибудь пригодится.

1 голос
/ 18 июня 2010

Некоторые браузеры ( Internet Explorer) не поддерживают определенные свойства тела, в частности width и max-width.

1 голос
/ 10 декабря 2008

Наиболее распространенные причины для меня таковы:

  1. Макет может иметь фиксированную ширину (да, я знаю, я много работаю для дизайнеров, которые любят фиксированную ширину), и
  2. Таким образом, макет можно отцентрировать, применив text-align: center к телу, а затем margin: auto слева и справа от div контейнера.
0 голосов
/ 04 февраля 2017

Большинство браузеров по умолчанию принимают размер веб-страницы. Таким образом, иногда страница не будет отображаться одинаково в разных браузерах. Таким образом, с помощью пользователя можно изменить для конкретного элемента HTML. Например, пользователь может добавить поля, размер, ширину, высоту и т. Д. Конкретного тега HTML.

0 голосов
/ 28 сентября 2015

Ну

Контейнер div очень полезен, потому что если вы хотите, чтобы сайт был центрирован, вы просто не можете сделать это только с помощью body или html ... Но вы можете, с помощью div. Почему контейнер? Его обычно используют только потому, что сам код должен быть чистым и читаемым. Так что это контейнер ... Он содержит весь веб-сайт, на случай, если вы хотите возиться с ним:)

Удачи

0 голосов
/ 17 сентября 2015
Теги

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...