Параметры css width и height для задания размеров элементов html страницы. Блочная верстка плавающих блоков DIV Clear FIX Задание размеров блоков

Описание

Устанавливает ширину блочных или заменяемых элементов (к ним, например, относится тег ). Ширина не включает толщину границ вокруг элемента, значение отступов и полей.

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

Синтаксис

width: значение | проценты | auto | inherit

Значения

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. При использовании процентной записи ширина элемента вычисляется в зависимости от ширины родительского элемента. Если родитель явно не указан, то в его качестве выступает окно браузера.

Auto Устанавливает ширину исходя из типа и содержимого элемента. inherit Наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

Результат данного примера, как он отображается в браузере Safari показан на рис. 1.

Рис. 1. Ширина блока

Объектная модель

document.getElementById("elementID ").style.width

Браузеры

Браузер Internet Explorer 6 некорректно определяет width как min-width . В режиме совместимости (quirk mode) Internet Explorer до версии 8.0 включительно неправильно вычисляет ширину элемента, не добавляя к ней значение отступов, полей и границ.

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

На какие типы делятся элементы

Дело в том, что не все фрагменты на веб-странице – блоки. Элементы вообще делятся на блочные и строчные. Вторые могут спокойно записываться в одну строку и при этом им не нужно ничего дополнительно прописывать. Простой пример строчного элемента – ссылка. На одной строке может быть сколько угодно ссылок, пока они будут помещаться на ней.

Блочные элементы имеют абсолютно другое поведение. Без дополнительных манипуляций они не смогут стать в один ряд. Пример такого блока – абзац, который задается тегом p. Так вот, зачем я вам все это говорю? Это сказано для того, чтобы вы понимали – размер нужно задавать только блочным элементам, что мы и будем делать в этой статье.

Рис. 1. Основные свойства, которые помогают задать размер

Простые свойства для размеров

Самые простые свойства, которыми можно записать размеры – это width и height. Означают они, соответственно, ширину и высоту. К ним также можно дописывать префиксы min- и max-. В таком случае будет задаваться минимальная и максимальная ширина или высота соответственно.

Значения можно записывать в пикселях или в процентах. Иногда еще используется относительная единица em (высота шрифта), но обычно с ее помощью определяется величина текста. По умолчанию все сетки (главные структурные блоки шаблона), в которых размеры определяются в процентах, называют резиновыми. Также процентная запись помогает легко адаптировать шаблон, что тоже очень важно.

Размер в пикселях

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

#container{ width: 1000px; }

Если записано так, то ширина контейнера не будет меняться ни под каким предлогом. При изменении масштаба или уменьшении окна она будет оставаться прежней. Размер сайта не уменьшится и при необходимости появится горизонтальная полоса прокрутки.

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

И все же умение сетки сайта адаптироваться под новые экраны имеет сегодня огромную роль, потому что мобильный трафик растет. В связи с этим последние годы все чаще главный контейнер для каркаса сайта получает не жесткую ширину. Например, так:

#container{ max-width: 1320px; }

И что это значит? А то, что при необходимости блок будет уменьшаться. Если сжать окно, то он тоже уменьшится. В то же время, если разрешение экрана позволяет, ширина будет составлять 1320 пикселей ровно. Уменьшая окно вы не увидите горизонтальный скролл.

Однако тут же можно задать еще и минимальную ширину. Если блоку записать это свойство, то он не будет становиться уже, чем указанное значение. Например:

#container{ min-width: 600px; }

Если ширина окна станет меньше 600 пикселей, то блок перестанет сжиматься и появиться та самая горизонтальная полоса прокрутки.

Размер в процентах

Задавать величину в процентах становится все более популярным. При грамотном использовании это может принести отличное отображение сайта на разных устройствах.

К примеру, вы захотели на своем сайте сделать слева боковую колонку, а справа – область с основным содержимым, где будет выводиться основная текстовая информация. Например, статья, каталог товаров или темы на форуме. Для начала нужно определить, какие размеры вы хотите дать примерно этим контейнерам.

#sidebar{ float: left; width: 28%; } #content{ float: right; width: 62%; }

В итоге сайдбар получит 28% ширины родительского элемента (а в нашем случае это общий контейнер), а основной блок – 62%. Их общая ширина составит 90%. Остальные 10 оставим на различные внешние и внутренние отступы, рамки и т.д.

