Какой будет по умолчанию ширина блока div. Способы размещения блоков горизонтально

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

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

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

Существует один подход в верстке, которого нужно придерживаться как можно чаще и вернее. Это минерализация дерева DOM. Имеет это несколько вполне обоснованных преимуществ: упрощает сам процесс верстки, сводит количество потенциальных ошибок к минимуму, улучшает прозрачность кода. Об этом надо помнить всегда, и в моменте планирования структуры обращать на это особо много внимания.

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

FAQ

- Как выставлять div"ы друг за другом? А для этого используется свойство - float: left (или right, в зависимости от потребности), чтобы следующий div после таких поочередных стоял под ними, задаем ему свойство clear (например clear:left).

- Как выровнять 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 свойств width (ширина) и height (высота блока)
• Далее вокруг основного блока идут поля (внутренний отступ - padding ) с помощью них мы задаем отступ основного контента от краев рамки
• Следующий слой - border (рамка) не трудно догадаться за что отвечает данное свойство
• Последний слой из которого состоит общий размер блока - это внешний отступ margin с помощью этого CSS свойства задается отступ между блоками

Задание размеров блоков

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

Мы можем указывать значения высоты и ширины через константы с еденицами измерения, такими как px и т.п. Также можно указать с помощью процентов и вычислений calc.

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

Свойство box-sizing

Если у вас есть область в 800 px, и вы хотели бы разместить в ней 2 элемента, разделяющую эту область поровну, то CSS правила

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

Можно решить это просто посчитав, сколько места нам необходимо для рамки и отступов и вычесть их из свойства width. Но есть и другой способ: в данном случае можно использовать свойство box-sizing:border-box

Item{ box-sizing:border-box; /**/ width:50%; padding:20px; border:1px; margin:0px; }

Если применить блоку css правило box-sizing:border-box, то тогда у нас нет необходимости рассчитывать внутренние отступы и рамку, т.к. в этом случае они будут входить в значение width и мы можем спокойно расставлять внутренний отступ и рамку как нам необходимо, не боясь что блоки не поместятся. Но в это правило не вписывается свойство margin. По этому, если вам необходимо будет добавлять внешний отступ между элементами, то тогда рассчитывайте сколько вам необходимо будет вычесть из свойства width;

Примечание:Если у вас не работает данное свойство в браузере Chrome, то допишите еще для него это правило отдельно

Webkit-box-sizing:border-box;

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

CSS свойство width позволяет задать ширину области содержимого элемента, а свойство height высоту области содержимого:

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

Для данного абзаца зададим только ширину и высоту.

Этот абзац содержит, кроме ширины и высоты, внутренний отступ, рамку и внешний отступ.

Попробовать »

В примере хорошо видно, что второй элемент занимает больше пространства, чем первый. Если посчитать по нашей формуле, то размеры первого абзаца - 150x100 пикселей, а размеры второго абзаца:

Общая высота:	5px	+	10px	+	100px	+	10px	+	5px	= 130px
	верхняя рамка		верхний отступ		высота		нижний отступ		нижняя рамка

то есть 180x130 пикселей.

Переполнение элементов

После того как вы определили для элемента ширину и высоту, стоит обратить внимание на один немаловажный момент - содержимое, расположенное внутри элемента, может превысить указанный размер блока. В этом случае часть содержимого будет выходить за границы элемента, чтобы избежать этого неприятного момента, можно воспользоваться CSS свойством overflow . Свойство overflow сообщает браузеру, как нужно поступить в том случае, если содержимое блока превышает его размер. Это свойство может принимать одно из четырех значений:

• visible - значение, используемое браузером по умолчанию. Указание этого значения будет иметь тот же эффект, что и отсутствие установки свойства overflow.
• scroll - добавляет к элементу полосы прокрутки по вертикали и горизонтали.
• auto - добавляет полосы прокрутки при необходимости.
• hidden - скрывает часть содержимого, которое выходит за границы блочного элемента.

Здравствуй , уважаемый читатель.

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

Перед изучением данного урока пройдите предыдущие уроки:

Теория и практика

В прошлом уроке мы рассмотрели что такое блочная модель, внутренние и внешние отступы. В этом мы рассмотрим лишь два свойства: высоту и ширину блока. Высота в CSS задается свойством height , а ширина свойством width . Сразу посмотрим в коде на реальном примере(возьмем пример из прошлого урока):

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<html > <head > <title > Главная</ title > <meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" > <link rel = "stylesheet" type = "text/css" href = "style.css" > </ head > <body > <div id = "content" > <div class = "firstPar" > <p > Aliquam malesuada tellus justo, eget lacinia nunc rutrum a. Phasellus dictum tempor eleifend. Nunc ut magna non purus fermentum egestas ac eu nulla.</ p > <p > Fusce est tellus, mattis quis nisl et, egestas posuere libero. Donec scelerisque tellus porttitor massa dictum pulvinar.</ p > </ div > <div class = "secondPar" > <p > Cras</ p > <ul > <li > amet condimentum</ li > <li > aliquam volutpat</ li > <li > elementum interdum</ li > </ ul > </ div > </ div > </ body > </ html >

А в CSS для каждого блока