Ширина блока: Высота и ширина блока в CSS — foamin.ru — Пенообразователь для пенобетона

Содержание

width | htmlbook.ru

Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
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 Explorer	Opera 10+, Firefox, Chrome, Safari	Opera 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 “MDN

CSS — 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
Время чтения: 2 мин.
Здравствуй, уважаемый читатель.
Это одиннадцатый урок изучения CSS. В данном уроке мы рассмотрим всего лишь два простых но важных свойства. Эти свойства отвечают за высоту и ширину блока.

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

Урок 1. Что такое CSS?
Урок 2. Базовые селекторы
Урок 3. Групповые селекторы и селекторы потомков
Урок 4. Псевдоселекторы ссылок
Урок 5. Шрифты
Урок 6. Оформление текста
Урок 7. Рамки
Урок 8. Оформление списков
Урок 9. Наследование
Урок 10. Блочная модель
Теория и практика
В прошлом уроке мы рассмотрели что такое блочная модель, внутренние и внешние отступы. В этом мы рассмотрим лишь два свойства: высоту и ширину блока. Высота в 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> <div> <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> <p>Cras</p> <ul> <li>amet condimentum</li> <li>aliquam volutpat</li> <li>elementum interdum</li> </ul> </div> </div> </body> </html>
А в CSS для каждого блока <div> зададим ширину в 200 пикселей(px):
1 2 3 4 5 6 7 8 9 10 11 12 13
#content{ border:2px solid #FF0000; /* красная граница */ } .firstPar{ border:2px solid #0000FF; /* синяя граница */ width:200px; /* ширина блока */ height:280px; /* высота блока */ } .secondPar{ border:2px solid #00FF00; /* зеленая граница */ }
Посмотрим как это выглядит в браузере:
Как видите мы задали определенную высоту и ширину. Если бы мы задали высоту меньше, чем помещается текст, тогда бы текст вылез за пределы блока. Поэкспериментируйте с высотой и шириной. Сначала тяжело будет на глаз определять необходимый размер в пикселях, но со временем привыкнете.
Это небольшой и простой урок. Попробуйте сами изменять размеры блока и посмотрите что получиться. Практика — самый быстрый способ научиться чему-либо!
Больше практикуйтесь!
Html ширина блока div – Тарифы на сотовую связь

Эта объемная статья учебника будет посвящена важным темам, задача которых заключается в том, чтобы расставить по полочкам методы работы с блочными элементами, объянить читателю для чего применяется изменение модели вычисления ширины и высоты элементов, как управлять переполнением блочных элементов, и как работать с минимальными и максимальными размерами элементов.
В блочной модели CSS существует разница между значениями ширины и высоты, которые вы задаете для элемента и размером пространства, которое браузер резервирует для его отображения. Общая ширина и высота элементов представляет собой область окна браузера, которая состоит из ширины и высоты внутренних отступов, границ и указанных для них пользовательских значений.
И так, мы с Вами рассмотрели, как классически происходит вычисление общей ширины и высоты элементов. Минусы этой модели заключаются в том, что вам необходимо проводить математические вычисления, чтобы понять какую действительно ширину, либо высоту имеет тот, или иной элемент. Удобно ли это?
Для того, чтобы понять стоит ли нам использовать альтернативные способы вычисления ширины и высоты элементов, давайте рассмотрим пример, в котором создадим четыре блока одной ширины, при этом мы будем использовать процентные значения:
Это очень тонкий момент, дело в том, что когда вы используете display: inline-block браузер расценивает переносы строки как пробельный символ, и как следствие, добавляет после каждого блока 3-4px пустого пространства в зависимости от браузера и шрифта пользователя. По сути это является междусловным интервалом, так как блок расценивается в данном случае как слово. Может на данном этапе этот момент для вас не до конца понятен, просто запомните его, чтобы в последствии случайно не потерять пару часов, когда у вас будет «съезжать» какой-то блок, или список в панели навигации из-за вдруг появившихся «не понятно откуда пикселей». Я человек простой: вижу непонятные пиксели при display: inline-block – пишу элементы в линейку без пробелов.
В нашем случае это спасает ситуацию, и нам не придется производить каких-то вычислений, и в дальнейшем боятся каких-либо изменений, которые могут потребоваться для наших элементов. Оставим эти не нужные вычисления на стороне браузера и посмотрим на результат нашего примера:
Что касается второго элемента, к которому мы применили свойство box-sizing со значением border-box , то пользовательское значение ширины и высоты элемента уже включают в себя содержание элемента, границы (border) и внутренние отступы (padding). В большинстве случаев применение свойства box-sizing со значением border-box предпочтительно на страницах, так как делает очевидным конечные размеры элемента и позволяет избежать некоторых непредвиденных ситуаций рассмотренных выше.
В процессе верстки у вас будут возникать такие ситуации, когда содержимое элемента будет отображаться за пределами границ элемента. По умолчанию браузер отображает такое содержимое (переполнение элемента отображается), что в некоторых случаях приводит к визуальным ошибкам. За такое поведение браузера отвечает CSS свойство overflow. Рассмотрим его возможные значения:
Значение Описание
visible Переполнение не обрезается, содержимое выходит за пределы размеров элемента. Это значение по умолчанию.
hidden Переполнение обрезается (контент, который выходит за размеры будет невидимым).
scroll Переполнение обрезается, но добавляется полоса прокрутки, позволяющая увидеть содержимое, которое выходит из заданных размеров.
auto Если переполнение обрезается, то полоса прокрутки будет добавлена автоматически, чтобы увидеть содержимое, которое выходит из заданных размеров.
Четвертый блок (значение auto ) – как и при значении scroll , только полоса прокрутки будет добавлена автоматически, если произойдет переполнение блока по определенной оси (x – горизонтальной, либо y – вертикальной), а не отображается на странице постоянно.
С выходом стандарта CSS 3 были добавлены свойства, которые способны управлять по отдельности горизонтальным переполнением (ось x) – overflow-x и вертикальным переполнением (ось y) – overflow-y. В отличии от свойства overflow, данные свойства отвечают только за одну ось (x, либо y) при этом значения и синтаксис аналогичен свойству overflow (таблица выше).
Если в CSS размеры блока не заданы, то они формируются следующим образом: ширина определяется шириной окна страницы или шириной внешнего блока. Блок занимает всю ширину окна страницы или внешнего блока за исключением отступов. А высота блока устанавливается такой, чтобы в блок поместилось всё содержимое. Для примера создадим блок без указания размеров и посмотрим, как он выглядит. Чтобы видеть размеры блока, зададим рамку с помощью свойства border . Подробно рамки будут рассмотрены в следующей теме, а пока просто скопируйте это свойство.
Для установления размеров блока есть свойство width , которое устанавливает ширину блока, и свойство height , которое устанавливает высоту блока. Значениями этих свойств являются размеры блока в любых единицах, существующих в CSS, например в пикселях. При указании значения, единицы обязательно нужно указывать.
Размеры можно указывать в процентах от внешнего блока. Если внешнего блока нет, то размер будет в процентах от размера окна страницы. Попробуем оба варианта. В созданный нами блок с размерами поместим ещё один блок и укажем ему ширину 70%. Также создадим отельный блок и тоже укажем ширину 70%
Для примера создадим ещё один блок размером также 70% ширины окна браузера и установим ему минимальную ширину 600 пикселей. Когда Вы будете уменьшать окно браузера, этот блок уменьшится только до 600 пикселей, а далее будет неизменным.
Теперь содержимое за границами блока не отображается. Для текста это не подходит, ведь пользователь не сможет его прочитать. Попробуйте установить другие значения. Со значением scroll блок имеет обе полосы прокрутки. А со значением auto горизонтальной прокрутки нет, ведь содержимое помещается в блок по ширине.
Как уже было сказано либо inline-block либо inline, если div-ву нужны блочные свойства,то display: inline-block; , но в этом случае необходимо задавать еще vertical-align: top; что-бы блок не съезжал вниз при добавлении контента. А вообще сами можете потренироваться, почти в каждом браузере есть отладчик для разработчиков, в FireFox пишите атрибут и по очереди прокликиваете все значения, этот вариант просто незаменим для новичков, можно наглядно всё увидеть, как элементы ведут себя.
Детали модели визуального форматирования
Содержание
10.1 Определение «содержащего блока»
10.2 Ширина содержимого: свойство width
10.3 Расчет ширины и полей
10.3.1 Встроенные незаменяемые элементы
10.3.2 Встроенные заменяемые элементы
10.3.3 Блочные незамещенные элементы в нормальном потоке
10.3.4 Уровень блоков, замененные элементы в нормальном потоке
10.3.5 Плавающие незамещенные элементы
10.3.6 Плавающие заменяемые элементы
10.3.7 Абсолютно позиционированные, незамещенные элементы
10.3.8 Абсолютно позиционированные, замененные элементы
10.3.9 ‘Inline-block’, незамещенные элементы в нормальном потоке
10.3.10 ‘Inline-block’, замененные элементы в нормальном потоке
10.4 Минимальная и максимальная ширина: min-width и max-width
10.5 Высота содержимого: свойство ‘height’
10.6 Расчет высот и полей
10.7 Минимальная и максимальная высота: min-height и max-height.
10.8 Расчет высоты строки: свойства line-height и vertical-align
Положение и размер блока (ов) элемента иногда вычисляется относительно определенного прямоугольника, называемого , содержащим блок элемента. Содержащий блок элемента определяется следующим образом:
Содержащий блок, в котором корень элемент жизни — это прямоугольник, называемый исходным блоком , содержащим .Для непрерывного media, он имеет размеры области просмотра и закреплен на происхождение холста; это область страницы для страничных медиа. Свойство direction начального содержащий блок такой же, как и для корневого элемента.
Для других элементов, если положение элемента «относительное» или «статическое», содержащий блок образован краем содержимого ближайшего блок-контейнер предка.
Если элемент имеет ‘position: fixed’, содержащий блок установленный окном просмотра в случае непрерывных носителей или области страницы в случае страничных носителей.
Если элемент имеет ‘position: absolute’, содержащий блок установлен ближайшим предком с «положением» «абсолютный», «относительный» или «фиксировано» следующим образом:
В случае, если предок является встроенным элементом, содержащий block — это ограничивающая рамка вокруг полей заполнения первого и последние встроенные блоки сгенерирован для этого элемента. В CSS 2.1, если встроенный элемент разделен в нескольких строках содержащий блок не определен.
В противном случае содержащий блок образуется кромкой обивки предок.
Если такого предка нет, содержащий блок является начальным содержащий блок.
На страничных носителях позиционируется абсолютно позиционированный элемент относительно содержащего его блока, игнорируя разрывы страниц (как если бы документ были сплошными). В дальнейшем элемент может быть разорван несколько страниц.
Для абсолютно позиционированного контента, который разрешается в положение на страница, отличная от раскладываемой страницы (текущая страница), или разрешает позицию на текущей странице, которая уже была для печати, принтеры могут размещать контент
в другом месте на текущей странице,
на следующей странице, или
может не указывать.
Обратите внимание, что блочный элемент, который разделен на несколько страниц, может иметь разные ширину на каждой странице и что могут быть ограничения, зависящие от устройства.
Примеры:
Без позиционирования содержащиеся блоки (C.B.) в следующий документ:
<ГОЛОВА> Иллюстрация содержащих блоки <ТЕЛО>

