| |
|
|
| | В примерах стилей встретил такой вариант:
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
margin-left: 25px;
margin-top: 30px;
margin-right: 20px;
margin-bottom: 20px;
}
|
А в чем разница между html и body ? Это, как бы, одна территория, одна и та же площать страницы - зачем задаются отдельно разные условия? | |
| |
|
|
| |
|
|
| |
для: Владимир55
(15.03.2012 в 11:12)
| | | 1. <HTML>...</HTML> - это весь документ.
<BODY>...</BODY> - это часть документа, называемая телом документа.
2. В <HTML>...</HTML>, кроме тела документа <BODY>...</BODY>, входит обычно и заголовок документа - <HEAD>...</HEAD>
3. Так что "территории" - они немного разные: <BODY>...</BODY> - входит вовнутрь <HTML>...</HTML>:
-- если задать html ширину в 100%, а ширину body - 50%, то всякая длинная строка приблизительно посередине экрана обрежется и "переползёт" на следующую строку.;
-- а вот если наоборот при 100% ширины у html прописать 150% для ширины body, то появится горизонтальный скроллбар;
-- соответственно, отступы (margin и padding) - они суммируются.
4. Запустите следующий код и, надеюсь, понимание к вам придёт:
<!doctype>
<html>
<head>
<style>
html {
width: 100%;
height: 100%;
border: none;
margin: 0;
padding: 0;
background: silver;
}
body {
width: 89%; /* Не 90%, как вроде бы должно быть. Объяснение ниже. */
height: 84%; /* И здесь не 90%. См. там же. */
border: none;
margin: 5%;
padding: 0;
background: red;
}
</style>
</head>
<body>
</body>
</html>
|
5. "Комплектом" ширин/высот и отступов <HTML> и <BODY> для визуального оформления страниц пользуются редко, ибо неизвестно - какого размера окно откроет юзер.
Если размер будет малым, то могут появиться всякие ненужные скроллбары, толщина которых входит в ширину/высоту тега <HTML>, но не входит в высоту/ширину тега <BODY>.
И всё оформление "полетит"...
И вообще неизвестно - что там входит в ширину/высоту <HTML> и <BODY>- вроде бы всё возможное (бордеры, маргины, паддинги) обнуляешь, но при равных html, body {width: 100%} всё-равно "вылезает" горизонтальный скроллбар.
Потому я и указал в примере %% для тела документа заведомо меньшие, чтобы скроллбары не появлялись.
6. Обычно пользуются правилом html, body {height: 100%} для решения задач установления %% от высоты окна.
И совсем недавно я этот вопрос разъяснял - http://www.softtime.ru/forum/read.php?id_forum=4&id_theme=85542
PS. Всё вышенаписанное работает во всех браузерах по умолчанию (без <!doctype>), кроме MSIE.
Тому для "нормальной работы" обязательно нужен <!doctype>.
Без <!doctype> MSIE начинает чудить непредсказуемо :-) | |
| |
|
|
| |
|
|
| |
для: ЯСА
(15.03.2012 в 12:23)
| | | Спасибо!
Графический пример просто замечательный! | |
| |
|
|
| |
|
|
| |
для: Владимир55
(15.03.2012 в 13:06)
| | | Надо было добавить:
<body onclick="alert ('BODY')">
<div style="position: absolute; width: 30px; height: 30px; top: 200px; left: 5px; background: yellow"></div>
<div style="position: absolute; width: 30px; height: 30px; top: 0; left: 0; background: aqua"></div><!-- Странные нули, правда? -->
<div style="position: absolute; width: 30px; height: 30px; background: violet"><!-- А здесь top и left не указаны. -->
<div style="position: relative; width: 30px; height: 30px; top: -30px; left: -30px; background: lime"></div>
</div>
<h1 style="text-align: center; padding-top: 20%">Покликай по разным цветам (включая серый)!</h1>
</body>
|
"Умная мысля приходит опосля"(с) | |
| |
|
|
| |
|
|
| |
для: Владимир55
(15.03.2012 в 11:12)
| | | сотру-ка я свой нелепый ответ ) | |
| |
|
|
