внутрь другого, как ширина внутреннего тега начинает исчисляться относительно его родителя, т.е. внешнего контейнера.

Некоторые браузеры достаточно свободно трактуют понятие ширины, хотя в спецификации CSS четко указано, что ширина складывается из суммы следующих параметров: ширины самого блока (width), отступов (margin), полей (padding) и границ (border). В примере 2 показано создание слоя, в котором присутствуют все эти компоненты.

Пример 2. Ширина слоя

В результате данного примера получим слой шириной 342 пиксела. На рис. 1 показано, из чего складывается ширина слоя.

Рис 1. Ширина блочного элемента

В том случае когда в коде не указан, браузер Internet Explorer за ширину всего блока принимает значение свойства width.

Разберем еще один пример связанный с шириной. По умолчанию ширина слоя задается как auto, это позволяет вписывать слой в окно браузера, не принимая в расчет значения установленных полей. Если изменить ширину на 100%, то при добавлении значения отступов, полей или границ неминуемо появится горизонтальная полоса прокрутки.

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

Пример 3. Ширина слоя в процентах

Результат примера показан на рис. 2.

Рис. 2. Отображение ширины слоев в браузере

Ширина первого слоя в данном примере (layer1) установлена как 100%, что приводит к отображению горизонтальной полосы прокрутки. Для второго слоя (layer2) ширина также задана 100%, но поля определяются для внутреннего абзаца (тег

). За счет этого ширина слоя во всех браузерах будет одинаковой. К третьему слою (layer3) вообще не применяется свойство width, поэтому оно определяется по умолчанию — auto. В таком случае слой будет занимать всю ширину окна браузера без всяких горизонтальных полос.

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

Высота

С высотой блочных элементов дело обстоит аналогично ширине. Браузер за высоту слоя принимает значение свойства height и добавляет к нему еще значение margin, padding и border. Если высота слоя не установлена явно, то она вычисляется автоматически исходя из объема содержимого.

Допустим, для слоя установлена высота в пикселах, а содержимое слоя однозначно превышает указанную высоту (пример 4).

Пример 4. Высота слоя

Результат данного примера продемонстрирован на рис. 3.

Рис. 3. Высота блока в разных браузерах

Видно, что браузер оставляет высоту неизменной, за счет чего текст не помещается в блоке и накладывается поверх слоя.

Цвет фона

Цвет фона элемента проще всего устанавливать через универсальное свойство background. Фоном при этом заливается область, которая определяется значениями width, height и padding (рис. 4).

Параметры для блоков в CSS

Область слоя, которая заполняется фоновым цветом

Таким образом, margin не принимает участия в формировании цветной области.

Границы

Из-за разницы в подходах браузеров при формировании блочных элементов наблюдается и различие при отображении границ. Браузер Internet Explorer 7 проводит рамку внутри блока, а Firefox — снаружи. Но если использовать фоновую заливку, то увидим совершенно противоположную картину (рис. 5). А все потому, что Firefox (Opera) цвет фона устанавливает по внешнему краю границы, а Internet Explorer — по внутренней. Начиная с версии 8.0 Internet Explorer поменял стиль отображения рамки, она проводится внутри блока, как и в Firefox.

а. Internet Explorer 7

б. Firefox, Internet Explorer 8+

Рис. 5. Отображение рамки в браузерах

В примере 5 показано, как создать код для получения подобной границы.

Пример 5. Пунктирная рамка

Различия в подходе браузеров при рисовании границ заметны только на цветном фоне и пунктирных линиях. Для сплошной рамки вид слоя в браузерах будет практически одинаковым.

Резюме

Блочные элементы выступают в качестве основного строительного материала при верстке веб-страниц. Такие элементы характерны тем, что всегда начинаются с новой строки и занимают всю доступную ширину области, в которой располагаются.

Спецификация CSS определяет, что высота и ширина элемента определяется не только значениями height и width, но к ним еще плюсуется значение полей, отступов и границ. Браузеры в этом плане делятся на две части: одни поддерживают в этом вопросе спецификацию, другие же ее игнорируют и поступают по-своему. Это создает трудности разработчикам, которые желают делать универсальные веб-страницы. Можно только посоветовать ограниченно использовать свойства width и height, поскольку по умолчанию браузер применяет аргумент auto, который заставляет настраивать размеры элемента автоматически.

Всем привет! В этой статье мы рассмотрим, что такое стрелочные функции в ES6 и как их использовать .

Стрелочные функции – это функции, которые записываются при помощи оператора "стрелка"(=> ).

Давайте сразу рассмотрим пример:

