Блочные элементы


Содержание

Типы элементов

До сих пор мы создавали элементы и даже не задумывались какой у них тип и почему они расположены именно так, а не иначе.

А вы не замечали почему некоторые элементы стоят в строку, а другие могут спокойно выстраиваться в ряд?

Ссылки стоят на одной строке, хотя в разметке не так:

Это происходит из-за того, что в HTML большинство элементов либо блочные либо строчные.

Строчные элементы

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

Примеры строчных элементов: картинки , инпуты , теги стилизации , и т.д.

Элемент

Элемент — строчный элемент, который требует закрывающего тега. Частенько используется когда нужно обернуть текст чтобы сделать с ним что-то, например — изменить цвет.

Блочные элементы

Блочные — противоложоность строчным, они пишутся на новых строках.

Примеры блочных элементов: заголовки

, форма , списки

    ,
      , и т.д.

Элемент

Позволяет писать CSS свойства прямо в теге. Это считается плохой практикой, поэтому мы опустим этот атрибут.

Задачи

Светофор

В рамках текущего урока сделайте вот такой светофор из текста:

Маленькая подсказка: элемент div — основной блок, чтобы сделать ему такой задний фон пропишите в стили background-color: #111;

Помогайте другим!

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

Изучаем блочные элементы

Изучаем блочные элементы с помощью CSS-свойств

Добрый день, в данной статье рассмотрим CSS-свойства, влияющие на ширину и высоту блочных элементов.

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

Допустим нам нужно создать блок div , который должен иметь ширину 200px , высоту 100px и фон зелёного цвета с синим оттенком:

Добавим нашему элементу, границу border насыщенного-голубого цвета #08a и шириной в 15px :

Ширина нашего элемента div станет 230px

Отсюда следует вывод, что CSS-свойство border, увеличивает уже имеющуюся высоту и ширину.

Рассмотрим другие CSS-свойства, которые делают тоже самое, это margin (внешний отступ) и padding (внутренний отступ).

Сначала приведем пример с CSS-свойством padding , сделаем его размеры 15px .

Теперь ширина элемента стала 260px .

Добавляем CSS-свойство margin со значением 15px .

Ширина блочного элемента станет 290px .

Данные нюансы, видоизменяя высоту и ширину, частенько мешают в вёрстке сайтов. Поэтому чтобы ширина и высота была стабильной, например всегда оставалась 200px в независимости от размеров CSS-свойств border , padding или margin , нужно нашему элементу присвоить CSS-свойство box-sizing , со значением border-box .

Как мы видим размеры свойств границ border и внутренних отступов padding , стали частью изначальной ширины 200px и высоты 50px блочного элемента.

А вот CSS-свойство margin не стало частью ширины и высоты нашего элемента, поэтому при задании размеров блочным элементам, учитывайте данный момент.

5 Replies to “Изучаем блочные элементы”

Наверное следующая тема по блокам интересная Это позиционирование и использование свойств присваиваемых блокам в css ;)!

неплохо было указать, что указывая margin и padding просто цифрой, оступы и границы задаются для всех сторон одинаково, для конкретного отступа/границы нужно прописывать друг за другом цифры:
margin: 10px 15px 10px 15px;
отступы будут 10 пикселей снизу и сверху, 15 — слева и справа
так же это можно записать:
margin-top:10px;
margin-left:15px;
margin-right:15px;
margin-bottom:10px;
что это что это (margin: 10px 15px 10px 15px;) абсолютно равнозначны, тоже самое касается padding, border

Блочные элементы веб-страницы

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

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

Существует два основных типа элементов страницы: блочные и строчные. Каждый из них имеет свои свойства.

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

1. Что за блочные элементы такие?

Блочные элементы HTML страницы имеют форму прямоугольника. Внутри блочных элементов могут содержаться другие элементы (блочные и строчные).

Блочные и строчные элементы

