Разное

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

Автор

Содержание

width | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+8.0+1.0+3.5+3.1+1.0+1.0+1.0+

Краткая информация

Версии CSS

Описание

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

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

Табл. 1. Действие width в браузерах
<!DOCTYPE>Internet ExplorerOpera 10+, Firefox, Chrome, SafariOpera 9
Не указан (режим совместимости)Если содержимое превышает заданную ширину, то блок изменяет свои размеры, подстраиваясь под содержимое. В противном случае ширина блока равна значению width.Во всех случаях браузер действует по спецификации CSS. А именно, ширина блока получается сложением значений width, padding, margin и border.

Содержимое блока, если не помещается в заданные размеры, отображается поверх блока.

Ширина равна значению width.

Содержимое блока, если не помещается в заданные размеры, отображается поверх.

Переходный HTML
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»>
Строгий HTML
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN»>		Ширина формируется путем сложения значений width, padding, margin и border.

Содержимое блока, если не помещается в заданные размеры, отображается поверх.

Ширина равна значению width плюс padding, margin, и border.

Содержимое блока, если не помещается в заданные размеры, отображается поверх.

HTML 5
<!DOCTYPE html>
XHTML
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN»>

Синтаксис

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

Значения

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

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

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>width</title>
  <style>
   .layer1 {
    width: 300px; /* Ширина блока */
    background: #fc0; /* Цвет фона */
    padding: 7px; /* Поля вокруг текста */
    border: 1px solid #ccc; /* Параметры рамки */
   }
   .layer2 {
    width: 400px; /* Ширина текстового блока */
   }
  </style>
 </head>
 <body>
  <div>
   <p>Lorem ipsum dolor sit amet,consectetuer 
   adipiscing elit,seddiem nonummy nibh euismod tincidunt ut 
   lacreet dolore magna aliguam erat volutpat.</p>
  </div>
 </body>
</html>

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

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

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

[window.]document.getElementById(«elementID»).style.width

Браузеры

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

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

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

Известно, что веб-дизайнер рисует макет сайта, а верстальщик делает верстку, то есть пишет HTML/CSS код. А что именно он пишет на HTML странице? Все элементы дизайн-макета помещаются в блоки.

Если заглянуть в исходный код, то мы увидим, что там очень много дивов и все они заполнены фрагментами дизайна. Цельный рисунок раскидали, как мозаику по своим ячейкам.

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

Рассмотрим на примере блока div, сделаем HTML разметку.

<body>
  <div></div>
</body>

Поведение блоков по высоте

Пустой блок не виден на странице, а чтобы он стал виден, ему надо задать высоту или вставить внутри него контент.

body {
  background: #d5d5d5;
}

div {
  background: #d56287;
  height: 100px;
}

Зададим ему высоту 100 пикселей и цвет фона, чтобы фон страницы и блок были разного цвета, иначе мы ничего не увидим.

Поведение блоков с контентом

Убираем высоту height и вставляем текст внутри блока.

<div>
<p>текст</p>
</div>

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.

Мой видеокурс «Вёрстка сайта с нуля» поможет вам от теории перейти к практике и сверстать свой первый сайт.

  • Создано 26.09.2018 10:06:47
  • Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Вычисление ширины блока через box-sizing – Zencoder

В CSS3 появилось свойство box-sizing, смысл которого в способе вычисления ширины HTML-блока браузером. Но, прежде чем переходить к его рассмотрению, сначала давайте вспомним, как обычно браузер производит расчет ширины блока элемента в HTML-разметке?

Вычисление всегда выполняется по формуле: Width = Margin + Border + Padding + Content. То есть, если ширина контента задана в 200px, padding равен 25px, border равен 10px, а margin равен 15px; то результирующая ширина блока будет равна 300px.

Такой способ вычисления ширины блока делают все современные браузеры:

200px + 25px*2 + 10px*2 + 15px*2 = 300px

Однако, были времена, когда не все браузеры вычисляли размеры блока элемента подобным образом. Существовал Internet Explorer версии 5/6, который ширину блока считал несколько иначе:

из заданной ширины блока вычитались padding и border, получалась результирующая ширина области content. В те времена веб-разработчики “показывали пальцем” на этот браузер и говорили, что это ошибка и недочет разработчиков IE5/6.

