itmo_conspects

Web-разработка: Frontend

Лекция 3

Каждому HTML-элементу соответствует прямоугольная область, или бокс. Боксы бывают блочными и строчными

Блочные бокс представляется собой крупную неразрывную область. Блочными боксами обладают теги <p>, <h1>, <h2>, <ul> и так далее. В частности, тег <div>, благодаря которому можно создать сетку элементов, обозначает простой прямоугольный контейнер и обладает блочным боксом

Блочные боксы:

Строчные боксы располагаются друг за другом в одной строке, могут разрываться и находиться на нескольких строках. Строчными боксами обладают такие элементы, как <span>, <a>, <i>, <em>, <b>, <strong>, и предназначены для оформления текста

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

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

По умолчанию, блочные боксы имеют ширину родительского блока, а высота зависит от содержимого (если бокс пустой, то 0px). Ширина и высота боксов задаются с помощью свойств width и height, например:

selector {
    width: 100px;
    height: 100px;
}

Чтобы вернуть значения по умолчанию, можно воспользоваться значением auto:

selector {
    width: auto;
    height: auto;
}

Строчные боксы имеют ширину и высоту ровно столько, сколько занимает контент внутри, и не реагируют на свойства width и height

Внутренние отступы (или поля) задаются свойством padding:

selector {
    padding: 10px; /* отступ 10 пикселей со всех сторон */
}

Есть 4 формы записи:

padding examples

Можно задать отступ для каждой стороны:

selector {
    padding-left: 10px;   /* слева  */
    padding-right: 10px;  /* справа */
    padding-top: 10px;    /* сверху */
    padding-bottom: 10px; /* снизу  */
}

Аналогично задаются внешние отступы от границы с помощью свойств margin, margin-top, margin-bottom, margin-left, margin-right

Также для боксов можно указать границу (или рамку), а именно:

У этих свойств также есть конкретные для каждой стороны, например border-left-width. С помощью свойства border можно указать сокращенную запись этих параметров в любой порядке:

selector {
    border: 20px solid red;
    border-left: 20px dashed green;
    border-bottom: 10px solid blue;
}

border examples

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

Занимаемое место бокса на странице вычисляется как сумма

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

margin collapse

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

Теперь можно научиться базовому приему центрирования элемента:

  1. Делаем ширину дочернего элемента меньше ширины родителя
  2. Делаем внешние отступы слева и справа auto

Получаем:

div {
    width: 70%;
    margin: 0 auto;
}

Ширину для элемента можно указать в процентах от ширины родительского элемента. Нужно быть аккуратным, так как если родительский элемент имеет внутренний отступ слева и справа, то width: 100% может привести к выпаданию элемента за пределы

Кроме auto такое исправить можно с помощью изменения свойства box-sizing. По умолчанию, оно равно content-box, что определяет ширину и высоту для области с контентом. Значение border-box установит, что ширина и высота задана для области контента, внутренних отступов и границ

width 100%

Тип бокса можно изменить с помощью свойства display

Позиционирование элемента также можно изменить. Тип позиционирования можно выбрать с помощью свойства position:

Позиционирование задается с помощью свойств top, left, right, bottom. Например, top: 10px; position: relative; сделает элемент на 10 пискелей ниже исходного положения, а right: 20px; position: relative; сделает его на 20 пикселей правее от исходного положения. Также можно применять отрицательные значения

Позиционирование

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

Также элементу можно включить обтекание с помощью свойства float:

Если float указан у строчного, то его поведение проявляется как у блочного. Блоки с float выпадают их потока. Если у нескольких обтекаемых элементов нет места, то они переносятся на следующих строчки - таким образом создавались сетки элементов в 2000-ых до появления display: flex и display: grid. Сейчас для сеток лучше использовать flex или grid, так как поведение переноса обтекаемых элементов может быть неочевидным

Свойство clear: left запрещает обтекание слева, clear: right - справа, clear: both - с обеих сторон

This site is open source. Improve this page.