Форум
Новости
От автора
Прежде чем говорить о работе с размерами элементов их расположении, полях и отступах, расскажу немного о самих элементах, точнее об их типах.
Все элементы (теги) можно разделить на две категории: Блочные и строковые.
Чем они отличаются?
Думаю, сами названия уже говорят о различиях. Блочные или боксовые элементы - это контейнеры, прямоугольные области на мониторе компьютера которым без труда и вело-изобретательства можно присвоить определенное положение, размер, вложить в них другие блоки, определить расположение относительно друг друга. А строковые элементы располагаются в одну сроку, выравниваются по её базовой линии и как правило служат для форматирования и редакции текста.
К блочным (block) элементам относятся:
<div>, <dl>, <form>, <h1>- <h6>, <hr>, <noscript>, <ol>, <p>, <pre>, <table>, <ul>…
К строчным (inline) элементам относятся:
<a>, <br>, <cite>, <code>, <em>, <img>, <input>, <label>, <select>, <span>, <strong>, <sub>, <sup>, <textarea>…
Основные отличия от элементов строкового и блочного типа заключаются в том что:
Боксовые элементы могут содержать в себе другие элементы, как блочного, так и строкового типа. Строчные же элементы могут включать в себя только строчные элементы.
На примере:
<div>Боксовые элементы, по умолчанию, располагаются относительно друг друга вертикально, т.е. в начале и конце блока происходит "перенос строки", а строковые элементы располагаются горизонтально, перенос строки происходит только в том случае если это необходимо.
По умолчанию блочные элементы имеют ширину 100% и тем самым оставляют за собой все пространство по горизонтали, у строковых же элементов ширина определяется содержанием.
Думаю, на примере будет понятнее.
Свойства CSS width и height - устанавливают ширину и высоту блочных элементов. Ширина и высота элемента может быть задана следующими способами:
Пример:
Если содержание элемента превышает его указанный размер, то в некоторых браузерах элемент автоматически присвоит значение auto, а в некоторых содержание "выползет" за пределы элемента.
Что делать с содержанием элемента, если оно превышает его размер?
Если элементу присвоены точные значения высоты и ширины (height, width) а его содержание, например длинный текст, не вмещается в указанных пределах, то по умолчанию такой элемент растягивается до нужных размеров, что не всегда на руку веб-мастеру. На помощь приходит атрибут overflow, который указывает браузеру, что делать с элементом в таких случаях.
Свойство overflow может иметь следующие значения:
Пример:
Так как размеры элемента по умолчанию регулируются исключительно вложенным в него содержанием, текстом, графикой.. и т.д. то элементы становятся, вернее, остаются "резиновыми" и это хорошо! Но хорошо не во всех случаях.. иногда требуется ограничить эту "резиновость" конкретными размерами. Например, указать ячейке таблицы, что ты мол, независимо от твоего содержания, можешь быть по высоте не менее 50 пикселей, но и не более 200 пикселей.. определить, так сказать, диапазон её высоты или ширины.
Ниже перечисленные свойства CSS позволяют определить минимальные и максимальные размеры того или иного элемента
Эти свойства CSS, в свою очередь, могут выражаться в пикселях, процентах от размеров родительского элемента и none - без ограничений.
Пример:
Как Вы уже поняли не все браузеры одинаково интерпретируют как HTML теги, так и свойства CSS. Особым "невежеством" по отношению как к пользователям так и к веб дизайнерам отличился Internet Explorer 6 и его более ранние версии.. Впрочем, и в остальных браузерах далеко не всё проходит гладко. Отсюда необходимо сделать вывод, что прежде чем выкладывать ту или иную страницу в Интернет её необходимо просмотреть (протестировать) в различных браузерах и их версий. А совет заключается собственно в том, что хорошо бы было их иметь под рукой - в установленном виде на Вашем компьютере. Соберите свою "коллекцию" браузеров.