Но теперь времена изменились благодаря появлению адаптивного (responsive) дизайна. Причины возникновения адаптивного дизайна — в огромном количестве устройств с разными размерами экранов, по большей части мобильных. Задача адаптивного дизайна в “подстраивании” одного и того же дизайна сайта под различные размеры мониторов. При таком “подстраивании” важной становиться задача вычисления ширины блоков элементов, чтобы верстка не “разваливалась”.

Чтобы такого не произошло, как раз и становиться удобным “возврат” к той модели расчета ширины блока, какая присутствовала в IE5/6. Для этого было разработано свойство

box-sizing, с помощью которого можно управлять подобной моделью расчета.

Свойство box-sizing принимает три значения (три модели вычисления ширины блока): **content-box padding-box border-box**.

Свойство box-sizing: content-box

Первая модель content-box является способом вычисления ширины блока по умолчанию, принятым в современных браузерах:

box-sizing: content-box

Ширина блока равна сумме: Width = Width (Content) + Padding + Border + Margin

Свойство box-sizing: padding-box

Вторая модель padding-box заключается в том, что ширина блока включает в себя ширину контента (content) и ширину padding. Остальные — border-box и margin-box — приплюсовываются к заданной ширине, как обычно. Данная модель, хоть и заявлена в спецификации CSS3, не поддерживается на сегодняшний день почти никакими браузерами; так что о ней можно забыть (пока забыть):

box-sizing: padding-box

Ширина блока равна сумме: Width = Width (Content + Padding) + Border + Margin

Свойство box-sizing: border-box

Третья модель border-box очень похожа на предыдущую модель padding-box. Но, в данном случае, ширина блока включает в себя еще и border-box; то есть ширина блока включает в себя область content-box, padding-box и border-box. Область margin-box прибавляется к ширине блока элемента, как обычно.

box-sizing: border-box

Ширина блока равна сумме: Width = Width (Content + Padding + Border) + Margin

Практический пример свойства box-sizing

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

HTML-разметка представлена ниже:

<div>
  <div></div>
  <div></div>
</div>

… и CSS-таблица, обычная для такого случая. Единственное “новое” правило в этом коде — это свойство box-sizing, указанное с вендорными префиксами. Обычно его можно не указывать, так как у браузеров по умолчанию свойство box-sizing установлено в значении content-box (как уже упоминалось ранее). Но в нашем случае понадобится явно указать это свойство. Для блоков-потомков здесь намерено мы не указываем (пока не указываем) padding, border и margin:

*{
  margin: 0;
  padding: 0;
}

html{
  background-color: #a7c5a8;
}

body {
  width: 80%;
  margin: 0 auto;
}

.wrap{
  width: 800px;
  height: 400px;
  margin: 50px auto;
  background-color: #778899;
  border: 3px solid #ff0000;
}

.left, .right{
  float: left;
  width: 400px;
  height: 400px;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

.left{
  background-color: #000;
}

.right{
  background-color: #fff;
}

Блоки-потомки четко вписываются в блок-родитель, так как у них нет border, padding и margin; ширина блоков-потомков точно равна половине ширине блока-родителя.

Теперь добавим для блоков-потомков padding: 5px:

.left, .right{
  float: left;
  width: 400px;
  height: 400px;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  padding: 5px;
}

Картина будет заранее предсказуемая — один из блоков-потомков опуститься вниз из-за добавления padding: 5px к обоим блокам:

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

.left, .right{
  float: left;
  width: 400px;
  height: 400px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 5px;
}

Даже если добавить к блокам-потомкам границу border, то картинка останется прежней:

.left{
  background-color: #000;
  border: 6px solid #0000ff;
}

.right{
  background-color: #fff;
  border: 6px solid #00ff00;
}

Но если прибавить к блокам div и div правило margin, то наша разметка снова “сломается”:

.left, .right{
  float: left;
  width: 400px;
  height: 400px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 5px;
  margin-left: 5px;
}

Это происходит потому, что в модель вычисления border-box поля margin не входят. Поле margin-left размером 5px прибавляется к ширине блока-потомка. Суммарная ширина обоих блоков-потомков превышает ширину блока-родителя и один из них выходит из его, опускаясь (снова) вниз:

В этом примере мы не применили к свойству box-sizing значения padding-box, потому что [браузеры не понимают этого значения][1] и свойство box-sizing работать не будет в этом случае.

Заключение

Вот и все, что можно сказать о свойстве box-sizing. Понимание этого свойства понадобиться еще, когда придет время изучать адаптивный (responsive) дизайн.

Основой для данной статьи послужила замечательная “Большая книга CSS3 Д. Макфарланд (3-е издание).

[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing “MDNCSS — box-sizing”
box-sizingcss

Как задается в css размер блока: свойства width, height, padding

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

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

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

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

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

#container{ width: 1000px; }

#container{

width: 1000px;

}

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

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

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

#container{ max-width: 1320px; }

#container{

max-width: 1320px;

}

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

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