Рис. 2. Резиновые блоки изменяют свои размеры при уменьшении окна в браузере

Как влияют отступы на размеры блоков

Когда вы задаете ширину какому-то блоку с помощью свойства width, это может быть далеко не окончательное значение. Дело в том, что так мы определяем ширину только той части, в которй непосредственно есть содержимое. Нужно помнить, что в css padding увеличивает размер блока, так же, как и рамка (border).

Допустим, возьмем боковую колонку. Мы дали ей 28% от всей ширины контейнера. Но чтобы содержимое в сайдбаре не прилипало к краям, ем нужно дать кое-какие отступы. Также, возможно, вы захотите добавить боковой колонке рамочку.

#sidebar{ padding: 10px 20px; border: 2px solid black; }

О преимуществах div"ной верстки перед табличной - никому наверное рассказывать не надо. Все это уже давно поняли и перешли на них с таблиц. Ну а те кто не перешел - вскоре поймут свои ошибки и это сделают. Но как и в любом занятии - тут также есть свои подводные камни. То дивы ведут себя не так как надо, то не получается сверстать какую нибудь определенную структуру, преград много, а верстальщик всегда один…

Данный пост предназначен скорее для начинающих, но вдруг и профи найдут тут что-то интересненькое. Так что давайте приступим уже к делу!

Об этом стоит всегда помнить

Основные принципы таковы: для отступов используем только padding и margin (в зависимости от потребности) - делать отдельный 20 пиксельный div вовсе не обязательно, ограничиваем вложенность до минимума, не переусердствуем с position:relative и последующими смещениями блока (при неправильном использовании может привести к получасовой правке целого кода), активно пользуемся z-index для достижения нужного эффекта.

FAQ

- Как выровнять div по центру? Одно из решений выглядит следующим способом - задаем margin-left и margin-right как auto (или еще проще - margin:0 auto;)

- Как позиционировать элементы находящиеся в div по вертикали? Зависит от элемента, например для текста хватит всего лишь указания vertical-align:middle, а для картинки нужно прописать line-height:Npx.

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

- Смещать блок при помощи margin или position:relative в связке со смещениями по горизонтали и вертикали? Конечно же в данных случаях надо использовать margin. Правда как и везде - все зависит от конкретного случая, но в основном следует пользоваться все таки margin.

- Как растянуть div по содержимому блока? Для этого надо прописать height: auto;

Как растянуть div по высоте родителя, который в свою очередь растягивается по высоте содержимого div"a находящегося внутри него, рядом с первым div"ом? Div"у с контентом задаем height: auto, двум остальным дивам height: 100% и display: table;

- Как сделать div невидимым? При помощи манипуляций свойством display. Для невидимости выставляем его на none.

- Как сделать прокрутку контента в div со статической высотой? Прописываем в свойствах overflow:scroll.

- Как отобразить (к примеру) тэг «a» как div (блок)? В свойствах задать высоту и ширину и выставить display:block;

Вот и все, что нужно знать чтобы безболезненно верстать на div"ах. На самом деле. Ну если всплывут еще какие нибудь вопросы, тогда тут сразу же появятся и ответы! А вообще-то тут нечего боятся - пол часа тренировок и вы уже профи! Так что отставляйте эти устаревшие table - и переходите на новую ступень эволюции!

Теги: faq, div, верстка, самоучитель

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

Высота и ширина блока в CSS.

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

Высота блока в CSS задается при помощи команды height: auto|<высота в единицах измерения>|inherit и как вы уже поняли мы можем задать высоту блока при помощи команды auto мы даем команду браузеру что он сам может определить размер блока и таким образом блок будет такого размера чтобы поместить все элементы и не больше.

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

Также мы можем задать размер относительно родительского элемента и для этого нам нужно использовать проценты. Давайте посмотрим как это выглядит на практике.

Эта команда дает понять браузеру что для конкретного элемента на странице нужно задать размер в десять процентов от размера родительского блока.

