HTML\CSSCSS Flexbox краткое руководство

Flexbox (“флексбокс”) — CSS-механизм, предназначенный для построения сеток и создания сложных раскладок блоков.

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

Свойство display: flex делает эелемент флекс-контейнером, прямые потомки (первого уровня вложенности) превращаются вофлекс-элементы.

Особенности flexbox:

  • флекс-элементы, в отличие от блочных элементов, не растягиваются на всю ширину контейнера по умолчанию;
  • на флекс-элементы не действует float, vertical-align
  • ширина, высота, внутренние отступы и рамки для флекс-контейнеров и флекс-элементов работают как обычно
  • внешние отступы (margin) не схлопываются и не выпадают, значение auto центрирует элементы по вертикали и горизонтали, а также «ломает» механизмы выравнивания.

Читать далее...

HTML\CSSОтцентрировать блок по горизонтали и вертикали

Горизонтальное и вертикальное выравнивание блока распространенная задача. Опишу наиболее простые и частоипользуемые способы.

Отцентировать по горизонтали

Способ 1
Через margin: auto;, задав ширину < ширины родителя.

.center {
    margin: auto;
    width: 50%;
}
Читать далее...

HTML\CSSHTML5: Что следует помнить

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

Порядок определяется по:

  • важности;
  • специфичности;
  • порядку в исходном коде.

Наследование в CSS — механизм, с помощью которого значения свойств элемента-родителя передаются его элементам-потомкам.

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

Читать далее...

HTML\CSSРабота с SVG

.svg — это формат векторной графики, который в отличие от растровой графики, может растягиваться и сжиматься без потери качества; а также “человекопонятный код”. SVG-элементы можно оформить с помощью CSS и добавить им интерактивности с помощью JavaScript.

SVG-элемент вставляется с помощью тега svg, внутри которого находится содержимое:

Читать далее...

HTML\CSSШпаргалка по CSS-селеткорам

Основные селекторы:
* – все элементы, div * — все дочерние элементы
h1 – по тегу
#id — по id
.class — по классу
.class1.class2 – одновременно с двумя классами
p strong — вложенные
ul > li — только первого уровня вложенности
div + p — соседние, первый абзац следующий за div
div ~ p — родственные, все абзацы следующие за div

Читать далее...