#container{ min-width: 600px; }

#container{

min-width: 600px;

}

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

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

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

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

#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; }

#sidebar{

padding: 10px 20px;

border: 2px solid black;

}

Вот уже и получается, что общая ширина сайдбара увеличилась на 44 пикселя (отступы справа и слева по 20 и рамка с этих же сторон по 2). Есть вариант для тех, кто не хочет сильно заморачиваться над размерами и записывать их сразу с учетом отступов и рамок. Тогда нужно записать так:

*{ box-sizing: border-box; }

*{

box-sizing: border-box;

}

Это замечательное свойство делает так, что в ширину блока (width) начинают включаться внутренние отступы (padding) и рамки. Теперь если вы зададите контенту размер в 62%, он останется таковым в любом случае. А ведь есть еще и внешние отступы, но они уже на размеры блока не влияют. Но если вы захотите сделать, допустим, большой отступ справа от боковой колонки, то контент просто не влезет и вынужден будет перенестись вниз.

Резиновые картинки

Чтобы дать возможность в css картинке меняться по размеру блока, ей нужно задавать ширину в процентах. Таким образом, если сам блок имеет относительный размер или ему прописан max-width, то при уменьшении ширины картинка и блок будут уменьшаться синхронно, что есть хорошо для хорошего отображения сайта.

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

Итог

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Почему процентная ширина работает, даже если для содержащего блока не задано явное значение ширины?



В соответствии со спецификациями для height содержащая ячейка элемента должна иметь явный height , чтобы процентная высота работала над элементом (т. е. числовое значение высоты 100% , используемое для всех родительских содержащих ячеек).

Однако почему те же самые правила, по-видимому, не применяются к проценту width s? Когда я устанавливаю процент width на элемент с содержащим полем, которое не имеет явного width, он все равно, кажется, изменяет ширину элемента. (см. пример)

.first {
    background-color: teal;
}
.second {
    background-color: gold;
    width: 30%;  /* the '.second' box becomes narrower! */
    height: 40%; /* <-- doesn't have any effect         */
}
<div>
    ""
    <div>
    ""
    </div>
</div>
html css width
Поделиться Источник rrazd     05 февраля 2015 в 20:42

2 ответа

  • CSS процентная ширина и процентная ошибка заполнения во всех швах?

    Посмотрите на этот пример: http://jsfiddle.net/nvcode/BnGyu/2 / Теперь совершенно очевидно, что браузер может правильно вычислить ширину, так как первый div полностью заполнен, но на втором div я помещаю ширину 98% и 1% отступов с обеих сторон, делая в общей сложности 100%. Браузер знает, что…

  • горизонтальное форматирование для элемента уровня блока

    В CSS The definitive Guide автор сказал: значения этих семи свойств должны суммироваться с шириной содержащего элемент блока, которая обычно является значением ширины для родительского элемента блока. Но в следующем случае дочерний элемент шире родительского. //html <div class=wrapper>…


14

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

Ну, это lie-to-children !

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

10.3.3 Блочные, не заменяемые элементы в нормальном потоке

Среди используемых значений других свойств должны соблюдаться следующие ограничения :

‘margin-left’ + ‘border-left-width’ + ‘отступ слева’ + ‘width’ + ‘padding-right’ + ‘border-right-width’ + ‘margin-right’ = ширина содержащего блока

[…] Если ‘width’ имеет значение ‘auto’, любые другие значения ‘auto’ становятся ‘0’, а ‘width’ следует из полученного равенства.

Из-за того , что начальное значение свойства width равно auto, width элемента уровня блока будет таким же, как и содержащий его блок.

<html> -это элемент уровня блока, и он находится в исходном содержащем блоке .

Начальный содержащий блок представляет собой прямоугольное поле, которое занимает ширину окна просмотра . Следовательно, ширина элемента <html> будет равна ширине окна просмотра.

