HTML/CSS Flashcards
Значения атрибута display
Обычно, используются три из множества значений атрибута:
none;
inline;
block.
Еще есть:
inline-block;
table;
list-item;
run-in;
flex.
display: none
Элемент не показывается, вообще. Как будто его и нет.
Он убирается из потока контента.
display: block
Блочные элементы располагаются один над другим, вертикально (если нет особых свойств позиционирования).
Блок стремится расшириться на всю доступную ширину. Можно указать ширину и высоту явно.
Блоки прилегают друг к другу вплотную, если у них нет margin.
display: inline
Элементы располагаются на той же строке, последовательно.
Ширина и высота элемента определяются по содержимому. Поменять их нельзя.
Содержимое инлайн-элемента может переноситься на другую строку.
При этом каждая строка в смысле отображения является отдельным прямоугольником («line box»). Так что инлайн-элемент состоит из объединения прямоугольников, но в целом, в отличие от блока, прямоугольником не является.
Если инлайн-элемент граничит с блоком, то между ними обязательно будет перенос строки.
display: inline-block
Это значение – означает элемент, который продолжает находиться в строке (inline), но при этом может иметь важные свойства блока.
Это значение display используют, чтобы отобразить в одну строку блочные элементы, в том числе разных размеров.
Как и инлайн-элемент:
- Располагается в строке.
- Размер устанавливается по содержимому.
Во всём остальном – это блок, то есть:
- Элемент всегда прямоугольный.
- Работают свойства width/height.
display: table-*
Для таблицы целиком table, для строки – table-row, для ячейки – table-cell и т.д.
При такой разметке это действительно полноценная таблица. Используются табличные алгоритмы вычисления ширины и высоты элемента.
Это хорошо для семантической вёрстки и позволяет избавиться от лишних тегов.
display: list-item
Этот display по умолчанию используется для элементов списка.
Он добавляет к блоку с содержимым ещё и блок с номером(значком) списка, который стилизуется стандартными списочными свойствами.
display: run-in
Если после run-in идёт block, то run-in становится его первым инлайн-элементом, то есть отображается в начале block.
Поддерживается малым количеством браузеров.
display: flex
Позволяет применить к элементу и его дочкам систему выравнивания flexbox.
Блочные элементы
<address>, <blockquote>, <div>, <fieldset>, <form>, <h1>,...,<h6>, <hr></hr>, <ol>, <p>, <pre>, <table>, <ul>, <li>
\+ display: block
</li></ul></table></pre></p></ol></h6></h1></form></fieldset></div></blockquote></address>
Строчные элементы
b, big, i, small, tt. abbr, acronym, cite, code, dfn, em, kbd, strong, samp, time, var. a, bdo, br, img, map, object, q, script, span, sub, sup, button, textarea
Веса селекторов
Типы селекторов по убыванию специфичности:
- Селекторы по идентификатору (#);
- Селекторы по классу (“.”), селекторы по атрибуту ([type = “radio”]) и селекторы с псевдоклассами (“:hover”);
- Селекторы по тегу (“<>”), селекторы с псевдоэлементами (“::before”).
CSS-свойства, написанные в атрибуте style внутри HTML-разметки, перебивают свойства, написанные для этого элемента во внешних CSS-файлах или внутри тега <style>. Так что формально атрибут style самый специфичный, у него самый большой вес.</style>
Ключевое слово !important нарушает все установленные спецификацией законы и насильно применяет свойство, после которого написано.
Селекторы
- – любые элементы.
div – элементы с таким тегом.
#id – элемент с данным id.
.class – элементы с таким классом.
[name=”value”] – селекторы на атрибут (см. далее).
:visited – «псевдоклассы», остальные разные условия на элемент (см. далее).
Псевдоклассы
:focus – в фокусе.
:active - для элемента, с которым идет взаимодействие прямо сейчас.
:hover – под мышью.
:empty – для пустых элементов, без детей (даже без текстовых).
:checked, :disabled, :enabled – состояния INPUT.
:target – этот фильтр сработает для элемента, ID которого совпадает с анкором #… текущего URL.
Например, если на странице есть элемент с id=”intro”, то правило :target { color: red } подсветит его в том случае, если текущий URL имеет вид http://…#intro.
:not() - отсечь все элементы, не подходящие под условие из скобок.
:has() - выбрать элемент, уточнив основной селектор дополнительным. Например, dt:has(+ dd) - только тот <dt>, за которым сразу следует <dd>.
Псевдоэлементы
Это ключевое слово, добавляемое к селектору, которое позволяет стилизовать определённую часть выбранного элемента.
При помощи псевдоэлементов ::before и ::after можно добавлять содержимое в начало и конец элемента.
Для IE8 :before, для всех остальных браузеров ::before.
Список стандартных псевдоэлементов
::after - содержимое располагается после элемента, которому задается псевдоэлемент.
::before - содержимое располагается до элемента, которому задается псевдоэлемент.
::cue - для задания стилей титров и других реплик в медиа с vtt треками.
::first-letter - первая буква в абзаце.
::first-line - первая строка в абзаце (только для точных элементов).
::selection - стиль текста, выделенного пользователем. Лучше всего задавать всей странице.
::placeholder - стилизует подсказку у поля ввода input’а.
Box-model
В HTML-документе каждому элементу на странице соответствует прямоугольная область (бокс или блок). Движок рендеринга в браузере определяет размеры и положение боксов на странице, а также их свойства вроде цвета, фоновой картинки для того, чтобы отобразить их на экране.
У каждого бокса есть 4 области: margin (внешние отступы), border (рамка), padding (внутренние поля), и content (контент или содержимое).
Отступы двух соседних элементов, расположенных друг над другом или вложенных друг в друга, могут накладываться. Это называется схлопывание границ (margin collapsing (en-US)).
Схлопываются только вертикальные отступы и только отступы у блочных элементов (не включая html и body).
em vs rem
1em – текущий размер шрифта.
Размеры в em – относительные, они определяются относительно шрифта родителя.
Единица rem: смесь px и em
Единица rem задаёт размер относительно размера шрифта элемента <html>.
Элементы, размер которых задан в rem, не зависят друг от друга и от контекста – и этим похожи на px, а с другой стороны они все заданы относительно размера шрифта <html>.
Единица rem не поддерживается в IE8-.
float
Синтаксис:
float: left | right | none | inherit;
При применении этого свойства происходит следующее:
1. Элемент позиционируется как обычно, а затем вынимается из документа потока и сдвигается влево (для left) или вправо (для right) до того как коснётся либо границы родителя, либо другого элемента с float.
2. Если пространства по горизонтали не хватает для того, чтобы вместить элемент, то он сдвигается вниз до тех пор, пока не начнёт помещаться.
3. Другие непозиционированные блочные элементы без float ведут себя так, как будто элемента с float нет, так как он убран из потока.
4. Строки (inline-элементы), напротив, «знают» о float и обтекают элемент по сторонам.
Ещё детали:
1. Элемент при наличии float получает display:block.
Исключением являются некоторые редкие display наподобие inline-table и run-in (см. Relationships between „display“, „position“, and „float“)
2. Ширина float-блока определяется по содержимому.
3. Вертикальные отступы margin элементов с float не сливаются с отступами соседей, в отличие от обычных блочных элементов.
Свойство Position
Позволяет сдвигать элемент со своего обычного места.
Static, relative, absolute, fixed, sticky.
Position: static
Статическое позиционирование производится по умолчанию, в том случае, если свойство position не указано.
Элемент с position: static ещё называют не позиционированным.
Свойства left/top не будут работать для position:static. Если их всё же поставить, браузер их проигнорирует. Эти свойства предназначены для работы только с позиционированными элементами.