Это текст в первом абзаце...

Это текст в второй абзац.

установлены в следующем составе:
Для блока, созданного CB установлен
html начальный CB (зависит от UA)
body html
div1 body
p1 div1
p2 div1
em1 p2
strong1 p2
Если мы разместим «div1»:
# div1 {позиция: абсолютная; слева: 50 пикселей; top: 50px}
содержащий его блок больше не является «телом»; это становится начальный содержащий блок (поскольку нет другие расположенные коробки предков).
Если также поставить «em1»:
# div1 {позиция: абсолютная; слева: 50 пикселей; top: 50px} # em1 {позиция: абсолютная; слева: 100 пикселей; top: 100px}
таблица содержащих блоки становится:
Для блока, созданного C.B. учрежден
html начальный C.B. (зависит от UA)
body html
div1 начальный C.B.
p1 div1
p2 div1
em1 div1
strong1 em1
Позиционируя «em1», его содержащий блок становится ближайшего расположенного предка (т. е. сгенерированного пользователем «div1»).
‘ширина’
Значение: <длина> | <процент> | авто | наследовать
Начальный: авто
Применимо к: всем элементам, кроме незамещенных встроенных элементов, строк таблицы и групп строк
Унаследовано: нет
Процентное соотношение: относится к ширине содержащего блока
Медиа: визуальный
Расчетное значение: процентное значение или «авто», как указано, или абсолютная длина
Это свойство определяет ширину содержимого блоков.
Это свойство не применяется к незамещенным встроенным элементам. В ширина содержимого блоков незамещенных встроенных элементов — это блоки визуализированных содержимое в них ( до любое относительное смещение дети). Напомним, что строчные блоки перетекают в строчные. Ширина линейных боксов задается содержащим их блоком, но может быть закорочен наличием поплавков.
Значения имеют следующие значения:
<длина>
Задает ширину области содержимого в единицах длины.
<процент>
Задает ширину в процентах. Процент рассчитывается относительно ширины сгенерированного блока содержащий блок. Если ширина содержащего блока зависит от ширины этого элемента, то итоговый макет не определен в CSS 2.1. Примечание: для абсолютно позиционированных элементов, содержащий блок на основе элемента контейнера блока, процент рассчитывается с помощью относительно ширины поля заполнения этого элемента.Это изменение от CSS1, где процентная ширина всегда была вычислено относительно поля содержимого родительского элемент.
авто
Ширина зависит от значений других свойств. См. Разделы ниже.
Отрицательные значения для «ширины» незаконно.
Примеры:
Например, следующее правило фиксирует ширину содержимого абзацев. при 100 пикселях:
p {width: 100px}
Значения свойств элемента width, margin-left, margin-right, left и right, используемые для макета. зависят от типа создаваемого ящика и друг от друга.(Используемое значение для макета иногда называют используемым значением.) В принципе, используемые значения такие же, как и вычисленные значения, с «авто» заменяется подходящим значением, и рассчитываются проценты. на основе содержащего блока, но есть исключения. Следующие ситуации необходимо различать:
рядные, незаменяемые элементы
рядный, замененные элементы
блочного уровня, незамещенные элементы в нормальном потоке
блочно-уровневая, замененные элементы в нормальном потоке
плавающие, незаменяемые элементы
плавающие, замененные элементы
абсолютно позиционированные, незаменяемые элементы
абсолютно позиционировано, заменены элементы
‘inline-block’, незамещенные элементы в нормальном потоке
‘inline-block’, замененные элементы в нормальном потоке
Для пунктов 1-6 и 9-10 значения «left» и «right» в Случай относительно расположенных элементов определяется правилами раздела 9.4.3.
Примечание. Используемое значение ширины рассчитанное ниже является приблизительным значением, и его, возможно, придется рассчитать несколько раз, в зависимости от «min-width» и «max-width», см. раздел «Минимальная и максимальная ширина» ниже.
10.3.1 Встроенные незамещенные элементы
Свойство ‘width’ не применять. Вычисленное значение ‘auto’ для ‘margin-left’ или ‘margin-right’ становится используемым. значение «0».
10.3.2 Встроенные заменяемые элементы
Вычисленное значение ‘auto’ для ‘margin-left’ или ‘margin-right’ становится используемым. значение «0».
Если обе «высота» и «ширина» имеют вычисленные значения ‘auto’ и элемент также имеет внутреннюю ширину, тогда это внутренняя ширина — это используемое значение «ширины».
Если обе «высота» и «ширина» имеют вычисленные значения ‘auto’ и элемент не имеет собственной ширины, но имеет внутренняя высота и внутреннее соотношение; или если ‘width’ имеет вычисленное значение ‘auto’, ‘высота’ имеет другие вычисленные значение, и элемент действительно имеет внутреннее соотношение; затем использованный значение ширины:
(используемая высота) * (внутреннее соотношение)
Если и «высота», и «ширина» имеют вычисленные значения ‘auto’, и элемент имеет внутреннее отношение но без собственной высоты или ширины, тогда используемое значение ‘width’ равно undefined в CSS 2.1. Однако предполагается, что если ширина содержащего блока не зависит от ширины заменяемого элемента, то используемый значение ширины вычисляется из уравнения ограничения, используемого для на уровне блоков, незамещенные элементы в нормальном потоке.
В противном случае, если ‘width’ имеет вычисленное значение ‘auto’, и элемент имеет внутреннюю ширину, тогда эта внутренняя ширина — это используемое значение «ширины».
В противном случае, если ‘width’ имеет вычисленное значение ‘auto’, но ни одно из вышеперечисленных условий не выполняется, затем используемое значение ширины становится 300 пикселей.Если 300 пикселей слишком широки для устройства, UA следует использовать ширина самого большого прямоугольника, который имеет соотношение 2: 1 и соответствует ширине устройство вместо этого.
10.3.3 Уровень блока, незамещенные элементы в нормальном состоянии поток
Должны выполняться следующие ограничения среди используемых значений других свойств:
‘margin-left’ + ‘border-left-width’ + ‘padding-left’ + ‘width’ + ‘padding-right’ + ‘ширина-справа-границы’ + ‘margin-right’ = ширина содержащего блока
Если ‘width’ не равно ‘auto’ и ‘border-left-width’ + ‘padding-left’ + ‘width’ + ‘padding-right’ + ‘border-right-width’ (плюс любой из ‘margin-left’ или ‘margin-right’, которые не являются ‘auto’) больше, чем ширину содержащего блока, затем любые ‘автоматические’ значения для ‘margin-left’ или ‘margin-right’ в соответствии со следующими правилами обрабатываются как ноль.
Если все вышеперечисленное имеет вычисленное значение, отличное от «auto», значения считаются «чрезмерно ограниченными», и одно из используемых значений будет должно отличаться от его вычисленного значения. Если «направление» свойство содержащего блока имеет значение ltr, указанное значение ‘margin-right’ игнорируется, а значение рассчитывается таким образом, чтобы равенство было истинным. Если значение «direction» — «rtl», это вместо этого происходит «крайнее левое».
Если указано ровно одно значение как ‘auto’, оно используется значение следует из равенства.
Если для параметра «ширина» установлено значение «авто», любые другие значения ‘auto’ становятся ‘0’, а ‘ширина’ следует из результирующего равенство.
Если и «маржа слева», и «margin-right» — «авто», их используемые значения равны. Это горизонтально центрирует элемент относительно краев содержащего блока.
10.3.4 Уровень блока, замененные элементы в нормальном потоке
Используемое значение ‘ширина’ определяется что касается встроенного заменено элементы. Тогда правила для незаменимых Для определения полей применяются блочные элементы.
10.3.5 Плавающие незамещенные элементы
Если поле «левое поле» или «поле справа» вычисляется как ‘auto’, их используемое значение — ‘0’.
Если ширина вычисляется как ‘auto’, используемое значение — ширина «усадки до подгонки».
Расчет на усадку width аналогичен вычислению ширины ячейки таблицы с помощью алгоритм автоматической раскладки таблиц. Примерно: рассчитать предпочтительную ширину путем форматирования содержимого без разрывов строк, кроме где происходят явные разрывы строк, а также вычислить предпочтительный минимальная ширина , e.g., попробовав все возможные разрывы строк. CSS 2.1 не определяет точный алгоритм. В-третьих, найдите доступная ширина : в данном случае это ширина содержащий блок за вычетом используемых значений ‘margin-left’, ‘border-left-width’, ‘padding-left’, ‘padding-right’, ‘border-right-width’, ‘margin-right’ и ширину любых соответствующих полосы прокрутки.
Тогда ширина усадки до посадки будет: min (max (предпочтительная минимальная ширина, доступная ширина), предпочтительная ширина).
10.3.6 Плавающие заменяемые элементы
Если поле «левое поле» или «поле справа» вычисляется как ‘auto’, их используемое значение — ‘0’.Используемое значение ширины определяется как для встроенных заменяемых элементов.
10.3.7 Абсолютно позиционированные, незамещенные элементы
Для целей этого и следующих разделов термин «статическое положение» (элемента) грубо говоря, в положение, которое элемент занял бы в нормальном потоке. Более именно так:
Блок , содержащий статическую позицию, является содержащим блок гипотетического блока, который был бы первым блоком элемент, если его указанное значение ‘position’ было ‘static’ а его указанное значение «float» было «none».(Обратите внимание, что из-за правил в разделе 9.7 это гипотетический расчет может потребовать также предположения другого вычисленное значение для ‘display’.)
Статическое положение для ‘left’ — это расстояние от левого края содержащего блока до левого края гипотетического бокса это был бы первый блок элемента, если бы его свойство ‘position’ было ‘static’ а «float» было «none». В значение отрицательное, если гипотетический box находится слева от содержащего блока.
Статическое положение для «справа» — это расстояние справа край содержащего блока к правому краю поля того же гипотетическая коробка, как указано выше. Значение положительное, если гипотетический box находится слева от края содержащего блока.
Но вместо того, чтобы рассчитывать размеры этого гипотетический ящик, пользовательские агенты могут сами делать предположения о его вероятном позиция.
Для расчета статического положения блок фиксированных позиционированных элементов — это начальный содержащий блок вместо области просмотра, и все прокручиваемые поля должны быть прокрутите до их источника.
Ограничение, определяющее используемые значения для этих элементов есть:
‘left’ + ‘margin-left’ + ‘border-left-width’ + ‘padding-left’ + ‘ширина’ + ‘padding-right’ + ‘border-right-width’ + ‘margin-right’ + ‘right’ = ширина содержащего блока
Если все три из «left», «width» и «right» являются «auto»: сначала установите любые значения ‘auto’ для ‘margin-left’ и ‘margin-right’ равны 0. Затем, если свойство ‘direction’ элемента, устанавливающего блок, содержащий статическую позицию, равен ‘ltr’ set ‘left’ к статической позиции и примените номер правила три ниже; в противном случае установите ‘right’ в статическое положение и примените номер правила один ниже.
Если ни один из трех не является «автоматическим»: если и «маржа слева», и «margin-right» — это «авто», решите уравнение при дополнительном ограничении, что два поля равны значения, если это не сделает их отрицательными, и в этом случае, когда направление содержащего блока — ‘ltr’ (‘rtl’), установите ‘margin-left’ (‘margin-right’) до нуля и решите для ‘margin-right’ (‘margin-left’). Если один из ‘margin-left’ или ‘margin-right’ равно ‘auto’, решите уравнение для этого стоимость. Если значения чрезмерно ограничены, игнорируйте значение для ‘left’ (в случае, если свойство ‘direction’ содержащего блока равно ‘rtl’) или ‘право’ (если ‘направление’ ‘ltr’) и найдите это значение.
В противном случае установите значения ‘auto’ для ‘margin-left’ и ‘margin-right’. до 0 и выберите одно из следующих шести применимых правил.
‘left’ и ‘width’ — auto, а right — не auto, тогда ширина подгоняется. Затем решите для ‘left’
.
‘left’ и ‘right’ являются ‘auto’, а ‘width’ не ‘auto’, тогда, если свойство ‘direction’ элемента, устанавливающего блок, содержащий статическую позицию, равен ‘ltr’ set ‘left’ в статическое положение, в противном случае установите «вправо» в статическое положение.Затем решите для ‘left’ (если ‘direction’ rtl ‘) или’ right ‘(если’ direction ‘равно ‘ltr’).
‘width’ и ‘right’ являются ‘auto’, а ‘left’ не ‘auto’, тогда ширина подгоняется. Затем решите «правильный»
‘left’ равно ‘auto’, ‘width’ и ‘right’ не являются ‘auto’, затем решите для ‘left’
‘width’ — это ‘auto’, ‘left’ и ‘right’ не ‘auto’, затем решите для ‘width’
‘right’ равно ‘auto’, ‘left’ и ‘width’ не ‘auto’, затем решите для «правильного»
Расчет ширины посадки до посадки аналогичен расчету ширина ячейки таблицы с использованием алгоритма автоматического макета таблицы.Примерно: рассчитать предпочтительную ширину путем форматирования содержимого без разрыва строк, кроме случаев явного разрыва строки, а также вычислить предпочтительную минимальную ширину , например, пробовать все возможные разрывы строк. CSS 2.1 не определяет точный алгоритм. В-третьих, рассчитайте доступную ширину : это находится путем решения для ‘ширины’ после установки ‘left’ (в случае 1) или ‘right’ (в случае 3) до 0.
Тогда ширина усадки до посадки будет: min (max (предпочтительная минимальная ширина, доступная ширина), предпочтительная ширина).
10.3.8 Абсолютно позиционированные, замененные элементы
В данном случае п. 10.3.7 применяется вплоть до уравнения ограничения, но остальные раздела 10.3.7 заменяется на следующие правила:
Используемое значение ширины определяется как для встроенного заменено элементы. Если ‘margin-left’ или ‘margin-right’ указано как ‘auto’ его используемое значение определяется приведенными ниже правилами.
Если и ‘left’, и ‘right’ имеют значение ‘auto’, то если свойство ‘direction’ элемента, устанавливающего блок, содержащий статическую позицию, — ‘ltr’, установите ‘left’ в статическое положение; иначе, если ‘direction’ — ‘rtl’, установите ‘right’ в статическое положение.
Если «левый» или «правый» — «авто», замените любое «авто». на ‘margin-left’ или ‘margin-right’ с ‘0’.
Если на этом этапе и ‘margin-left’ и ‘margin-right’ по-прежнему ‘auto’, решить уравнение с дополнительным ограничением, что два поля должны иметь равные значения, если это не сделает их отрицательными, в которых случай, когда направление содержащего блока — ‘ltr’ (‘rtl’), установите ‘margin-left’ (‘margin-right’) до нуля и решить для ‘margin-right’ (‘margin-left’).
Если в этот момент осталось «авто», решите уравнение за это значение.
Если на этом этапе значения чрезмерно ограничены, игнорируйте значение для любого ‘левого’ (в случае ‘direction’ свойство содержащий блок — ‘rtl’) или ‘right’ (в случае ‘direction’ — ‘ltr’) и решить для это значение.
10.3.9 ‘Inline-block’, незамещенные элементы в нормальном потоке
Если ‘width’ равно ‘auto’, используемое значение — усадка ширина как у плавающих элементов.
Вычисленное значение ‘auto’ для ‘margin-left’ или ‘margin-right’ становится используемым. значение «0».
10.3.10 ‘Inline-block’, замененные элементы в нормальном потоке
Точно так же, как inline заменены элементы.
Мин. Ширина
Значение: <длина> | <процент> | наследовать
Начальный: 0
Применимо к: всем элементам, кроме незамещенных встроенных элементов, строк таблицы и групп строк
Унаследовано: нет
Процентное соотношение: относится к ширине содержащего блока
Медиа: визуальный
Вычисленное значение: указанный процент или абсолютная длина
‘макс. Ширина’
Значение: <длина> | <процент> | нет | наследовать
Начальный: нет
Применимо к: всем элементам, кроме незамещенных встроенных элементов, строк таблицы и групп строк
Унаследовано: нет
Процентное соотношение: относится к ширине содержащего блока
Медиа: визуальный
Вычисленное значение: указанный процент или абсолютная длина или «нет»
Эти два свойства позволяют авторам ограничивать ширину содержимого до определенный диапазон.Значения имеют следующие значения:
<длина>
Задает фиксированную минимальную или максимальную используемую ширину.
<процент>
Задает процентное значение для определения используемого значения. В процент рассчитывается относительно ширины сгенерированного box, содержащий блок. Если ширина содержащего блока отрицательная, используемое значение нуль. Если ширина содержащего блока зависит от ширины этого элемента, то результирующий макет не определен в CSS 2.1.
нет
(только для максимальной ширины) Нет ограничение по ширине коробки.
Отрицательные значения для «минимальной ширины» и «максимальной ширины» недопустимы.
В CSS 2.1 влияние min-width и max-width на таблицы, встроенные таблицы, ячейки таблицы, столбцы таблицы и группы столбцов не определены.
Следующий алгоритм описывает, как эти два свойства влияют на использованное значение свойства ‘width’:
Ориентировочная используемая ширина рассчитывается (без ‘min-width’ и ‘max-width’) в соответствии с правилами в разделе «Расчет ширины и поля «выше.
Если ориентировочная используемая ширина больше, чем max-width, правила, указанные выше, применяются снова, но на этот раз с использованием вычисленного значения ‘max-width’ в качестве вычисленного значения для «ширины».
Если результирующая ширина меньше, чем min-width, правила выше применяются снова, но на этот раз с использованием значения min-width в качестве вычисленного значения для «ширины».
Эти шаги не влияют на реальные вычисленные значения вышеуказанные свойства.
Однако для замененных элементов с внутренним соотношением и обоими «ширина» и «высота» заданы как «авто», алгоритм следующий:
Выберите из таблицы разрешенные значения высоты и ширины для соответствующее нарушение ограничения.Возьмите max-width и max-height как max (min, max), так что min ≤ макс верно. В этой таблице w и h обозначают результаты вычисления ширины и высоты игнорируют свойства min-width, min-height, max-width и max-height. Как обычно это внутренняя ширина и высота, но они могут не входить в случай замененных элементов с собственными соотношениями.
Примечание. В случаях, когда явно задана ширина или высота. установлен, а другой размер — автоматический, с применением минимального или максимального ограничение на стороне авто может вызвать чрезмерно ограниченную ситуацию.Спецификация ясна в поведении, но это может быть не то, что автор надеется. Свойство CSS3 object-fit можно использовать для получения различных приводит к этой ситуации.
Нарушение ограничений Разрешенная ширина Разрешенная высота
нет w h
w> макс. Ширина макс.ширина макс. (Макс. Ширина * в / ш, мин-высота)
w Мин.ширина мин. (Мин. Ширина * в / ш, макс. Высота)
h> макс. Высота макс (макс-высота * ш / в, мин-ширина) макс. Высота
h мин. (Мин. Высота * ш / в, макс. Ширина) min-height
( w> max-width ) и ( h> max-height ), где ( max-width / w ≤ max-height / h ) макс.ширина макс (мин-высота, макс-ширина * в / ш)
( ш> макс. Ширина ) и ( ч> макс-высота ), где ( макс. Ширина / ш> макс-высота / в ) макс. (Мин. Ширина, макс. Высота * ш / в) макс. Высота
( ширина) и ( высота), где ( мин-ширина / ширина ≤ мин-высота / в ) мин. (Макс. Ширина, мин. Высота * ш / в) мин-высота
( w) и ( h), где ( min-width / w> min-height / h ) Мин.ширина мин. (Макс. Высота, мин. Ширина * в / ш)
( ширина) и ( в> макс. Высота ) Мин.ширина макс. Высота
( w> макс. Ширина ) и ( h) макс.ширина min-height
Затем примените правила в разделе «Расчет ширины и поля «сверху, как если бы» ширина » были вычислены как это значение.
‘высота’
Значение: <длина> | <процент> | авто | наследовать
Начальный: авто
Применимо к: всем элементам, кроме незамещенных встроенных элементов, столбцов таблицы и групп столбцов
Унаследовано: нет
В процентах: см. Прозу
Медиа: визуальный
Вычисленное значение: процент или «авто» (см. Текст в разделе <процент>) или абсолютная длина
Это свойство определяет высоту содержимого ящиков.
Это свойство не применяется к незамещенным встроенным элементам. См. Раздел о вычислении высот и полей. для незамещенных встроенных элементов для используемых вместо них правил.
Значения имеют следующие значения:
<длина>
Задает высоту области содержимого с помощью значения длины.
<процент>
Задает высоту в процентах. Процент рассчитывается с помощью относительно высоты содержащего блока сгенерированного бокса.Если высота содержащего блока не указывается явно (т. е. зависит от высоты содержимого), и этот элемент не совсем позиционируется, значение вычисляется как «авто». Высота в процентах на корневом элементе относительно начальный содержащий блок. Примечание: для абсолютно позиционированных элементов, содержащий блок на основе элемента уровня блока процент рассчитывается с помощью относительно высоты поля заполнения этого элемента. Это изменение от CSS1, где процент всегда был вычислено относительно поля содержимого родительского элемент.
авто
Высота зависит от значений других свойств. См. Прозу ниже.
Обратите внимание, что высота содержащего блока абсолютно позиционированный элемент не зависит от размера сам элемент, и, таким образом, процентная высота такого элемента может всегда быть решенным. Однако может оказаться, что высота неизвестна. до тех пор, пока элементы, которые появятся позже в документе, не будут обработаны.
Отрицательные значения для ‘высоты’ незаконны.
Примеры:
Например, следующее правило устанавливает высоту содержимого абзацев. до 100 пикселей:
p {height: 100px}
Абзацы, высота содержимого которых превышает 100 пикселей будет переполняться в соответствии с свойство «переполнение».
Для вычисления значений ‘top’, ‘margin-top’, ‘height’, ‘margin-bottom’ и ‘bottom’ необходимо проводить различие между ящики различного вида:
рядные, незаменяемые элементы
рядный, замененные элементы
блочного уровня, незамещенные элементы в нормальном потоке
блочно-уровневая, замененные элементы в нормальном потоке
плавающие, незаменяемые элементы
плавающие, замененные элементы
абсолютно позиционированные, незаменяемые элементы
абсолютно позиционировано, заменены элементы
‘inline-block’, незамещенные элементы в нормальном потоке
‘inline-block’, замененные элементы в нормальном потоке
Для пунктов 1-6 и 9-10 используются значения top и «дно» определяется правилами раздела 9.4.3.
Примечание: эти правила применяются к корневой элемент, как и любой другой элемент.
Примечание. Используемое значение высоты рассчитанное ниже является приблизительным значением, и его, возможно, придется рассчитать несколько раз, в зависимости от «min-height» и «max-height», см. раздел «Минимальная и максимальная высота» ниже.
10.6.1 Встроенные незамещенные элементы
Свойство ‘height’ не применять. Высота области содержимого должна зависеть от шрифта, но в этой спецификации не указано, как это сделать.UA может, например, использовать em-box или максимальный верхний и нижний нижний границы шрифта. (Последний будет гарантировать, что глифы с частями выше или ниже EM-box все еще попадают в область содержимого, но приводят к полям разного размера для разные шрифты; первый гарантирует, что авторы могут контролировать стиль фона относительно ‘line-height’, но приводит к глифам рисование за пределами области их содержимого.)
Примечание: уровень 3 CSS, вероятно, будет включать свойство для выберите размер шрифта, используемый для высоты содержимого.
Вертикальный отступ, граница и поле встроенного, без замены поле начинается сверху и снизу области содержимого и не имеет ничего делать с «высотой строки». Но при вычислении используется только высота строки. высота строки поля.
Если используется более одного шрифта используется (это может произойти, если глифы находятся в разных шрифтах), высота области содержимого не определяется данной спецификацией. Однако мы предлагаем выбирать высоту таким образом, чтобы содержимое площадь достаточно высока либо для (1) em-боксов, либо (2) для максимальное количество восходящих и нисходящих, из всех шрифтов в элемент.Обратите внимание, что это может быть больше, чем любой из размеров шрифта. задействованы, в зависимости от базового выравнивания шрифтов.
10.6.2 Встроенные заменяемые элементы, заменены элементы на уровне блока в нормальном потоке, заменен inline-block элементы в нормальном потоке и плавающие заменяемые элементы
Если для ‘margin-top’ или ‘margin-bottom’ установлено значение ‘auto’, их используемое значение — 0.
Если обе «высота» и «ширина» имеют вычисленные значения ‘auto’ и элемент также имеет внутреннюю высоту, тогда это внутренняя высота — это используемое значение «высоты».
В противном случае, если «высота» имеет вычисленное значение ‘авто’, и элемент имеет внутреннее отношение, тогда используемое значение высоты:
(используемая ширина) / (внутреннее соотношение)
В противном случае, если для ‘height’ вычисленное значение ‘auto’, и элемент имеет внутреннюю высоту, тогда эта внутренняя высота является используемым значением «высоты».
В противном случае, если «высота» имеет вычисленное значение ‘auto’, но ни одно из вышеперечисленных условий не выполняется, затем используемое значение ‘height’ должен быть установлен на высоту самого большого прямоугольника с соотношением 2: 1 соотношение, имеет высоту не более 150 пикселей и ширину не более больше ширины устройства.
10.6.3 Незамещаемые элементы блочного уровня в нормальном состоянии поток, когда ‘overflow’ вычисляется как ‘visible’
Этот раздел также применяется к незамещенным элементам на уровне блока в нормальный поток, когда «переполнение» не считается «видимым», но было распространяется на область просмотра.
Если для ‘margin-top’ или ‘margin-bottom’ установлено значение «auto», их используемое значение — 0. Если ‘height’ — ‘auto’, высота зависит от того, есть ли у элемента дочерние элементы на уровне блока и есть ли у него отступы или границы:
Высота элемента — это расстояние от верхнего края содержимого до первое применимое из следующего:
нижний край окна последней строки, если в поле устанавливается встроенный контекст форматирования с одной или несколькими строками
нижний край нижнего (возможно свернутого) поля его последний входящий дочерний элемент, если нижнее поле дочернего элемента не сжимается с нижним полем элемента
нижний край границы последнего входящего дочернего элемента, верхний край которого маржа не сжимается с нижним полем элемента
ноль, иначе
Учитываются только дочерние элементы в нормальном потоке (т.е., плавающие блоки и блоки с абсолютным позиционированием игнорируются, и относительно позиционированные боксы рассматриваются без их смещения). Примечание что дочерний блок может быть анонимным блоком.
10.6.4 Абсолютно позиционированные незаменяемые элементы
Для целей этого и следующих разделов термин «статический» позиция «(элемента), грубо говоря, относится к положению элемента пришлось бы в нормальном течении. Точнее статическое положение для ‘top’ — это расстояние от верхнего края содержащего блока до край верхнего поля гипотетического блока, который был бы первый блок элемента, если его указанное значение ‘position’ было ‘static’ и его указанный «float» был ‘none’ и его указанное ‘clear’ было «нет».(Обратите внимание, что из-за правил в разделе 9.7 это может также требуется предполагать другое вычисленное значение для ‘display’.) Значение отрицательное, если гипотетическое поле находится над содержащим блокировать.
Но вместо того, чтобы рассчитывать размеры этого гипотетический ящик, пользовательские агенты могут сами делать предположения о его вероятном позиция.
Для расчета статического положения блок фиксированных позиционированных элементов — это начальный содержащий блок вместо области просмотра.
Для абсолютно позиционированных элементов используются значения вертикального размеры должны удовлетворять этому ограничению:
‘top’ + ‘margin-top’ + ‘border-top-width’ + ‘padding-top’ + ‘высота’ + ‘padding-bottom’ + ‘border-bottom-width’ + ‘margin-bottom’ + ‘bottom’ = высота содержащего блока
Если все три из ‘top’, ‘height’ и ‘bottom’ — автоматические, установите ‘top’. к статическому положению и примените правило номер три ниже.
Если ни один из трех не является «автоматическим»: если и «верхняя граница», и «margin-bottom» — это «авто», решите уравнение с дополнительным ограничение, чтобы два поля получали равные значения.Если один из ‘margin-top’ или ‘margin-bottom’ равно ‘auto’, решите уравнение для этого стоимость. Если значения чрезмерно ограничены, игнорируйте значение для «дно» и найдите это значение.
В противном случае выберите одно из следующих шести правил, которое применяется.
«верх» и «высота» — «авто», «низ» — не «авто», тогда высота основана на содержании по 10.6.7, установите «авто» значения для ‘margin-top’ и ‘margin-bottom’ равны 0 и решают для ‘top’
«верх» и «низ» — это «авто», а «высота» не «авто», тогда установите ‘top’ в статическое положение, установите значения ‘auto’ для ‘margin-top’ и ‘margin-bottom’ равным 0, и решите для ‘bottom’
«высота» и «низ» — это «авто», а «верх» — не «авто», тогда высота основана на содержании на 10.6.7, установить авто значения для ‘margin-top’ и ‘margin-bottom’ равны 0, и решить для ‘дно’
«верх» — «авто», «высота» и «низ» — не «авто», затем установите ‘auto’ значения для ‘margin-top’ и ‘margin-bottom’ равны 0, и решаем для ‘верхняя’
«высота» — «авто», «верх» и «низ» не «авто», затем «авто» значения для ‘margin-top’ и ‘margin-bottom’ установлены на 0 и решают для ‘высота’
‘bottom’ — ‘auto’, ‘top’ и ‘height’ не ‘auto’, затем установите ‘auto’ значения для ‘margin-top’ и ‘margin-bottom’ равны 0 и решают для ‘дно’
10.6.5 Абсолютно позиционированные, замененные элементы
Эта ситуация аналогична предыдущей, за исключением того, что элемент имеет внутреннюю высоту. В последовательность замен теперь такая:
Используемое значение «высоты» определяется как для встроенных заменяемых элементов. Если ‘margin-top’ или ‘margin-bottom’ указано как ‘auto’, оно используется значение определяется правилами ниже.
Если и «верх», и «низ» имеют значение «авто», замените ‘top’ со статической позицией элемента.
Если «дно» — «авто», замените любое «auto» на «margin-top» или «margin-bottom» на «0».
Если на этом этапе оба поля «верхнее поле» и «нижнее поле» по-прежнему ‘auto’, решите уравнение с дополнительным ограничением, что два поля должны иметь равные значения.
Если в этот момент осталось только одно «авто», решите уравнение за это значение.
Если на этом этапе значения чрезмерно ограничены, игнорируйте значение для «дна» и решите для этого стоимость.
10.6.6 Сложные случаи
Этот раздел применяется к:
Блочные незамещенные элементы в нормальном потоке, когда ‘переполнение’ не вычисляется как ‘видимое’ (кроме случаев, когда ‘переполнение’ значение свойства было перенесено в область просмотра).
‘Inline-block’, незаменяемые элементы.
Плавающие незаменяемые элементы.
Если для «margin-top» или «margin-bottom» установлено значение «auto», их используемое значение — 0. Если ‘height’ — ‘auto’, высота зависит от потомков элемента на 10.6.7.
Для элементов inline-block поле поля используется при вычислении высота строки поля.
10.6.7 Высота «Авто» для контекста форматирования блока корни
В некоторых случаях (см., например, разделы 10.6.4 и 10.6.6 выше), высота Элемент, который устанавливает контекст форматирования блока, вычисляется следующим образом:
Если у него есть только дочерние элементы встроенного уровня, высота — это расстояние между верхом самого верхнего строчного прямоугольника и нижним краем крайняя нижняя строка.
Если у него есть дочерние элементы уровня блока, высота — это расстояние между верхний край-край самого верхнего дочернего блока на уровне блока и нижний край крайнего нижнего поля дочернего блока уровня блока.
Абсолютно позиционированные дочерние элементы игнорируются, а относительные позиционированные боксы считаются без их смещения. Обратите внимание, что дочерний блок может быть анонимным блоком.
Кроме того, если у элемента есть плавающие потомки нижний край поля которого находится ниже нижнего края содержимого элемента, затем высота увеличивается, чтобы включить эти края.Учитываются только числа с плавающей запятой, которые участвуют в этом контексте форматирования блока, например, поплавки внутри абсолютно позиционированных потомков или другие поплавки — нет.
Иногда бывает полезно ограничить высоту элементов определенный диапазон. Эту функциональность предлагают два свойства:
‘минимальная высота’
Значение: <длина> | <процент> | наследовать
Начальный: 0
Применимо к: всем элементам, кроме незамещенных встроенных элементов, столбцов таблицы и групп столбцов
Унаследовано: нет
В процентах: см. Прозу
Медиа: визуальный
Вычисленное значение: указанный процент или абсолютная длина
‘макс. Высота’
Значение: <длина> | <процент> | нет | наследовать
Начальный: нет
Применимо к: всем элементам, кроме незамещенных встроенных элементов, столбцов таблицы и групп столбцов
Унаследовано: нет
В процентах: см. Прозу
Медиа: визуальный
Вычисленное значение: указанный процент или абсолютная длина или «нет»
Эти два свойства позволяют авторам ограничивать высоту блока до определенный диапазон.Значения имеют следующие значения:
<длина>
Задает фиксированную минимальную или максимальную вычисленную высоту.
<процент>
Задает процентное значение для определения используемого значения. Процент рассчитывается относительно высоты сгенерированный блок, содержащий блок. Если высота содержащего блока не равна указано явно (т. е. зависит от высоты содержимого), и это элемент не позиционирован абсолютно, процентное значение обрабатывается как ‘0’ (для ‘min-height’) или ‘none’ (для максимальной высоты).
нет
(Только для «max-height») Нет ограничений по высоте коробки.
Отрицательные значения для min-height и max-height недопустимы.
В CSS 2.1 влияние min-height и max-height на таблицы, встроенные таблицы, ячейки таблицы, строки таблицы и группы строк не определены.
Следующий алгоритм описывает, как эти два свойства влияют на использованное значение свойства ‘height’:
Ориентировочная используемая высота вычисляется (без ‘min-height’ и ‘max-height’) в соответствии с правилами в разделе «Расчет высот и поля «выше.
Если эта предварительная высота больше, чем ‘max-height’, правила выше применяются снова, но на этот раз используя значение ‘max-height’ в качестве вычисленного значения для «высоты».
Если результирующая высота меньше, чем min-height, правила выше применяются снова, но на этот раз с использованием значения min-height в качестве вычисленного значения для «высоты».
Эти шаги не влияют на реальные вычисленные значения вышеуказанные свойства. Изменение используемой «высоты» не влияет на маржу. сворачивание, за исключением случаев, специально требуемых правилами для ‘min-height’ или ‘max-height’ в «Сворачивании полей» (8.3.1).
Однако для заменяемых элементов, у которых и ширина, и высота вычисляются как auto, используйте алгоритм под Минимум и максимум widths выше, чтобы найти используемые ширину и высоту. Затем примените правила в разделе «Вычислительные высоты и поля «выше, используя полученные ширину и высоту как если бы это были вычисленные значения.
Как описано в разделе о контекстах встроенного форматирования, Пользовательские агенты перетаскивают блоки встроенного уровня в вертикальный стек строчных блоков. Высота линейного бокса определяется следующим образом:
Вычисляется высота каждого блока встроенного уровня в строчном блоке.Для замененных элементов, элементов inline-block и inline-table элементы, это высота их поля поля; для встроенных боксов, это их «высота строки». (См. «Расчет высоты и поля «и высота встроенного ящики в «Ведущие и полуведущие».)
Боксы встроенного уровня выровнены по вертикали в соответствии с к их «вертикальному выравниванию» свойство. Если они выровнены по верхнему или нижнему краю, они должны быть выровнены так, чтобы чтобы минимизировать высоту строчного поля. Если такие ящики достаточно высокие, там несколько решений и CSS 2.1 не определяет позицию базовой линии линейного блока (т. е. положение стойки, см. ниже).
Высота линейного бокса — это расстояние между самыми верхними верхняя часть коробки и самая нижняя нижняя часть коробки. (Это включает стойку, как описано ниже в разделе «высота линии».)
Пустые встроенные элементы создают пустые встроенные блоки, но эти блоки все еще есть поля, отступы, границы и высота строки, и, следовательно, влияют на эти вычисления так же, как элементы с контентом.
10.8.1 Ведущий и полустремительный
CSS предполагает, что у каждого шрифта есть метрики шрифта, которые задают характерная высота над базовой линией и глубина под ней. В этом мы используем A для обозначения этой высоты (для данного шрифта в учитывая размер) и D, глубина. Мы также определяем AD = A + D , расстояние от верха до Нижний. (См. Примечание ниже, чтобы узнать, как найти A и D для шрифтов TrueType и OpenType.) Обратите внимание, что это показатели шрифта в целом и не обязательно соответствуют верхнему и нижнему элементам любого отдельного глифа.
Пользовательский агент должен выровнять глифы в незамещенном встроенном поле, чтобы друг друга по их соответствующим базовым уровням. Тогда для каждый глиф, определите A и D . Обратите внимание, что глифы в одном элементе могут происходить из разных шрифтов и, следовательно, требовать не у всех одинаковые A и D . Если встроенное поле вообще не содержит глифов, считается, что он содержит стойку (невидимый глиф нулевой ширины) с и D первого доступного шрифта элемента.
Еще для каждого глифа определите ведущий L , который нужно добавить, где L = ‘line-height’ — AD . Половина ведущая часть добавляется выше A , а вторая половина — ниже D , давая глифу и его ведущему общую высоту над базовая линия A ‘ = A + L /2 и a общая глубина D ‘ = D + L /2.
Примечание. L может быть отрицательным.
Высота встроенного блока охватывает все глифы и их половинные ведущие на каждой стороне и, таким образом, точно ‘высота линии’. Коробки дочерние элементы не влияют на эту высоту.
Хотя поля, границы и отступы незамещенных элементов не входят в расчет строкового окна, они все равно отрисовываются вокруг встроенных полей. Это означает, что если высота, указанная параметром line-height, меньше, чем высота содержимого содержащихся ящиков, фон и цвета заполнения и границы могут «просачиваться» в соседние строчные блоки.Пользовательские агенты должны отображать ящики в порядке документа. Это приведет к тому, что границы будут последующие строки, чтобы закрасить границы и текст предыдущих строк.
Примечание. CSS 2.1 не определяет какова область содержимого встроенного блока (см. 10.6.1 выше) и, следовательно, разные UA может рисовать фон и границы в разных местах.
Примечание. Это рекомендуется, чтобы реализации, использующие шрифты OpenType или TrueType используйте показатели sTypoAscender и sTypoDescender из шрифта Таблица OS / 2 для A и D (после масштабирования до шрифта текущего элемента размер).При отсутствии этих показателей «Восхождение» и «Спуск» следует использовать показатели из таблицы HHEA.
На блочном элементе контейнера чье содержание состоит из встроенного уровня элементы, ‘line-height’ определяет минимальную высоту строчных полей внутри элемента. Минимальная высота — это минимальная высота над базовой линии и минимальной глубины под ней, как если бы каждый строковое поле начинается с встроенного блока нулевой ширины с свойства шрифта и высоты строки элемента.Мы называем это воображаемым коробка «распорка». (Название навеяно TeX.).
Высота и глубина шрифта выше и ниже базовой линии Предполагается, что это метрики, содержащиеся в шрифте. (Для большего подробности см. уровень CSS 3.)
На незамещенном строчном элементе, line-height указывает высоту, которая используется при вычислении линейного поля высота.
Значения этого свойства имеют следующие значения:
нормальный
Сообщает пользовательским агентам установить используемый значение до «разумного» значения на основе шрифта элемента.В значение имеет то же значение, что и <число>. Мы рекомендуем используемое значение для «нормального» значения от 1,0 до 1,2. Вычисленное значение «нормальное».
<длина>
Указанная длина используется при расчете линейного бокса. высота. Отрицательные значения недопустимы.
<номер>
Используемое значение свойства — это число, умноженное на размер шрифта элемента. Отрицательные значения недопустимы. Вычисленное значение такое же, как указанное значение.
<процент>
Вычисленное значение свойство — это процентное соотношение, умноженное на вычисленный размер шрифта. Отрицательные значения недопустимы.
Примеры:
Три правила в приведенном ниже примере имеют одинаковую итоговую высоту строки:
div {высота строки: 1,2; font-size: 10pt} / * число * / div {высота строки: 1.2em; font-size: 10pt} / * длина * / div {высота строки: 120%; font-size: 10pt} / * процент * /
Когда элемент содержит текст, который отображается в более чем одном шрифте, пользовательские агенты могут определять «нормальное» значение «line-height» в соответствии с самый большой размер шрифта.
Примечание. Когда есть только одно значение ‘line-height’ для всех встроенных коробки в блоке контейнера блока, и все они имеют один и тот же шрифт (и нет заменяемых элементов, inline-block элементы и т. д.), вышеуказанное гарантирует, что базовые линии следующих друг за другом строк разнесены точно по высоте строки. Это это важно, когда необходимо выровнять столбцы текста с разными шрифтами, например в таблице.
‘выравнивание по вертикали’
Значение: базовый уровень | суб | супер | наверх | текст вверху | средний | внизу | текст внизу | <процент> | <длина> | наследовать
Начальный: исходный
Применимо к: inline-level и ‘table-cell’ элементам
Унаследовано: нет
Проценты: относятся к «высоте строки» самого элемента.
Медиа: визуальный
Вычисленное значение: для <процент> и <длина> абсолютная длина, в противном случае, как указано
Это свойство влияет на вертикальное позиционирование внутри строкового блока блоки, созданные элементом встроенного уровня.
Примечание. Стоимость этого объекта недвижимости разные значения в контексте таблиц. Пожалуйста, обратитесь к разделу о подробности об алгоритмах высоты стола.
Следующие значения имеют значение только по отношению к родительскому элементу. встроенный элемент или стойку родительского элемента блочный контейнерный элемент.
В следующих определениях для встроенных незамещенных элементов поле, используемое для выравнивания, — это поле, высота которого равна ‘line-height’ (содержащий глифы прямоугольника и полушаги с каждой стороны, см. выше).Для всех остальных элементов коробка для выравнивания используется поле поля.
исходный
Совместите базовую линию коробки с базовой линией родительский блок. Если в поле нет базовой линии, выровняйте край нижнего поля с базовой линией родителя.
средний
Совместите вертикальную среднюю точку прямоугольника с базовой линией. родительского блока плюс половина x-высоты родительского блока.
переходник
Опустите базовую линию коробки в правильное положение для индексы родительского поля.(Это значение не влияет на размер шрифта текста элемента.)
супер
Поднимите базовую линию коробки в правильное положение для надстрочные индексы родительского поля. (Это значение не влияет на размер шрифта текста элемента.)
текст вверху
Выровняйте верхнюю часть поля с верхней частью родительского содержимого площадь (см. 10.6.1).
текст внизу
Выровняйте нижнюю часть поля с нижней частью родительского область содержимого (см. 10.6.1).
<процент>
Увеличить (положительное значение) или уменьшить (отрицательное значение) поле на это расстояние (в процентах от значения line-height). Значение «0%» означает то же, что и «базовый уровень».
<длина>
Увеличить (положительное значение) или уменьшить (отрицательное значение) поле на это расстояние. Значение «0 см» означает то же, что и «базовая линия».
Следующие значения выравнивают элемент относительно линейного поля.Поскольку элемент может иметь дочерние элементы, выровненные относительно него (что в Turn может иметь потомков, выровненных относительно них), эти значения используют границы выровненного поддерева. Выровненное поддерево из встроенный элемент содержит этот элемент и выровненные поддеревья все дочерние встроенные элементы, для которых вычисленное значение ‘vertical-align’ равно не «сверху» или «снизу». Верх выровненного поддерева — самый высокий вершин ящиков в поддереве, и внизу аналогично.
верхняя
Совместите верх выровненного поддерева с верхом линейного блока.
нижний
Совместите нижнюю часть выровненного поддерева с нижней частью строчная коробка.
Базовая линия «встроенной таблицы» — это базовая линия первой строки стола.
Базовая линия ‘inline-block’ — это базовая линия его последней строки коробку в нормальном потоке, если только в ней нет коробок на входе или если его свойство ‘overflow’ имеет вычисленное значение, отличное от ‘visible’, в этом случае базовая линия — это край нижнего поля.
Как установить полноразмерное выравнивание содержимого в Gutenberg
Как создать полноширинные / широкоформатные контейнеры в Gutenberg без кодирования? Они могут понадобиться вам для заголовков, рекламных разделов и других областей контента, которые вы хотите выделить. Выравнивание контента по всей ширине в Gutenberg также может работать для построения визуальной иерархии между разделами и выделения некоторых из них.
Вы можете сделать это как для страниц, так и для сообщений в WordPress.
Поддержка тем для выравнивания по всей ширине
Хитрость в том, что если вам действительно нужно простое решение, эта функция (возможность охватывать всю ширину веб-сайта) должна поддерживаться вашей темой WordPress по умолчанию. То есть, поскольку это дополнительный стиль, разработчики тем должны объявить его через add_theme_support («align-wide») в functions.php, если они сочтут это разумным дополнением.
Если вы не против запачкать руки, вы можете самостоятельно добавить поддержку тем WordPress для выравнивания по всей ширине. Насколько мне известно, не существует полнофункционального плагина WordPress, который мог бы справиться с этой задачей.
Настройте различные макеты Гутенберга с помощью настроек блока
Итак, следующее руководство будет работать для вас, если ваша тема уже поддерживает его.Чтобы проверить, есть ли это, вставьте блок верхнего уровня (родительский блок, который может содержать несколько блоков) Group Gutenberg, а затем перейдите к настройке «Изменить выравнивание»:
Давайте подчеркнем разницу между этими параметрами выравнивания содержимого в Гутенберг:
Контейнеры полной ширины — и раздел, и контент занимают всю ширину экрана (WordPress выровнены)
Контейнеры большой ширины — раздел полноширинный, но содержимое фиксировано (WordPress alignwide)
Кроме того, некоторые блоки Гутенберга по умолчанию, например.г. блок Cover (который, в свою очередь, может содержать несколько блоков) и блок Gallery, поддерживают различные варианты выравнивания из коробки. Другими словами, вам не нужно помещать блок Group первым, чтобы установить выравнивание по всей ширине в Gutenberg.
Сообщения, созданные вручную для вас
Вы можете изменить выравнивание контейнера в Gutenberg WordPress как для страниц, так и для сообщений. Если ваши сообщения / макет страницы разработан с боковой панелью, полноразмерный контейнер должен охватывать область содержимого, не перекрывая боковую панель (все же обязательно проверьте это).
Например, давайте проверим макет во всю ширину блока Cover в теме GeneratePress, чтобы увидеть разницу:
Пожалуйста, имейте в виду, что для облегчения ваших страниц с точки зрения CSS, избегайте использования различных варианты выравнивания страниц с боковыми панелями.
Если вы используете сторонние надстройки Gutenberg, каждое из них также может предоставить свой способ работы с параметрами выравнивания. Например, в Getwid вы можете установить предпочтительное выравнивание для многоблочных контейнеров, начав с блока раздела:
Заключение: как установить широкое или полноразмерное выравнивание контента в Gutenberg WordPress
Растягивание контейнеров вашего веб-сайта Gutenberg в полноразмерные или широкие макеты — это легко сделать в постоянно развивающемся редакторе блоков WordPress — и это становится все проще с каждым обновлением ядра.
Некоторые важные настройки макета и выравнивания в Gutenberg зависят от важнейших концепций поддержки темы, поэтому сначала нужно убедиться, что ваша тема WordPress способна обрабатывать различные параметры выравнивания (в противном случае вам нужно добавить их самостоятельно). Мысли, вопросы?
Где изменить ширину содержимого сайта?
Это действительно зависит от вашей темы WordPress — каждая тема имеет стили по умолчанию и разные способы их изменения — например, многие темы позволяют вам устанавливать ширину контента с помощью настройщика WordPress.Благодаря редактору блоков вы можете установить ширину для определенных блоков (если ваша тема поддерживает эту ширину).
Как изменить ширину макета с помощью Getwid?
Блок Section от Getwid позволяет начать с блока полной или широкой ширины. Если ваша тема WordPress поддерживает макеты во всю ширину, это будет работать из коробки.
Как изменить ширину моей темы?
Скорее всего, вам нужно обратиться к официальной документации темы, чтобы проверить это. Вы также можете перейти в настройщик WordPress, чтобы узнать, поддерживается ли он, но будьте осторожны, чтобы не создать несогласованность в дизайне, играя с шириной.
Изменить ширину «нормального» блока
Привет, ответ на этот вопрос мне тоже очень поможет.
Это расширит нормальный текстовый блок (в теге
) от 580 пикселей по умолчанию до максимальной ширины 960 пикселей, измените это число по своему вкусу (например, если 960 пикселей слишком широкий, просто используйте 900 пикселей, 840 пикселей или 720 пикселей) .
.entry-content> p: not (.alignwide): not (.alignfull): not (.alignleft): not (.alignright): not (.is-style-wide) { максимальная ширина: 960 пикселей; }
Просто скопируйте и вставьте код в Внешний вид> Настроить> Дополнительный CSS .
Привет @paulwp
Большое спасибо, это очень хорошо работает.
Есть ли способ настроить списки, заголовки, изображения, блог и кнопки так, чтобы все было выровнено по левому краю?
С уважением,
Кристина
Да, это тот же код, но вместо p на * (символ звездочки)
или просто скопируйте это, чтобы использовать вместо этого кода
.entry-content> *: not (.alignwide): not (.alignfull): not (.alignleft): not (.alignright): not (.is-style-wide) { максимальная ширина: 960 пикселей; }
дорогой @paulwp
У меня другой вопрос: можно ли изменить цвет акцента, выбрав шестнадцатеричный цвет вместо цветовой полосы?
Идея обсуждалась, но пока не так много, дело в том, что они хотят, чтобы эта тема вычисляла цветовой контраст, чтобы пройти стандарт доступности
вы можете увидеть подробности здесь
https: // core.trac.wordpress.org/ticket/48679
На полях:
Инструмент выбора цвета в админке отлично подходит для конечных пользователей, но, возможно, я просто чувствую, что UX не очень гладкий. В веб-инструменте Chrome для разработчиков есть предварительный просмотр в режиме реального времени с палитрой цветов, с которым проще работать. Когда я создаю веб-сайт для своего клиента, я бы устанавливал любой цвет только для запуска автоматически сгенерированного CSS темы, затем просматривал исходный код в интерфейсе, чтобы получить этот набор селекторов CSS, а затем использовать его для назначения цвета, который я хочу в Custom CSS или дочерних темах. CSS.
Модератор Джеймс Хафф
(@macmanx)
Волонтер-модератор
Могу ли я изменить цвет акцента, выбрав шестнадцатеричный цвет вместо цветовой шкалы?
Вот ответ, который вы ищете: https://wordpress.org/support/topic/how-can-i-change-the-link-color-to-a-specific-hexcode/#post-12130660
@paulwp @macmanx большое спасибо за ваше объяснение и ссылки с дополнительной информацией.Приятно, что стандарты доступности интегрируются. Я понимаю, знаю, как это работает и почему.
С уважением, Крис
Всем спасибо за помощь!
@paulwp Это не работает для wp-block-group .
Что может быть альтернативой?
@paulwp огромное спасибо! Это мне очень помогает.
Я вставил .entry-content> p: not (.alignwide): not (.alignfull): not (.alignleft): not (.alignright): not (.is-style-wide) {
max-width: 960px;
}
Это относилось к некоторым моим сообщениям, но не к другим. Думаю, разница в том, что первые были созданы с помощью редактора блоков, а вторые — с помощью классического. Есть ли способ сделать все мои старые сообщения шире?
спасибо
гэри
@paulwp Спасибо — ширина текста тоже была проблемой на моем сайте.Ваше предложение исправило это.
@paulwp, Спасибо. Это сработало и на моем веб-сайте ..
Почему ширина редактора блоков по умолчанию не равна ширине содержимого
«То, что вы видите в редакторе при отсутствии темы, обеспечивающей ширину редактора, — это ширина строки, оптимизированная для удобочитаемости, которая составляет около 70 символов в строке при размере шрифта по умолчанию. Но это все еще признание того, что эта ширина не подходит для всех, поэтому тема может это изменить.”
Если у вас длинный контент и вы хотите разделить абзацы, вам нужно иметь возможность видеть контент так, как его увидит пользователь при чтении. Если количество строк отличается от того, как выглядит абзац в конечном результате, это создает путаницу у автора, который должен вернуться и повторно отредактировать текст много раз.
Вот почему соответствие того, что отображается в Gutenberg, и конечного результата с точки зрения всего — ширины, стиля, шрифта и т. Д. Должно быть 1: 1.
Я использую много тем и не готов редактировать их одну за другой.Я не думаю, что каждый разработчик сможет обновить свою тему. Также в наши дни многие темы сдаются в аренду, вы платите подписку, когда вы останавливаетесь — перестают обновляться. Многие предприятия, некоммерческие организации и личные блоги используют устаревшие темы.
На них вы все еще можете получить полное редактирование первой страницы с помощью сторонних разработчиков страниц. Я не верю в сторонние конструкторы страниц, их блокировку и будущее развитие экосистемы, мне также не нравится их медлительность.
Дело в том, что я думаю, что Гутенберг и WordPress в целом должны начать искать способ реализации и брать эти стили из тем и применять их в Гутенберге, а не ждать, пока разработчики тем и владельцы тем получат последнюю версию, которая их поддерживает.Давайте будем честными — многие темы, к сожалению, не будут обновлены, оставим ли мы их без поддержки WYSIWYG?
Не уверен, возможно ли это, но будет лучше, если Гутенберг найдет способ сделать это из тем, а не ждать, пока разработчики тем и владельцы тем будут его реализовывать.
Я думаю, что для редактора, чтобы что-то написать, критично иметь одинаковую ширину. Какой длины должны быть абзацы, как он мог бы представить ее логику, чтобы UX конечного пользователя соответствовал тому, что он представлял в редакторе.Если ваша логика разбита на абзац из 5-6 предложений и выглядит длинным, но если вы разрежете его пополам, это не имеет логического смысла для следующих абзацев, вам все равно придется перефразировать предложения. Длина абзацев и их ширина должны соответствовать тому, что видит конечный пользователь.
Также я считаю, что должна быть возможность переключения для другого типа контента, когда людям нужно сканировать статью для других вещей. В этом случае люди с 27-дюймовыми iMac и широкими экранами 32-дюймовых, 34-дюймовых и 38-дюймовых мониторов должны иметь возможность видеть, когда они выбирают переключатель, свой контент в ширину своего окна, чтобы они могли видеть на их экране растягивается очень длинный контент, аналогичный тому, что можно было бы достичь с помощью классического редактора.
Ajax Scientific — LI272-0110 Прямоугольный стеклянный блок, длина 110 мм x ширина 61 мм x толщина 19 мм: Научная лаборатория Расходные материалы для кабинетов физики: Amazon.com: Industrial & Scientific
Цена: 16 долларов.00 + Отсутствие залога за импорт и $ 16,86 за доставку в Российскую Федерацию Подробности
Убедитесь, что это подходит введя номер вашей модели.
Размеры упаковки: 5 Д x 1 В x 3 Вт (дюймы)
Вес упаковки: 1 фунт
Страна происхождения: Индия
Номер детали: LI272-0110
]]>
Характеристики
Фирменное наименование Ajax Scientific
Толщина изделия 19 миллиметров
Длина 110 миллиметров
Материал Стекло
Номер модели LI272-0110
Кол-во позиций 1
Номер детали LI272-0110
Код UNSPSC 60100000
Ширина 61 миллиметр
Рекомендации по изображениям для блоков содержимого
Прежде чем загружать изображения в Mailchimp, ознакомьтесь с этими рекомендациями по изображениям, чтобы убедиться, что они будут отлично выглядеть.Наши рекомендации основаны на типе блокировки контента, который вы используете в своей почтовой кампании или целевой странице.
В этой статье вы узнаете о наших рекомендациях для изображений в блоках содержимого Изображение, Карточка с изображением и Изображение + Текст.
Общие советы для изображений
Вот несколько общих советов для ваших изображений.
Формат
При сохранении изображений используйте формат PNG, JPG или GIF. Вы можете использовать формат PNG, если вам нужно сохранить прозрачность.
Цветовой режим или профиль
Цвета, используемые в Интернете, отличаются от цветов, используемых при печати, поэтому важно убедиться, что цвета на изображениях установлены правильно. Веб-изображения следует сохранять с цветовым профилем или режимом RGB. CMYK, который дизайнеры используют для печати, не отображает точно в Интернете и иногда может нарушить ваше встроенное изображение.
Альтернативный текст
Рекомендуется добавлять замещающий текст к изображениям. Альтернативный текст важен для доступности и для зрителей, у которых могут возникнуть проблемы с загрузкой ваших изображений.Это также может помочь с поисковой оптимизацией ваших целевых страниц.
Экраны высокой четкости
Многие смартфоны, планшеты и ноутбуки оснащены экранами высокой четкости, такими как дисплеи Retina, которые предлагают более высокое соотношение пикселей на дюйм. Это означает, что некоторые изображения могут выглядеть нечеткими на этих дисплеях. Чтобы ваши изображения четко отображались на всех экранах, вы можете использовать фотографию с более высоким разрешением в блоке содержимого изображения и ограничить размеры.
Размер файла
Лучше избегать слишком больших изображений как по размеру файла, так и по размеру в пикселях.Мы рекомендуем максимальный размер файла для изображений 1 МБ. 72 DPI обычно достаточно для Интернета, но не требуется. Мы не рекомендуем загружать изображения, размер которых значительно превышает размер области содержимого или шаблона.
Размер изображения
Электронные письма и целевые страницы имеют ограниченную ширину изображений. Хотя Mailchimp будет пытаться автоматически изменять размер изображений, чтобы они поместились в электронном письме, очень большие изображения могут замедлить загрузку или обрезать ваши электронные письма. В следующих разделах рекомендована ширина изображения, которая лучше всего вписывается в раздел.
Размеры изображений для писем
Шаблоны электронной почты
Mailchimp имеют ширину 600 пикселей, поэтому лучше всего рассчитывать размер изображений с учетом максимальной ширины.
Рекомендации по размеру изображения зависят от количества столбцов в шаблоне электронной почты.
97
Столбцы Рекомендуемая ширина изображения
Полноразмерные изображения раздела 564px
2 изображения раздела столбца 264px 264px
3 изображения раздела столбца
Размер также может варьироваться в зависимости от типа блока содержимого, с которым вы работаете.Вот наши рекомендации по размеру изображений в блоках содержимого «Изображение», «Карточка изображения», «Изображение + текст» и «Группа изображений» в вашей кампании по электронной почте.
Изображение
Настройки блока содержимого Рекомендуемая ширина изображения
От края до края 564px
Карта изображения
Изображение текст
Настройки блока содержимого Рекомендуемая ширина изображения
Поля установлены от края до края 564px
Поля не установлены от края до края 528px
Настройки блока содержимого Рекомендуемая ширина изображения
С выравниванием по левому или правому краю с выравниванием одной трети ширины заголовка 352px
С выравниванием по левому или правому краю с половиной ширины заголовка 264px
С выравниванием по левому или правому краю с шириной подписи в две трети 176px
С выравниванием по левому или правому краю с шириной подписи в три четверти 132px
Группа изображений
Если вы добавляете блоки группы изображений в раздел, состоящий из нескольких столбцов, убедитесь, что изображения меньшего размера достаточно четкие, чтобы их могли видеть получатели.
Настройки блока содержимого Рекомендуемая ширина изображения
Полноразмерные изображения 564px
2 изображения раздела столбца 264px
Размеры изображений для целевых страниц
Целевые страницы
Mailchimp бывают разной ширины, поэтому идеальный размер изображения зависит от выбранной вами ширины. Прежде чем загружать изображения в Mailchimp, отмасштабируйте их до необходимого размера, чтобы удалить ненужные пиксели.
Если вы установите ширину целевой страницы на 100%, изображения могут отображаться по-разному в зависимости от разрешения экрана человека, просматривающего вашу целевую страницу. В этом случае мы рекомендуем использовать изображения большего размера. Но важно помнить, что изображения большего размера могут замедлить вашу целевую страницу.
Вот наши рекомендации по размеру изображений в блоках содержимого «Изображение», «Карточка изображения», «Изображение + текст» и «Группа изображений» на вашей целевой странице.
Изображение
924px
924px
924px
924px
Ширина страницы Рекомендуемая ширина изображения
780px 564px
960px 924px
1224px
1224px
1224px
1224px
Карточка с изображением
край не установлен край до края
97 1152px
Ширина страницы Настройки блока содержимого Рекомендуемая ширина изображения
780px От края до края 744px
780px
780px 708px
960px От края до края 924px
960px От края до края не от края до края 888px
1224px От края до края 924px
1224px Поля не установлены от края до края 888px
1332px Поля установлены от края до края 1188px
1332px Поля не заданы от края до края
Изображение + текст
900 94
Ширина страницы Настройки блока содержимого Рекомендуемая ширина изображения
780px С выравниванием по левому или правому краю, с одной третью ширины заголовка 515px
7 Выровнен по левому или правому краю, с половиной ширины подписи 363px
780px Выровнен по левому или правому краю, с шириной подписи в две трети 211px
780px Выровнен по левому или правому краю, с тремя ширина подписи на четверть 173px
960px Выровнено по левому или правому краю, с шириной подписи на одну треть 642px
960px Выровнено по левому или правому краю, с половиной ширины подписи 453px
960px Выровнено по левому или правому краю, ширина заголовка составляет две трети 265px
960px Выровнено по левому или правому краю, с шириной подписи на три четверти 218px
1224px Выровнено по левому или правому краю, с одной третью ширины подписи 642px
1224px Влево или вправо с выравниванием, с половиной ширины подписи 453px
1224px Выровнено по левому или правому краю, с шириной подписи в две трети 265px
1224px Выровнено по левому или правому краю, с шириной заголовка три четверти 218px
1332px Выровнено по левому или правому краю, с шириной подписи на одну треть 827px
1332px Выровнено по левому или правому краю, с половиной ширины подписи 585px
1332px Влево или с выравниванием по правому краю, с шириной подписи в две трети 344px
1332px С выравниванием по левому или правому краю, wi th три четверти ширины подписи 284px
Группа изображений
097 2 раздела столбца
Ширина страницы Настройки блока содержимого Рекомендуемая ширина изображения
780px Полноразмерные изображения 744px
780px 363px
960px Изображения во всю ширину 924px
960px 2 изображения разделов столбцов 453px
1224px Полноширинные изображения 924px
12 2 изображения раздела столбца 453px
1332px Изображения во всю ширину 1188px
1332px 2 изображения раздела столбца 585px
Регулировка ширины целевой страницы
Чтобы настроить ширину целевой страницы, выполните следующие действия.
Щелкните значок Кампании .
Щелкните Все кампании .
Если у вас более одной аудитории, щелкните раскрывающийся список Текущая аудитория и выберите ту, которая связана с вашей целевой страницей.
Щелкните черновик целевой страницы, с которой хотите работать.
Щелкните вкладку Style .
Щелкните Страница .
В разделе Page Container Style выберите ширину.
Нажмите Сохранить .
Фоновые изображения на целевых страницах
Фоновые изображения большего размера будут выглядеть чище на больших экранах, но мы рекомендуем оставлять изображения шириной от 1500 до 2500 пикселей. Рекомендуемая высота изображения зависит от того, сколько контента у вас на целевой странице, но важно помнить, что изображения большего размера могут замедлять работу вашей страницы.
CSS Inline vs Inline-Block vs Block
Хорошо, давайте заменим изображения на CSS.Помимо вопросов об алгоритме JavaScript, вы, как Front End-разработчик, также можете получить вопросы, связанные с CSS. Итак, давайте убедимся, что вы готовы, и углубим свои основы работы в Интернете!
Меня действительно спросили об этом в интервью. Я проходил собеседование на роль Front-end, поэтому готовился только к вопросам алгоритма. Так что я немного наткнулся на это 😰 Это лучшая часть ошибок, у вас есть шанс извлечь из них уроки, чтобы не повторять их снова. Вот почему я всегда рекомендую людям подавать заявки в как можно большее количество мест.Собеседование похоже на любой навык: чем больше вы практикуетесь, тем лучше вы становитесь. Теперь этот вопрос меня больше не беспокоит, потому что я буду готов! И вы тоже, давайте начнем!
а.
встроенный
Отображает элемент как встроенный элемент. Никакие свойства высоты и ширины не будут иметь никакого эффекта.
Свойство display определяет поведение отображения элемента. Это необходимо знать для управления компоновкой элемента. Существует множество ценностей собственности.Но давайте начнем с основного inline .
Отображает элемент в строке или в той же строке. Другими словами, встроенные элементы НЕ начинаются с новой строки и занимают ровно столько ширины, сколько ее содержимое. Итак, если вы попытаетесь установить любую ширину и высоту, это не будет иметь никакого эффекта.
inline elements
Вот несколько элементов, которые имеют свойство inline по умолчанию :
И большинство тегов форматирования также по своей сути inline :
b.
inline-block
Отображает элемент как контейнер блока встроенного уровня. Вы МОЖЕТЕ установить значения высоты и ширины.
Хорошо, перейдем к инлайн-блоку . По сути, это то же самое, что и встроенный , за исключением того, что вы можете установить значения высоты и ширины.
г.
block
Проверить длину строки
До сих пор мы говорили о inline . А теперь перейдем к противоположному, блоку .Помните, что встроенных элементов находятся в одной строке. Итак, блок начинается с НОВОЙ строки и занимает всю доступную ширину. Это означает, что блочные элементы будут занимать всю ширину своего родительского элемента.
block elements
Вот несколько элементов, которые имеют свойство по умолчанию block :
Объяснение не для разработчиков
Представьте, что если вы посещаете концерт, у вас есть ряды мест, верно. Если вы назначите своему другу место inline , он сядет рядом с вами.Итак, что касается встроенных сидений , все они являются одним и тем же физическим стулом. Вы не можете манипулировать стулом, чтобы сделать его больше или меньше. Один размер подходит всем, что они называют!
Теперь ваша подруга Дженнифер хочет присоединиться к вам, но потому что она дочь владельца стадиона. Ей назначают мест в рядном блоке . Что ж, она все еще может сидеть рядом с тобой. Потому что она «в русле» с тобой (плохой каламбур, смеется and), и, конечно же, ты хочешь, чтобы она села рядом с тобой. Однако, поскольку она дочь стадиона, ее мама хочет убедиться, что ей комфортно.Поэтому она дает ей специальное сиденье, где ее стул настраивается и может быть отрегулирован, чтобы сделать его больше или меньше. Кумовство в самом лучшем виде 🤫
Твоя одноклассница Анджелина тоже идет на концерт. Теперь твоей подруге Дженнифер она не очень нравится. Поэтому она просит маму выделить ей место в блоке . Таким образом, Анджелина не сядет рядом с вами. Вместо этого она сидит в следующем ряду.
Окончательное решение
inline Элемент не начинается с новой строки, а занимает только необходимую ширину.Вы не можете установить ширину или высоту.
inline-block Форматируется так же, как встроенный элемент, но не начинается с новой строки.

width | htmlbook.ru

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

Версии CSS

Описание

Синтаксис

Значения

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

Браузеры

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

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

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

Приоритеты у блоков

Сокрытие лишнего содержимого в блоке

Поведение блоков по ширине

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

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

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

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

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

Заключение

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

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

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

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

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

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

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

Итог

PSD to HTML

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

2 ответа

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

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

Ответить Отменить ответ