Вопросы и ответы для собеседования на верстальщика

Попробую ответить на вопросы, который у Вас могут спросить на собеседовании, на должность верстальщика

12 minute read

Попробую ответить на вопросы, который у Вас могут спросить на собеседовании, на должность верстальщика.

Когда на собеседовании тебе показали кто тут Senior

Вопросы

Какие бывают значения display? Расскажите как ведёт себя каждое свойство.

display: block | inline | inline-block | inline-table |
inline-flex | flex | list-item | none |
run-in | table | table-caption | table-cell | table-column-group | table-column |
table-footer-group | table-header-group | table-row | table-row-group

Подробнее

Спойлер статьи

block

Элемент показывается как блочный. Применение этого значения для строчных элементов, например <span>, заставляет его вести подобно блокам — происходит перенос строк в начале и в конце содержимого.

inline

Элемент отображается как строчный. Использование блочных элементов, таких, как <div> и <p>, автоматически создаёт перенос и показывает их содержимое с новой строки. Значение inline отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент.

inline-block

Это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно строчному элементу. Фактически такой элемент по своему действию похож на встраиваемые элементы (вроде <img>). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как строчный.

inline-table

Определяет, что элемент является таблицей, как при использовании <table>, но при этом таблица является строчным элементом и происходит её обтекание другими элементами, например, текстом.

inline-flex

Элемент ведёт себя как строчный и выкладывает содержимое согласно флекс-модели.

flex

Элемент ведёт себя как блочный и выкладывает содержимое согласно флекс-модели.

list-item

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

run-in

Устанавливает элемент как блочный или строчный, в зависимости от контекста.

table

Определяет, что элемент является блочной таблицей, подобно использованию <table>.

table-caption

Задаёт заголовок таблицы, подобно применению <caption>.

table-cell

Указывает, что элемент представляет собой ячейку таблицы (<td> или <th>).

table-column

Назначает элемент колонкой таблицы, словно был добавлен <col>.

table-column-group

Определяет, что элемент является группой одной или более колонок таблицы, как при использовании <colgroup>.

Используется для хранения одной или нескольких строк ячеек, которые отображаются в самом низу таблицы. По своему действию сходно с работой <tfoot>.

table-header-group

Элемент предназначен для хранения одной или нескольких строк ячеек, которые представлены вверху таблицы. По своему действию сходно с работой <thead>.

table-row

Элемент отображается как строка таблицы (<tr>).

table-row-group

Создаёт структурный блок, состоящий из нескольких строк таблицы, аналогично действию <tbody>.

Руководство по оформлению HTML/CSS кода от Google

Это руководство описывает правила для оформления и форматирования HTML и CSS кода. Его цель — повысить качество кода и облегчить совместную работу и поддержку инфраструктуры.

12 minute read

Введение Это руководство описывает правила для оформления и форматирования HTML и CSS кода. Его цель — повысить качество кода и облегчить совместную работу и поддержку инфраструктуры. Это относится к рабочим версиям файлов использующих HTML, CSS и GSS Разрешается использовать любые инструменты для минификации компиляции или обфускации кода, при условии, что общее качество кода будет сохранено. Общие правила оформления   Протокол Не указывайте протокол при включении ресурсов на страницу.