В языке HTML выделяют две основные категории элементов. данные категории соответствуют типам их содержимого и поведению в структуре веб-страницы. Это блочные и строчные элементы. Блочные элементы используются для создания структуры страницы. Строчные же используются для форматирования текстовых фрагментов веб-страницы.

Весь HTML документ организован в виде дерева элементов. В то же время модель CSS представляет собой алгоритм, обрабатывающий HTML документ. Каждый блок в дереве — это соответствующий элемент или псевдоэлемент.

Каскадирование и наследование в CSS используется для создания дерева блоков. Они позволяют назначить значение для каждого css-свойства каждому элементу в исходном дереве.

Факторы определяющие положение блоков на странице:

  • размер элемента;
  • тип элемента (строчный или блочный);
  • отношение между элементами DOM;
  • схема позиционирования;
  • внешняя информация (размер окна браузера);
  • размер внутренних изображений.

Блочные элементы и контейнеры

Блочные элементы — это элементы высшего уровня. Они форматируются визуально как блоки. Располагаются такие элементы на странице в окне браузера вертикально. Свойство display со значениями block, list-item, table делают элемент блочным.

Основы CSS: блочная модель

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

В этой статье для начинающих мы разбёремся, что такое блочная модель и как она работает. Сначала мы пройдёмся по теоретической части, а затем применим её на практике.

Блоки — они повсюду!

Первое, что нужно понять для эффективного использования CSS, — всё, что вы видите на странице, состоит из прямоугольников. Каждый сайт представляет собой ничего более, чем набор прямоугольных блоков, расположенных рядом, сверху, снизу и внутри друг друга.

Заголовок? Прямоугольник. Боковая панель? Прямоугольник. Изображение? Тоже прямоугольник. Само собой, обычно мы называем их не прямоугольниками, а HTML-элементами, которые бывают разных типов.

Строчные и блочные элементы

Есть два типа HTML-элементов: строчные и блочные. Между ними есть разительные отличия, которые также влияют на использование блочной модели CSS.

Level.Travel, Москва, до 200 000 ₽

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

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

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

Если вы пользуетесь WordPress, то вы, скорее всего, очень хорошо знакомы со строчными элементами, даже если вы об этом не знаете. Когда вы при написании текста выделяете его жирным или курсивом, WordPress добавляет . и . вокруг него, чтобы добиться нужного эффекта.

Просто откройте вкладку Текст в режиме редактора для просмотра кода содержимого и вы всё увидите:

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

Так или иначе, из-за такого поведения большая часть блочной модели CSS применима только к блочным элементам. Скоро вы поймёте, почему.

Так что это за блочная модель?

Возможно, вы об этом не знаете, но у каждого HTML-элемента есть блок, который его окружает. Этот блок состоит из нескольких слоёв, которыми можно независимо управлять с помощью CSS. Это позволяет разместить элементы относительно друг друга и оформить их разными способами.

Вот из чего состоят слои:

  • Ширина — ширина площади содержимого элемента. Для блочных элементов значение по умолчанию равно 100%. У строчных элементов ширина зависит от содержимого.
  • Высота — определяет высоту элемента. Как правило, она зависит от внутреннего содержимого, но при желании можно указать конкретную высоту. Опять же, это работает только с блочными элементами.
  • Границы — границы есть у каждого элемента, даже если вы их не видите. У них может быть разный размер, цвет и оформление.
  • Отступы — они определяют расстояние между границей элемента и его содержимым. Их можно использовать, например, для того, чтобы текст внутри элемента оставался читаемым.
  • Поля — они определяют расстояние между границей элемента и тем, что его окружает.

Вот вам, собственно, и блочная модель CSS. Она становится ещё понятнее, если взглянуть на эту диаграмму:

Так как у каждого из слоёв есть соответствующее CSS-свойство, блочная модель представляет основные способы определения размера, положения и внешнего вида HTML-элемента. Как следствие, вы получаете возможность сильно изменить содержимое страницы. Рассмотрим несколько примеров, чтобы понять, как это работает.

