Html Общее

Question 1

Способы горизонтального центрирования блоков

Answer 1

1. margin: 0 auto;

2. display: inline /inline-block + text align:center

Question 2

Заголовок списка по дефолту имеет небольшой отступ слева. Как сдвинуть его влево?

Answer 2

1. Обернуть в параграф с классом

2. Добавить левый отрицательный марджин

Question 3

Относительно чего можно позиционировать объект с помощью position: absolute?

Answer 3

1. Относительно себя в нормальном потоке

2. Относительно родителя

Question 4

Позиционирование объекта относительно себя в нормальном потоке

Answer 4

Самому объекту

position: relative;
top: 20px;
left: 10px;

Родителю: ничего

Question 5

Позиционирование объекта относительно

родителя

Answer 5

Родителю:
Position: relative;

Дитю:

position: absolute;
top: 0;
right: 0;

Question 6

Относительное позиционирование: что лучше для мобильной версии?

Answer 6

Лучше позиционирование относительно родителя.

Относительно себя в потоке будет плыть в мобильной версии

Question 7

Как можно добавить одному блоку одновременно position:absolutr и position: relative?

Answer 7

Никак нельзя. Также нельзя добавлять эти свойства через разные классы одного объекта.
Выход:
1. Обернуть объект ещё одним блоком и задать ему второе свойство
2. Смотреть, может родитель X того элемента Y, которого нужно сделать родителем для элемента Z, сможет стать родителем и для X, и для Z?

Question 8

Что задавать родителю элемента, имеющему свойство float?

Answer 8

Clear:both
display: table

Question 9

Что поможет от схлопывающихся вертикальных отступов?

Answer 9

display:inline-block;

Но тогда исчезнет горизонтальное центрирование с помощью margin: auto и придется центрировать вторым способом.

Question 10

Что будет, если заголовку задать font-weight: 100?

Answer 10

Он станет тоньше. Потому что по дефолту у него толщина больше, чем 100.

Question 11

Для каких элементов не работает центрирование margin: auto?

Answer 11

Не работает для строчных, строчно-блочных и абсолютно позиционированных элементов. И даже для блочных, если у них нет ширины.

Question 12

Почему margin:auto не работает для кнопок?

Как исправить?

Answer 12

Потому, что button - это строчно-блочный элемент.

Нужно задать ей display:block и возможно, ширину.

Question 13

Особенности табличных элементов (display: table)

Answer 13

1. Отменяет ширину 100% по умолчанию
2. Можно задать размеры, рамки и отступы
3. Перееосы строки до и после элемента

Question 14

Три причины, почему элемент не всплывает при добавлении float? При этом элемент двигается в право-влево

Answer 14

1. Родителю не хватает ширины, чтобы уместить элементы по горизонтали
2. Блочные элементы по умолчанию имеют максимальную ширину в рамках родителя. Причём, сам жиртрест может выглядеть, как ему указано, при этом всю оставшуюся ширину будет занимать его марджин (который, хоть и не указае в консоли, но виден при наведении на него мышки -инспектора в консоли).
   Решается добавлением display:table;
3. Если предыдущиепункты не являются проблемой, можно добавить предыдущему в потоке элементу так жe float: left

Question 15

Как лучше прорабатывать медиа-запросы?

Answer 15

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

Question 16

Какой инструмент использовать при написании резинового сайта?

Answer 16

Делать резиновую вёрстку через консоль-респонсив в хроме

Question 17

Что делать, если при сворачивании окна браузера появляется скролл или при использовании респонсива меняется масштаб?

Answer 17

1. Найти первую точку появления скролла.
2. В медиа-запросах НА ЭТОЙ ТОЧКЕ всем блокам, имеющим фиксированную ширину во весь экран, прописать width 100% (не max-width!)
3. А уже в коде ДО медиа-запросов, можно прописать этим блокам max-width 100% рядом с фиксированной шириной.
4. Проверить, чтобы нигде не было аццких марджинов и паддингов, особенно по сторонам
5. Проверить, чтобы небыло ширины 100%+границы, паддинги, марджины.

Question 18

Как найти блок, создающий скролл? (6 пунктов)

Answer 18

1. В консоли выбрать
2. В его CSS внизу выделить его разрешение (ширина на длину) и всё, что вызодит за рамки голубой подсветки и создаёт скролл.
3. Можно задать найденному элементу max-width
4. Проверить, чтобы нигде не было аццких марджинов и паддингов, особенно по сторонам.
5. Не должно быть гирины100%+границы, марджины, паддинги.
6. Если скролл маленький, можно задать *{box-sizing: border-box;}

Question 19

Какие псевдоклассы работают при наведении и клике мышкой?

Answer 19

При наведении- :hover, при клике :focus

Question 20

Можно ли лазить в бутстраповские классы?

Answer 20

Нельзя. Но к ним черещ пробел можно добавлять свои классы, а к своим стилям добавлять !important

Question 21

Как в бутстраповской сетке избежать неравномерного распределения блоков по рядам при сворачивании/ на средних экранах, например: 2-1-2-1 вместо 2-2-2?

Answer 21

col-xs-12 | col-sm-4 | col-md-4 | col-lg-4, то есть на больших, средних и средне-малых экранах будет воспроизводиться по 3 блока на строчку.

Question 22

Что делать, если какой-либо медиа запрос для мобильной вёрстки противоречит какому-либо стилю в широкоэкранной вёрстке (при использовании медиа-запросов)?

Answer 22

Нужно дописать свойство для широкоэкранной вёрстки не в стандартеом цсс, а в медиа-запросах (через min-width)