Let add = (x, y) => x + y;
console.log(add(5, 2));

В результате выполнения данной функции в консоли мы увидим число 7.

Сначала, в круглых скобках мы передаем аргументы, далее ставим знак стрелочки, а потом пишем код самой функции. В нашем случае она просто принимает два числа и складывает их. По идее, это то же самое, что и function expression в ES5 . Если вы используете Babel или подобные компиляторы, то, скорее всего, они напишут что-то вроде этого:

Var add = function add(x, y) {
return x + y;
};

Если ваша функция принимает только один параметр, круглые скобки ставить необязательно.

Let square = x => x*x;

Такая функция принимает только один аргумент и возводит переданное число в квадрат.

Функция без параметров:

Let func = () => 77;

Если ваша функция содержит в себе несколько строк, то, во-первых, нужно использовать фигурные скобки, а во-вторых, обязательно написать, что функция возвращает, т.е. использовать ключевое слово return .

Let multiply = (x, y) => {
let result = x*y;
return result;
};

Если вам нужно вернуть литерал объекта, то его нужно обернуть в круглые скобки:

Let getObject = () => ({ brand: "BMW" });

Самовызывающаяся функция выглядит следующим образом.

Они стали очень модными, мы видим их во всех новых статьях. И, если вы не привыкли к ним, вам будет трудно понимать современный (на ES6) код, содержащий стрелочные функции.

Данная статья не направлена на то, чтобы сказать, когда и как их использовать. Я только попытаюсь объяснить новый синтаксис для тех, кто видит его в первый раз. Будете вы его использовать или нет, - не важно, но рано или поздно вы все равно столкнетесь с ним где-нибудь. Так что лучше понимать механику этого нового синтаксиса.

Вот небольшой пример:

Const addOne = function(n) { return n + 1; }

Приведенный выше код можно записать так:

Const addOne = (n) => { return n + 1; }

Или, в данном случае, еще короче:

Const addOne = (n) => n + 1;

Второй пример использует { ... } фигурные скобки, но, поскольку, в нем всего одна строка кода, фигурные скобки могут быть опущены и возврат подразумевается сам собой, как видно из третьего примера.

Один параметр

Когда стрелочная функция имеет один параметр, скобки можно опустить:

// Было: someCallBack((results) => { ... }) // Стало: someCallBack(results => { ... })

Но, если нет никаких параметров, вы должны использовать открывающую и закрывающую скобки:

SomeCallBack(() => { ... })

Функции обратного вызова

Стрелки функции особенно полезны для обратных вызовов. Те, кто знаком с JavaScript, знакомы с его лексической областью видимости, которая довольно хороша, но может проделывать такие трюки как этот (this ):

Var _this = this; someCallBack(function() { _this.accessOuterScope(); })

Существует несколько вариаций этого «_this» (например, «self» или «that»), но идея та же. В функциях обратного вызова нам нужен доступ к версии внешней области видимости, но идея та же. В функциях обратного вызова нам нужен доступ к версии внешней области видимости this , которая теперь отличается от предыдущей, поскольку мы говорим о функции обратного вызова.

С помощью стрелочных функций , мы получаем "block scope" (блочную область видимости) и «this», которые являются одним и тем же «this» в обоих случаях. Это означает, что код сверху можно переписать без _this = this:

SomeCallBack(() => { this.accessOuterScope(); })

"Обертка"

Давайте представим ситуацию, как в React, где событие onClick должно вызывать doSomething() , (), но также должно передавать аргументы в doSomething() (например ID). Этот пример на самом деле не работает:

} })

Код запустится, но технически он будет вызывать doSomething() сразу же при загрузке страницы. Чтобы решить эту проблему, некоторые разработчики ссылаются на функцию-обертку:

Const User = React.createClass(function() { render: function() { return

}, onClick: function() { doSomething(this.props.userId); } })

Отсутствие круглой скобки в this.onClick означает, что это просто отсылка к функции, а не вызов ее.

Функция onClick() теперь является чем-то вроде «обертки» для doSomething() . Со стрелочными функциями можно делать «обертки» такого типа:

Const User = React.createClass(function() { render: function() { return

} })

Как альтернативу, - мы могли бы также использовать.bind() , который не требует никаких оберток (стрелочных функций и прочего):

Const User = React.createClass(function() { render: function() { return

} })

Браузерная поддрержка стрелочных функций

Если вам нужна поддержка браузеров помимо последних версий Chrome и Firefox , воспользуйтесь Babel транспайлер , чтобы конвертировать написанный вами ES6-код в ES5.