Примеры использования блочной модели

Создадим простую страницу с блочным элементом:

Это просто HTML-документ с текстом внутри контейнера div . В браузере он выглядит так:

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

Давайте внесём несколько изменений.

Изменяем ширину

Первое, что мы сделаем, — определим ширину. Как было упомянуто ранее, сейчас её значение равно 100%. Чтобы изменить его, нам нужно взаимодействовать со свойством width .

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

Добавляем новое свойство в стили:

После перезагрузки страницы вы должны увидеть следующее:

Вы сразу заметите, как теперь ограничено растягивание div вправо. Также, как видите, его высота автоматически изменяется, чтобы уместить внутренний текст. Давайте ещё увеличим её.

Увеличиваем высоту элемента через CSS

Хотя содержимое вполне себе умещается в пределах прямоугольника, порой есть веские причины ещё увеличить высоту. Например, что, если мы захотим, чтобы элемент был квадратом? Это вполне достижимо с помощью следующего свойства в нашем списке — height .

С высотой мы можем делать всё то же самое, что и с шириной: устанавливать фиксированное или пропорциональное значение. Добавляем в стили:

В итоге страница выглядит так:

Как видите, элемент принял нужную нам форму, так как мы установили одинаковые значения для высоты и ширины.

Знакомимся с границами

Теперь изменим границы. Как упоминалось, границы уже есть, просто мы их не видим. Изменим это с помощью свойства border .

Важно знать, что это свойство принимает три значения: width , style и color . Width отвечает за толщину границы (обычно в пикселях), style может принимать значения solid , dahsed , dotted и т.д., а в color можно прописать цвет как словом вроде «red», так и hex-значением цвета.

В принципе, достаточно просто определить толщину границ. Тем не менее, в большинстве случаев результат будет лучше при определении всех трёх значений. Меняем CSS:

И получаем результат:

Выглядит здорово, не так ли ��

Также обратите внимание, что для разных сторон можно установить разные типы границ с помощью свойств border-top , border-right , border-bottom и border-left .

Добавляем отступы

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

Вот как это отразится на результате:

Так же, как и с границами, можно настроить отступы отдельно для каждой стороны элемента. Для этого используются свойства padding-top , padding-right , padding-bottom и padding-left .

Можно не прописывать отдельно все эти свойства, а описать все отступы одной строкой вроде padding: 10px 5px 15px 10px; . Здесь значения соответствуют отступам сверху, справа, снизу и слева соответственно.

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

Добавляем поля

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

Добавим margin в стили:

Выглядит это так:

Как видите, в результате элементы отодвинулись от краёв страницы. Однако поля для элемента определены со всех сторон, а не только сбоку и сверху. Скопируем div , чтобы это можно было увидеть:

Сейчас у нас одинаковые поля со всех сторон. Однако для разных сторон можно установить свои значения. Это работает так же, как и с отступами: margin-top , margin-left и т. д или однострочное сокращение.

Поля частично применимы к строчным элементам, но только к боковым сторонам.

Немного о размерах элементов

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

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

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

Тем не менее, поля всё ещё влияют на общий размер элемента. Держите это в голове, когда будете работать над разметкой страницы.

Подводим итог

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

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

Блог Vaden Pro

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

Блочный элемент – это основной конструктивный элемент страницы, который можно представить в виде прямоугольника. К ним относятся: p,div, h1-h6 и так далее. Однако они имеют ряд особенностей.

Особенности блочных элементов

  1. Может иметь родителя body > , в соответствии с правилами. К примеру, тэг li > обязан иметь в родителях тэг ul > или ol > .
  2. Могут быть родителями для практически всех других элементов. Однако и тут есть свои исключения из правил,внутри тэга p > могут находиться только строчные элементы.
  3. Им можно задавать значения w > table > padding применять нельзя.
  4. Каждый новый блок, начинается со следующей строки.

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

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