С другой стороны, содержащий блок элемента <body> генерируется элементом <html> . Следовательно, они также будут иметь одинаковую ширину.

<body> сам устанавливает содержащий блок для своих дочерних элементов уровня блока. И именно поэтому элемент <div> в обычном потоке будет принимать ширину окна просмотра.

W3C указывает на это лучше:

Без позиционирования, содержащие блоки (C.B.) в следующем документе:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
   <HEAD>
      <TITLE>Illustration of containing blocks</TITLE>
   </HEAD>
   <BODY>
      <DIV>
      <P>This is text in the first paragraph...</P>
      <P>This is text <EM> in the 
      <STRONG>second</STRONG> paragraph.</EM></P>
      </DIV>
   </BODY>
</HTML>

устанавливаются следующие:

For box generated by    C.B. is established by
html                    initial C.B. (UA-dependent)
body                    html
div1                    body
p1                      div1
p2                      div1
em1                     p2
strong1                 p2

Однако это не верно для height не замененных элементов уровня блока (которые все еще находятся в нормальном потоке!) :

10.6.3 Не замененные элементы блочного уровня в нормальном потоке, когда ‘overflow’ вычисляется до ‘visible’

[…] Если ‘height’ равно ‘auto’, высота зависит от того, имеет ли элемент дочерние элементы уровня блока и имеет ли он отступы или границы.

[…] Учитываются только дочерние элементы в нормальном потоке (т. е. Плавающие ящики и абсолютно расположенные ящики игнорируются, а относительно расположенные ящики рассматриваются без их смещения).

Начальное значение height равно auto , поэтому, если элемент уровня блока не имеет дочерних элементов уровня блока, отступов или границ, вычисленное значение height будет равно 0 .

Это верно даже для элемента <html> .

Поделиться Hashem Qolami     05 февраля 2015 в 21:22


0

Я думаю, что все блочные элементы имеют ширину 100%, если не указано ничего другого. Высота работает по-другому, потому что, если вы нигде не задаете высоту, она просто основывается на общей высоте вашего контента.

Поделиться tomas     05 февраля 2015 в 20:56

Похожие вопросы:


Почему процентная высота работает на фиксированном элементе положения?

Я узнал, что процентная высота работает только в том случае, если все родительские (и родительские) элементы имеют значение height . Но почему это не требуется для элемента position:fixed ? div {…


Tkinter: получение ширины блока текста экрана. (Не пиксели)

Я использую Tkinter для разработки UI для приложения. Я использую геометрию сетки и, указывая ширину кнопки (или любого виджета), понял, что ширина должна быть указана в текстовых единицах, а не в…


Относится ли процентное значение к ширине содержащего блока?

Мы можем задать свойства заполнения и поля элемента E, используя либо пиксели, либо проценты. А) я предполагаю, что когда мы используем проценты, процентное значение относится к ширине содержащего…


CSS процентная ширина и процентная ошибка заполнения во всех швах?

Посмотрите на этот пример: http://jsfiddle.net/nvcode/BnGyu/2 / Теперь совершенно очевидно, что браузер может правильно вычислить ширину, так как первый div полностью заполнен, но на втором div я…


горизонтальное форматирование для элемента уровня блока

В CSS The definitive Guide автор сказал: значения этих семи свойств должны суммироваться с шириной содержащего элемент блока, которая обычно является значением ширины для родительского элемента…


Процентная ширина абсолютно позиционированного элемента

От CSS 10.2 ; Задает процентную ширину. Процент рассчитывается по отношению к ширине блока, содержащего сгенерированный блок. Если ширина содержащего блока зависит от ширины этого элемента, то…


Почему max-width ограничивает img его собственным разрешением, а не шириной содержащего блока?

Я смотрел учебник по адаптивному веб-дизайну. В учебнике указано, что изображение можно сделать отзывчивым, установив стиль width на 100%,, но это приведет к масштабированию изображения за пределы…


процентная высота абсолютно расположенных блоков

Это вопрос, вызванный скорее любопытством, чем реальной проблемой. Я пытаюсь лучше понять css. Процентная высота (и ширина) должна быть относительно содержащего блока ( см. здесь ). Содержащий блок…


CSS vw но в процентах от ширины содержащего блока?

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


Что определяет начальное значение элемента в массиве C, если ему не задано явное значение?

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

Как задать высоту и ширину блока в CSS