Height, width и overflow — CSS правила для описания области контента при блочной верстке. Размеры блочных элементов в 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;

Влад Мержевич

Любой блочный элемент состоит из набора свойств, подобно капустным листам накладываемых друг на друга. Основой блока выступает его контент (это может быть текст, изображение и др.), ширина которого задаётся свойством width , а высота через height ; вокруг контента идут поля (padding ), они создают пустое пространство от контента до внутреннего края границ; затем идут собственно сами границы (border ) и завершают блок отступы (margin ), невидимое пустое пространство от внешнего края границ. Ширина блока это комплексная величина и складывается из нескольких значений свойств:

• width - ширина контента, т.е. содержимого блока;
• padding-left и padding-right - поле слева и справа от контента;
• border-left и border-right - толщина границы слева и справа;
• margin-left и margin-right - отступ слева и справа.

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

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

Если значение width не задано, то оно по умолчанию устанавливается как auto . В этом случае ширина блока будет занимать всю доступную ширину при сохранении значений полей, границ и отступов. Под доступной шириной в данном случае подразумевается ширина контента у родительского блока, а если родителя нет, то ширина контента браузера.

Допустим, для слоя написан следующий стиль.

Width: 300px; /* Ширина слоя */ margin: 7px; /* Значение отступов */ border: 4px solid black; /* Параметры границы */ padding: 10px; /* Поля вокруг текста */

Ширина слоя согласно этой записи будет равна 342 пиксела, эта величина получается складыванием значения ширины контента плюс отступ слева, граница слева и поле слева, плюс поле справа, граница справа и отступ справа. Суммируем все числа.

Ширина = 300 + 7 + 7 + 4 + 4 + 10 + 10 = 342

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

Алгоритм блочной модели

Как уже упоминалось, ширина блока формируется из ширины контента и значений полей, границ и отступов. В браузере Internet Explorer в алгоритм меняется автоматически и ширина всего блока устанавливается равной width . Остальные браузеры так просто не меняют алгоритм, к тому же вы знаете, что режим совместимости это зло. В CSS3 есть замечательное свойство box-sizing , которое нам и пригодится. При значении border-box ширина начинает включать поля и границы, но не отступы. Таким образом, подключая box-sizing со значением border-box к своему стилю, мы можем задавать ширину в процентах и спокойно указывать border и padding , не боясь, что изменится ширина блока. К сожалению, с этим свойством связана небольшая проблема, как обычно относящаяся к браузерам - не все браузеры его понимают. Радует, что браузеры хотя бы поддерживают специфические для каждого браузера свойства. В табл. 1 приведена поддержка браузерами.

Табл. 1. Поддержка браузерами свойства box-sizing

Браузер	Internet Explorer	Chrome	Opera	Safari	Firefox
Версия	8.0+	2.0+	7.0+	3.0+	1.0+
Свойство	box-sizing	-webkit-box-sizing	box-sizing	-webkit-box-sizing	-moz-box-sizing

Как видно из таблицы, в свойствах разброд и шатание, поэтому придется делать гибрид и указывать все три свойства (пример 1).

Пример 1. Ширина блока

HTML5 CSS3 IE Cr Op Sa Fx

Данный пример будет работать во всех браузерах, указанных в табл. 1, однако невалиден в CSS3 из-за применения нестандартных свойств начинающихся на -moz и -webkit. Ширина блока составляет 100% с учетом значений padding . Без свойства box-sizing в браузере появится горизонтальная полоса прокрутки.

Вложенные слои

Использование свойства box-sizing всем хорошо, кроме того, что не работает в старых версиях IE. Если вы верстаете сайт с учетом IE7 и IE6, вам подойдет старый проверенный метод с вложением слоев. Идея простая - для внешнего блочного элемента задаётся только необходимая ширина, а для вложенного блока всё остальное - поля, границы и отступы. Поскольку по умолчанию ширина блока равна доступной ширине родителя, получится, что блоки в каком-то смысле накладываются друг на друга, при этом фактическая ширина такого комбинированного элемента будет чётко задана. В примере 2 показано использование вложенных слоев.

Пример 2. Вложенные слои

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 2.

Рис. 2. Ширина блока в процентах

Преимуществом вложенных слоев является использование отступов (box-sizing их не учитывает), универсальность метода, также то, что фон по желанию можно добавлять к одному или другому слою. Тем самым несколько меняется внешний вид элементов, это особенно актуально при включении фоновых рисунков. Из недостатков метода можно отметить включение дополнительного блока, который усложняет структуру кода, особенно при частом применении метода. Но это можно считать мелочью по сравнению с преимуществами.

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

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

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

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

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

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

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

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

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

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

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

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

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

При изучении блочной модели CSS мы разобрали, что свойства width и height устанавливают ширину и высоту внутренней области элемента (content area ), которая может содержать текст, изображения и прочие элементы.

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

Общая ширина элемента вычисляется по формуле:

div { width : 150px ; /* устанавливаем ширину элемента */ height : 150px ; /* устанавливаем высоту элемента */ padding : 10px ; /* устанавливаем внутренние отступы элемента */ border : 5px ; /* устанавливаем границы элемента */ }

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

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

Значение content-box свойства является значением по умолчанию и производит расчёт общей ширины и высоты элемента по классической схеме. На примере ширины:

150 пикселей (пользовательское значение ширины) + 10 пикселей (левый внутренний отступ) + 10 пикселей (правый внутренний отступ) + 10 пикселей (левая граница) + 10 пикселей (правая граница) = 190 пикселей .

Что касается второго элемента, к которому мы применили свойство со значением border-box , то пользовательское значение ширины и высоты элемента уже включают в себя содержание элемента, границы (border) и внутренние отступы (padding). В большинстве случаев применение свойства со значением border-box предпочтительно на страницах, так как делает очевидным конечные размеры элемента и позволяет избежать некоторых непредвиденных ситуаций рассмотренных выше.

Результат нашего примера:

Управление переполнением блочных элементов

В процессе верстки у вас будут возникать такие ситуации, когда содержимое элемента будет отображаться за пределами границ элемента. По умолчанию браузер отображает такое содержимое (переполнение элемента отображается), что в некоторых случаях приводит к визуальным ошибкам. За такое поведение браузера отвечает CSS свойство overflow . Рассмотрим его возможные значения:

Давайте рассмотрим следующий пример:

В данном примере мы разместили четыре блока фиксированной ширины и высоты, для которых указали различные значения CSS свойства overflow :

• Первый блок (значение visible ) – содержимое выходит за границы элемента (значение по умолчанию).
• Второй блок (значение hidden ) – содержимое, которое переполняет элемент обрезается.
• Третий блок (значение scroll ) – переполнение обрезается, но добавляется полоса прокрутки.
• Четвертый блок (значение auto ) – как и при значении scroll , только полоса прокрутки будет добавлена автоматически, если произойдет переполнение блока по определенной оси (x - горизонтальной, либо y - вертикальной), а не отображается на странице постоянно.

Результат нашего примера.

Категория: . 2 комментариев. Опубликовано: 02.09.2012.

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

Высота и ширина блока в 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;} стандартная позиция блока

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