Мы можем воспользоваться рядом решений для задания ширины этим элементам. Основные, из которых рассматриваются далее:

Дочернему элементу блочного типа задана фиксированная ширина

Если ширина у дочернего элемента имеет некоторое значение, то ширина родителя не будет на неё влиять (вне зависимости больше она его или меньше).

Ширина задана в процентах

Если задать ширину в процентах, то она будет напрямую завесить от ширины родителя.

Ширина не указана

Если элементу не была задана ширина( max-width, min-width, width), то она принимает значение auto. В таком случае дочерний блочный элемент займёт всю область контента родительского элемента.

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

Пример, когда у родительского элемента задана ширина 220px и 250px, представлен ниже.

Если блочному, дочернему элементу задано некое значение max-width, то вне зависимости от ширины родителя они не превысят этого значения. Также если элементу задан min-width,то он не будет меньше этого значения, даже если ширина родителя меньше. В таком случае ширина дочернего элемента будет больше родительской.

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

Ширину дочернего блока можно увеличить. Это можно достичь за счет добавления отрицательного отступа.

Высота блочного элемента

Как и в случае с шириной, если высота не задана, то по умолчанию она принимает значение auto.

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

Вывод

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

HTML верстка: блочные и строчные элементы

В HTML существует всего 2 типа элементов — блочные и строчные. Блочные элементы — те, которые занимают всю ширину страницы или контейнера. С помощью блоков можно создать хорошую структуру веб-страницы.

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

Визуальное форматирование

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

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

Блочная верстка

Блок — контейнер, в котором содержится различная информация, например, изображения, ссылки, текст и т.д. Он является их объединением и имеет свои размеры. К примеру, тег — блок, который содержит в себе всё визуальное оформление веб-страницы.

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

Это пример создания белой рамки со сплошной линией, ширина которой равна 3 пикселям.

Для всех блоков существуют внутренние и внешние отступы, которые задаются с помощью специальных свойств.

Padding — свойство для определения внутренних отступов (расстояние между содержимым блока и его границами). Важно! Если контейнер пустой, то содержимым является и пустая часть.

Margin — внешние отступы, позволяет задавать расстояние между блоками.

Для блочных элементов можно задать ширину и высоту:

Здесь создается контейнер с шириной в 80% от размеров экрана и половиной высоты экрана (1vh — 1% от высоты).

Существует огромное количество блочных элементов: div >, p >, h1 >, h2 >, form >, table >, ul >, ol > и так далее. Это далеко не все блоки, но они используются чаще всего.

Раньше для создания хорошей структуры элементов на странице пользовались тегами div, задавая им различные классы и >header >, section >, article >, aside >, footer >, nav >. Эти теги стали новым стандартом в web.

Строчные элементы

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

Строчные элементы — внутренние составляющие блочных контейнеров, в которых они расположены.

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

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

Блочно-строчные элементы

Полублочные элементы — элементы, которые по своим свойствам являются строчными. У них так же определяется высота и ширина.

Основное отличие полублочных элементов в том, что они поддаются изменениям ширины, высоты и отступов через CSS.

Изменение типа контейнера

По умолчанию, в html задается свойство, определяющее то, к какому разряду элементов они принадлежат. В CSS же, этот параметр можно изменить, с помощью свойства display.

Блочные элементы. Особые приметы.

Другие «имена»: элементы уровня блок, block-level element. Блочные элементы являются основными строительными конструкциями разметки.

Особые приметы (update 9.12.10 уточнения от set и SelenIT):

    может быть дочерним элементом тега;

