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 - с обеих сторон

X. Программа экзамена

  1. Как устроен браузер, в чем заключается его задача. Назовите какие внутренние программные компоненты есть внутри и какие задачи они решают.
  2. Что такое URL? Расскажите из каких частей состоит URL? Как браузер понимает по URL на какой сервер должен пойти ваш HTTP запрос?
  3. В каком виде представлен документ внутри вашего браузера? Какие вы знаете способы взаимодействия с элементами, представленными в разметке страницы.
  4. Из каких обязательных тэгов должна состоять веб страница? Какая секция для чего предназначена? Какие отличия будут, если мы будет размещать скрипты в начале документа, а не в конце?
  5. Что такое CSS? Как применять различные правила и по каким признакам мы можем выбирать элементы на странице.
  6. Какие виды вёрстки вы знаете? Какие подходы для верстки страниц существуют? Назовите плюсы и минусы данных подходов.
  7. Какие средства реализации объектно-ориентированного програмирования существуют в JavaScript. С помощью каких вспомогательные классов, добавленных в последних стандартах языка, можно достичь полноценной инкапсуляции?
  8. Как устроен Event Loop, какие типы задач бывают, в какие очереди выполнения они попадают?
  9. С помощью каких встроенных возможностей языка JS происходит взаимодействие между клиентом и сервером? В каком виде обычно предоставляются данные и как их десериализовать?
  10. Подходы применяемых при разработке приложений (страниц) для устаревших браузеров. Назовите пример решения ситуации, когда технология, которую вы решили использовать на странице, может быть вдруг недоступна.
  11. Устройство нативных веб компонентов. Какие инструменты позволяют нам создать свой собственный компонент для дальнейшего переиспользования? Какие могут вылезти подводные при использовании нативных веб компонентов?
  12. Web-Framework’и. Какие типы фреймворков бывают? В чём отличие фреймворка от библиотеки? Какие обязательные компоненты идут из коробки в современных фреймворках? Назовите несколько примеров
This site is open source. Improve this page.