CSS Что делает свойство margin? Какие есть особенности у отрицательных значений? Что такое margin collapsing?

margin - Устанавливает величину отступа от каждого края элемента.

Отрицательные margin-left/top сдвигают элемент влево-вверх. Остальные элементы это учитывают, в отличие от сдвига через position.

Отрицательные margin-right/bottom заставляют другие элементы думать, что блок меньше по размеру справа-внизу, чем он на самом деле.

Если у элемента нет родителя, отступом будет расстояние от края элемента до края окна браузера с учетом того, что у самого окна по умолчанию тоже установлены отступы. Чтобы от них избавиться, следует устанавливать значение margin для селектора <body> равное нулю.

margin-top и margin-bottom иногда объединяются в один, с размером равным наибольшему из них (или размеру одного, если они равны).
Это поведение известно как margin collapsing.

Схлопываются отступы соседних элементов (за исключением случая, когда к последнему элементу применено свойство clear).

Когда при обращении к свойству объекта стоит использовать точечную нотацию, а когда через строку в квадратных скобках?

При обращении к свойствам через точку ключ должен представлять собой действительный JavaScript-идентификатор.

 let obj = {
   message : "A message"
 }
 obj.message //"A message"
 obj["message"] //"A message"

При попытке обращения к несуществующему свойству объекта сообщения об ошибке не появится, но возвращено будет значение undefined:

 obj.otherProperty //undefined

При использовании для доступа к свойствам квадратных скобок можно применять ключи, которые не являются действительными JavaScript-идентификаторами. Они могут иметь любое значение, которое можно привести к строке:

 let french = {};
 french["merci beaucoup"] = "thank you very much";

 french["merci beaucoup"]; 
 //"thank you very much"

Если в качестве ключей используются нестроковые значения, они автоматически преобразуются к строкам (с использованием, если это возможно, метода toString()):

Напишите функцию, которая принимает строку из слов и возвращает количество букв в самом коротком слове.

Примеры:
"bitcoin take over the world maybe who knows perhaps")
// 3

"turns out random test cases are easier than writing out basic ones")
//3

Что такое box-sizing? Что делает CSS-правило * { box-sizing: border-box; }? Зачем оно нужно?

Согласно спецификации CSS ширина блока складывается из ширины контента (width), значений отступов (margin), полей (padding) и границ (border). Аналогично обстоит и с высотой блока. Свойство box-sizing позволяет изменить этот алгоритм, чтобы свойства width и height задавали размеры не контента, а размеры блока.

Значения:
content-box - основывается на стандартах CSS, при этом свойства width и height задают ширину и высоту контента и не включают в себя значения отступов, полей и границ.

border-box - свойства width и height включают в себя значения полей и границ, но не отступов (margin).

padding-box - свойства width и height включают в себя значения полей, но не отступов (margin) и границ (border).

Самый распространенный вариант использования:

 *::before, *::after {
  box-sizing: border-box;
}

Вы задаете ширину элементу, и вам не нужно производить вычисления при изменении границ, или внутренних отступов.

Что делает свойство vertical-align? Какие у него есть значения?

Это свойство управляет вертикальным выравниванием элементов внутри своих родителей. Оно применяется к строчным элементам и к ячейкам таблиц.

Значения:
baseline - Выравнивает базовую линию элемента по базовой линии родителя.

bottom - Выравнивает основание текущего элемента по нижней части элемента строки, расположенного ниже всех.

middle - Выравнивание средней точки элемента по базовой линии родителя плюс половина высоты родительского элемента.

sub - Элемент изображается как подстрочный, в виде нижнего индекса.

super - Элемент изображается как надстрочный, в виде верхнего индекса.

text-bottom - Нижняя граница элемента выравнивается по нижнему краю текущей строки.

text-top - Верхняя граница элемента выравнивается по самому высокому текстовому элементу текущей строки.

top - Выравнивание верхнего края элемента по верху самого высокого элемента строки.

inherit - Наследует значение родителя.

Что делает hasOwnProperty?

JavaScript метод hasOwnProperty() возвращает логическое значение, которое указывает на то содержит ли объект указанное cобственное свойство, или метод.

В отличие от оператора in, этот метод не проверяет существование свойств в цепочке прототипов объекта.

Пример:
o = new Object();
o.prop = 'существует';

o.hasOwnProperty('prop');
// вернёт true

o.hasOwnProperty('toString');
// вернёт false

o.hasOwnProperty('hasOwnProperty');
// вернёт false

Джон Резиг, Беэр Бибо, Иосип Марас
"Секреты JavaScript ниндзя" (2017)

Книга Секреты javascript ниндзя раскрывает секреты мастерства разработки веб-приложений на javascript (соавтор книги, Джон Резиг - создатель библиотеки JQuery).

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

Напишите функцию, которая принимает строку из слов и возвращает количество букв в самом коротком слове.

Примеры:
"bitcoin take over the world maybe who knows perhaps")
// 3

"turns out random test cases are easier than writing out basic ones")
//3

Грокаем алгоритмы (2017)

Целевая аудитория: начинающие программисты
Алгоритмы представляют собой наиболее эффективные и продуманные этапы решения задачи.

Эта книга написана для тех, кому нужен быстрый старт в основы алгоритмизации и программирования. Адитья Бхаргава, автор книги, постарался собрать самые распространённые алгоритмы, структуры данных и методы программирования, чаще всего применяемые в реальной практике.