Width в зависимости от содержимого. Height, width и overflow — CSS правила для описания области контента при блочной верстке. Простые свойства для размеров
Общий размер любого блока складывается из нескольких значений свойств. Которые можно рассмотреть на схеме:
- Основной размер блока (в нем расположен основной контент блока - изображение, видео, текст или всё сразу) задается с помощью 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;
Clearfix хак популярный способ правильного отображения плавающих блоков, позволяющий не прибегать к помощи таблиц при верстке. Необходимость в нем возникает когда вы начинаете замечать, что высота родительского блока DIV не соответствует содержимому наследников. К примеру вы задумали такую организацию блоков у себя на сайте (для наглядности родительский блок выделен желтым цветом, а дочерние — зеленым и красным ):
Для чего написали такую HTML страницу:
и к ней соответствующий CSS файл стилей:
Div-main { margin: 0 auto; padding: 20px; background: #eeee33; width: 320px; } .div-left { padding: 20px; background: #339933; float: left; width: 100px; } .div-right { padding: 20px; background: #cc0033; float: right; width: 100px; }
Однако в реальности вы получите такую картинку:
Родительский DIV не обнимает дочерние. То есть не растягивается по высоте входящих в него блоков. И никакой ошибки тут нет, просто в верстке используют плавающие блоки (свойство FLOAT). Плавающие элементы вырываются из текущего потока и создают в родительском контексте между собой собственный. При этом для внешнего потока они не будут иметь размеров. И чтобы родительский DIV учитывал их размер и растягивался по их содержимому необходима небольшая хитрость.
Два способа как растянуть размер родительского DIV по содержимому входящих в него блоков
Раньше я использовал такой дополнительный блок перед закрывающим тегом родительского DIV:
После чего внешний вид страницы соответствовал задуманному:
Второй способ как заставить родительский div растягиваться по высоте дочернего
Можно сделать «самоочищающийся» контейнер через псевдокласс after:
Clear-fix:before, .clear-fix:after { content: " "; display: table; } .clear-fix:after { clear: both; } /* Костыли для ослика (Internet Explorer 6 и 7) */ .clear-fix { *zoom: 1; }
А родительскому блоку добавить соответствующий класс:
Внешний вид страницы так же будет соответствовать задуманной верстке:
Оба способа хорошо работают. И позволяют решить проблему плавающих блоков, чтобы родительский DIV растягивался по высоте содержимого дочерних.
Известно, что веб-дизайнер рисует макет сайта, а верстальщик делает верстку, то есть пишет HTML/CSS код. А что именно он пишет на HTML странице? Все элементы дизайн-макета помещаются в блоки.
Если заглянуть в исходный код, то мы увидим, что там очень много дивов и все они заполнены фрагментами дизайна. Цельный рисунок раскидали, как мозаику по своим ячейкам.
Для того, чтобы все фрагменты дизайна никуда не поехали, а были четко зафиксированы в своих блоках, так как нарисовал дизайнер. Необходимо хорошо знать, как ведут себя блоки по высоте и ширине .
Рассмотрим на примере блока div , сделаем HTML разметку.
Поведение блоков по высоте
Пустой блок не виден на странице, а чтобы он стал виден, ему надо задать высоту или вставить внутри него контент.
Body {
background: #d5d5d5;
}
Div {
background: #d56287;
height: 100px;
}
Зададим ему высоту 100 пикселей и цвет фона, чтобы фон страницы и блок были разного цвета, иначе мы ничего не увидим.
Поведение блоков с контентом
Убираем высоту height и вставляем текст внутри блока.
Div {
background: #d56287;
}
Мы видим, что высота блока меняется, она зависит от количества контента. Почему так происходит? По умолчанию высота блока, равна значению auto , то есть автоматически подстраивается под высоту занимаемого контента в родительском блоке.
Приоритеты у блоков
Давайте вернем обратно высоту блока 100 пикселей и вставим параграф с текстом, пока текста мало, блок действительно на странице занимает по высоте 100 пикселей. Добавим больше текста и видим, что блок проигнорировал заданную высоту и занял ту высоту, которая потребовалось тексту. Заданная жестко высота, все равно уступила контенту.
Неужели никак нельзя принудить блок соблюдать заданную высоту и не растягиваться вслед за контентом? Можно, но только за счет автоматического обрезания текста, выходящего за рамки заданных размеров, называется это свойство overflow .
Сокрытие лишнего содержимого в блоке
Надо добавить в CSS код свойство overflow: hidden
Div {
background: #d56287;
height: 100px;
overflow: hidden;
}
всё, что не поместиться в блоке, будет скрыто, мы видим, как некрасиво обрезался текст.
В случае необходимости вывода содержимого блока целиком, можно задействовать прокрутку, тогда следует прописать блоку вместо hidden .
Overflow: scroll;
На практике это может пригодиться при выравнивании, чтобы у всех стоящих в ряд блоков, была одинаковая высота или чтобы динамически выводимый контент, не сломал дизайн сайта.
Поведение блоков по ширине
А как ведут себя блоки, если не задавать для них ширину? Мы не задавали ширину блоку, но все равно его ширина автоматически занимает все отведенное ему пространство. Ширина блока по умолчанию равна 100%. Но если мы ограничим ширину, задав например 200 пикселей, то визуально увидим, что блок занимает 200 пикселей.
Div {
background: #d56287;
height: 100px;
width: 200px;
}
Однако, здесь есть подвох, если мы наведем на элемент в инспекторе кода, то увидим, что на самом деле блок продолжает занимать всю ширину браузера, но делает это скрытно. Таким образом, 200 пикселей он занимает открыто, а остальное пространство зарезервировано и не дает другим элементам встать с ним в одну строчку.
Продублируем наш блок и видим, что второй блок встал на новую строку и тоже занял всю строчку. Это особенность блочных элементов.
Так как же их заставить встать в один ряд? Надо сделать их строчно-блочными элементами и тогда они прекрасно будут стоять рядом в одной строке. Каждому блоку нужно задать свойство.
Display: inline-block;
Высота и ширина блока могут задаваться в относительных единицах, например в %. Надо учитывать что размеры дочерних блоков задаются относительно родителя и тогда родителем для блока div будет body .
Мой поможет вам от теории перейти к практике и сверстать свой первый сайт.
Здравствуй , уважаемый читатель.
Это одиннадцатый урок изучения 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 для каждого блока
Посмотрим как это выглядит в браузере.
О преимуществах 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, верстка, самоучитель