уточнение: тут нужно не забывать о правилах HTML кода. Например,
— блочный элемент, но не может быть дочерним элементом body, т.к. обязательно должен находится в

    , а , к примеру,
      может содержать только
      .

    может содержать внутри себя элементы любого типа;

    уточнение: это утверждение справедливо не для всех блочных элементов. Например,

    — блочный, но содержать другие блочные элементы не может.

    по умолчанию занимает всю доступную ему ширину;

    уточнение: есть исключения из этого правила:

    , плавающие блоки — ширина этих по умолчанию зависит от содержимого.
  • генерирует переводы строк до и после своего содержимого, поэтому располагается на отдельной строке;
  • может иметь отступы в любом направлении: margin-top, margin-bottom, margin-left, margin-right, padding-top, padding-bottom, padding-left, padding-right;

    уточнение: есть исключения из этого правила:

  • — padding вообще не применяется.
  • можно явно задавать размерыwidth и height (по умолчанию эти значения равны auto).
  • В спецификации HTML4.01 по умолчанию к блочным элементам относятся: address, blockquote, div, dl, fieldset, form, hr, h1-h6, noscript, ol, p, pre, table, ul. В HTML5 к ним добавились: section, nav, article, header, footer, aside.

    Заметка

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

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

    «Какая ширина у этого блока?» — кажется простым вопросом. Но ответ на него не всегда так уж и очевиден. Разберем основные аспекты образования ширины блочного элемента.

    Если ширина не указана явно

    Тогда она получает значение auto (w >

    Изменение ширины контента родителя влечет за собой изменение ширины дочерних элементов:

    Ширина элемента не может стать меньше указанного min-width (если конечно оно задано) даже если ширина родителя окажется меньше.

    В такой ситуации ширина дочернего элемента будет больше, чем родителя и тут вступит в силу правило переполнения.

    Ширина элемента не может стать больше указанного max-width даже если размеры родителя ему это позволяют:

    Внешние отступы (margin-left, margin-right) влияют на реальную ширину блока:

    Отрицательные внешние отступы способны увеличить реальный размер блока:

    Если ширина явно указана в абсолютных единицах

    Тогда все проще — элемент будет иметь заданную ширину независимо от ширины родителя.

    Внешние отступы в таком случае тоже уже не влияют на размер.

    Если ширина явно указана в относительных единицах

    Ширина элемента будет расчитываться относительно ширины контентной области родителя. Будет каждый раз пересчитана при изменениях width родителя. Внешние отступы на размер элемента влияния оказывать не будут.

    Блок «подстраивается» под контентную область родителя с учетом своей реальной ширины. При width: 100% контентная область дочернего элемента будет равна контентной области родителя. Это может вызвать переполнение родителя, если к такому дочернему элементу добавить CSS правила, влияющие на реальный размер блока (например, border и/или padding).

    Высота блочного элемента

    По умолчанию высота принимает значение auto (height: auto) и зависит от реальной высоты содержимого. Соответственно, если меняется высота содержимого, меняется высота и блока. Демо пример такого случая.

    Если блоку заданы минимальная или максимальная высота (min-height, max-height), или высота (height) явно указана — поведение блочного элемента аналогично поведению с min-width/max-width/width.

    Блочные элементы

    уточнение: тут нужно не забывать о правилах HTML кода. Например,
    — блочный элемент, но не может быть дочерним элементом body, т.к. обязательно должен находится в

      , а , к примеру,
        может содержать только
        .

      может содержать внутри себя элементы любого типа;

      уточнение: это утверждение справедливо не для всех блочных элементов. Например,

      — блочный, но содержать другие блочные элементы не может.

      по умолчанию занимает всю доступную ему ширину;

      уточнение: есть исключения из этого правила:

    , плавающие блоки — ширина этих по умолчанию зависит от содержимого.
  • генерирует переводы строк до и после своего содержимого, поэтому располагается на отдельной строке;
  • может иметь отступы в любом направлении: margin-top, margin-bottom, margin-left, margin-right, padding-top, padding-bottom, padding-left, padding-right;

    уточнение: есть исключения из этого правила:

  • — padding вообще не применяется.
  • можно явно задавать размерыwidth и height (по умолчанию эти значения равны auto).
  • В спецификации HTML4.01 по умолчанию к блочным элементам относятся: address, blockquote, div, dl, fieldset, form, hr, h1-h6, noscript, ol, p, pre, table, ul. В HTML5 к ним добавились: section, nav, article, header, footer, aside.

    Заметка

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

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

    «Какая ширина у этого блока?» — кажется простым вопросом. Но ответ на него не всегда так уж и очевиден. Разберем основные аспекты образования ширины блочного элемента.

    Если ширина не указана явно

    Тогда она получает значение auto (w >

    Изменение ширины контента родителя влечет за собой изменение ширины дочерних элементов:

    Ширина элемента не может стать меньше указанного min-width (если конечно оно задано) даже если ширина родителя окажется меньше.

    В такой ситуации ширина дочернего элемента будет больше, чем родителя и тут вступит в силу правило переполнения.

    Ширина элемента не может стать больше указанного max-width даже если размеры родителя ему это позволяют:

    Внешние отступы (margin-left, margin-right) влияют на реальную ширину блока:

    Отрицательные внешние отступы способны увеличить реальный размер блока:

    Если ширина явно указана в абсолютных единицах

    Тогда все проще — элемент будет иметь заданную ширину независимо от ширины родителя.

    Внешние отступы в таком случае тоже уже не влияют на размер.

    Если ширина явно указана в относительных единицах

    Ширина элемента будет расчитываться относительно ширины контентной области родителя. Будет каждый раз пересчитана при изменениях width родителя. Внешние отступы на размер элемента влияния оказывать не будут.

    Блок «подстраивается» под контентную область родителя с учетом своей реальной ширины. При width: 100% контентная область дочернего элемента будет равна контентной области родителя. Это может вызвать переполнение родителя, если к такому дочернему элементу добавить CSS правила, влияющие на реальный размер блока (например, border и/или padding).

    Высота блочного элемента

    По умолчанию высота принимает значение auto (height: auto) и зависит от реальной высоты содержимого. Соответственно, если меняется высота содержимого, меняется высота и блока. Демо пример такого случая.

    Если блоку заданы минимальная или максимальная высота (min-height, max-height), или высота (height) явно указана — поведение блочного элемента аналогично поведению с min-width/max-width/width.

    Блочные элементы HTML5 — полный список

    Блочные элементы html (block elements) отображаются как прямоугольник и занимают всю доступную им ширину. Высота блочных элементов зависит от их содержимого.

    В начале и конце блочных элементов в html (

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

    Список блочных элементов html

    * отмечены блочные элементы, появившиеся в HTML5

    Селектор Использование Селектор Использование
    article* Содержимое статьи header* Заголовок страницы или секции
    aside* Aside Content hgroup* Groups Header Information
    blockquote Цитирование hr Горизонтальная линия
    body Содержимое страницы li Элемент списка
    br Перевод на новую строку (разрыв строки) map Image Map
    button Кнопка object Встроенный объект
    canvas* Область для рисования ol Нумерованный список
    caption Заголовок таблицы output* Form Output
    col Столбец таблицы p Абзац
    colgroup Группа столбцов таблицы pre Отформатированный текст
    dd Описание термина progress* Отображение прогресса выполняемой задачи
    div Блок section* Раздел страницы
    dl Список терминов table Таблица
    dt Термин (определение) tbody Содержимое таблицы
    embed Внешний контент (встроенный элемент) textarea Область для ввода текста в форме
    fieldset Fieldset Label tfoot Нижняя часть таблицы
    figcaption* Figure Caption th Строка заголовока таблицы
    figure* Groups Media Content and Caption thead Загололовок таблицы
    footer* Нижняя часть страницы или секции tr Строка таблицы
    form Форма для ввода данных ul Ненумерованный список
    h1–6 Заголовок (уровня 1–6) video* Видео плейер

    Виды HTML элементов

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

    Все элементы HTML разделяются на две категории:

    Блочные элементы HTML5 — полный список: 1 комментарий

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

    Илон Маск рекомендует:  Что такое код pdf_fill_stroke
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL