Читать книгу Я верстальщик. Веб-верстальщик - Арсений Олегович Матыцин - Страница 4

Блочная верстка

В отличие от табличной, блочная верстка позволяет набрать необходимое количество элементов страницы без условностей и требований первого метода. Да и в целом этот тип можно отнести к инновационным. Наряду с блочной версткой стали активно использовать внешние файлы css, которые призваны были описывать внешний вид div-ов. Притом эта тенденция (выносить данные) дошла до того, что инлайновые стили стали неким моветоном. Лично я с этим конвейерным и неразумным подходом не согласен.

Разумно использовать внешние стили для повторяющихся элементов, для классов, для медиа запросов и во многих других случаях. Но если в конкретно этом span надо прописать color:red, зачем создавать отдельный класс или id и писать под него стили!?

Float:left

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

Float:left заставляет элемент отобразиться таким образом, чтобы предыдущий был по левую сторону от него.

Небольшой хак

Существует иной способ решить этот вопрос, переноса блоков. Достаточно сменить ему свойство display с дефолтного block на inline-block. Тогда браузер будет воспринимать данный div, как символ в предложении.

Данная тема постепенно приводит нас к каскадным стилям. О них я расскажу после того, как опишу работу с тегами.