Ширина блока в CSS задается при помощи параметра width: auto|<ширина>|inherit все параметры аналогичны как для высоты так и для ширины блока и я думаю что снова повторяться не стоит. Хочу только сказать что не обязательно задавать конкретно как высоту так и ширину блока, можно задать например ширину а высота будет увеличиваться в зависимости от содержимого и что очень удобно если вы не знаете какой контент будет на конкретной странице.

Минимальная и максимальная ширина блока.

Также для каждого блока мы можем задать не конкретные параметры а минимальный и максимальный параметр для любого блока на сайте. Благодаря этому можно наполнять блоки без страха того что они выйдут за приделы окна браузера.

Задать это очень просто нам нужно прописать для задания минимальной ширины и высоты следующие параметры:

min-width: <ширина>

min-height: <высота>

А для максимальной нужны два параметра:

max-width: <ширина>
max-height: <высота>

Теперь мы можем задать как максимальный и минимальный размер для блока или же полностью для всего сайта и это важно для сайта с резиновым дизайном, при фиксированном этот параметр не будет работать.

Параметры размещения float в css.

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

Параметр float может принимать несколько значений и сейчас мы разберемся какие это параметры:

float: left|right|none|inherit

Теперь давайте разберемся с каждым примером отдельно.

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

float:right это полная противоположность предыдущей команде и соответственно блок будет выравниваться по правому краю а все элементы будут обтекать его слева.

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

Параметр clear в css.

Очень часто при создании дизайна на блоках при помощи команды float нужно некоторым блокам дать команду для того чтобы они не обтекали блок а вели себя как обычно, размещаясь ниже всех остальных. Такая проблема раньше решалась при помощи команды float:none к нужному блоку но отображение в каждом браузере может быть разным и поэтому в таких случаях намного рациональнее применять команду clear и сейчас мы посмотрим как это можно сделать.

clear: left|right|both|none|inherit

Команда имеет четыре параметра и сейчас конкретно с каждым мы разберемся что за функции он выполняет.

clear: left команда означает что элемент размещается ниже все элементов с параметром float: left.

clear:right команда размещает блок ниже всех элементов с параметром float: right.

clear:both параметр размещает элемент ниже всех блоков с параметром как float: left так и float: right.

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

Применяем все знания на практике.

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

Как мы видим для каркаса нам понадобится создать четыре блока DIV и к ним нам нужно будет применить как параметры размера так и параметры размещения.

Мы создали четыре блока и теперь нам нужно наполнить их информацией и задать фон для каждого блока чтобы нам было видно какой блок и где размещен. Узнать про задание фона вы можете . И вот что за код у нас должен быть.

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

Header{width:500px; ширина блока
height:100px; высота блока
background-color:#33CCFF;} цвет блока

Content{width:400px; ширина блока
height:400px; высота блока
background-color: #33FF33; цвет блока
float: left;} позиция блока

Sidebar{width:100px; ширина блока
height:400px; высота блока
background-color: #CCCCCC; цвет блока
float:left;} позиция блока

Footer{width:500px; ширина блока
height:100px; высота блока
background-color: #0000FF; цвет блока
clear:both;} стандартная позиция блока

И после того как мы пропишем все эти команды то мы получим вот такой каркас для сайта.

Верстая очередной проект (или ещё только проектируя макетную сетку) многие сталкивались с дилеммой - использовать фиксированную ширину макета или «резиновую» сетку, адаптируемую под размер окна браузера.

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

Фиксированная ширина макетной сетки

«Резиновая» макетная сетка по ширине окна

Хочу предложить нехитрый вариант решения - ограничить минимальный горизонтальный размер фиксированным значением в пикселях, а максимальный сделать относительным в процентном соотношении к ширине окна. Это очень банально решается простыми средствами ещё 2 версии спецификации CSS.

Update: Хочу оговориться, что речь не идёт о классическом эффекте резины и об адаптации под абсолютно все разрешения, скорее лишь про некий разумный диапазон разрешений, под который проектируется макет. В примерах ниже - это классический десктопный диапазон разрешений с горизонтальным габаритом разрешения от 1024 пикселей.

Ещё раз акцентирую внимание: в посте не идёт речь про решение для всех видов устройств и все диапазоны разрешений. В рамках одного макета эта задача не решаема в принципе , для её решения так или иначе потребуется несколько макетов. Мухи отдельно, котлеты отдельно.

Дополняем HTML:
...