Для начала я бы хотел поговорить об использовании свойство

1
outline
, которое на первый взгляд кажется подобным свойству
1
border
.

Однако у свойства

1
outline
есть существенное отличие, которое приобретает очень важное значение при создании разметки. Свойство
1
outline
может быть полезным в процессе создания разметки в качестве удобного средства диагностики.

Во время создания разметки можно визуально обозначить местоположение всех ее частей.

Например, таким образом:

div {outline: 1px solid #ff0000}

Пример CSS-разметки

Вы можете решить, что точно так можно сделать и с помощью свойства

1
border
, но в действительности это не так. Причина заключается в том, что границы (
1
border
) нарушают разметку. А свойство
1
outline
не нарушает ее.

Вот что я имею ввиду: предположим, у вас есть три колонки

1
div
‘ов, которые должны располагаться внутри контейнера-родителя
1
div
с шириной 960px. (Если вам не нравятся пиксели, то можете применить для этой же цели
1
em
, проценты или любую другую единицу измерения).

Для всех трех

1
div
‘ов-потомков устанавливаем правила
1
float: left; width: 33.33%
и попытаемся визуально обозначить местоположение в разметке каждого из блоков.

Если ко всем трем блокам вы добавите свойство

1
border: 1px solid #ff0000;
, то последний из этих трех опустится вниз и расположиться под двумя первыми:

CSS-разметка с помощью border

Это произошло потому, что каждый из трех блоков

1
div
имеет ширину 320px; помимо этого справа и слева к каждому блоку добавлена граница толщиной в
1
1px
, что делает ширину блока равной, как минимум,
1
322px
.

Умножте это значение ширины на 3 (количество блоков-колонок) и в результате получиться общая ширина 966px, что явно больше ширины блока-родителя 960px. Результат для браузера - сместить последний блок вниз!

Именно по этой причине свойство

1
border
нарушает разметку. Свойство
1
outline
, с другой стороны, не нарушает ее. С помощью него вокруг элементов рисуется линия; к примеру, в нашем случае все три блока
1
div
со свойством
1
outline: 1px solid #ff0000;
разместятся друг рядом с другом внутри блока-родителя.

Не имеет значения, какой толщины вы сделаете

1
outline
, блоки
1
div
никогда не сдвинуться и не нарушат разметку (это касается не только блока
1
div
, а любого элемента страницы). Линии сделают перекрытие друг друга, как показано на рисунке ниже:

CSS-разметка с помощью outlines

Сразу становится ясно преимущество использования

1
outline
при создании разметки. Если в процессе ее создания вам кажется, что что-то идет не так, вы легко можете “нарисовать” границы интересующего вас элемента, не опасаясь при этом нарушить разметку.

Другое отличие

1
outline
от
1
border
заключается в том, что
1
outline
“рисуется” обязательно вокруг всего элемента, по всем четырем его сторонам.

Другими словами, вы не можете просто создать левый

1
outline
или же правый
1
outline
, как вы это обычно делаете при работе с границами
1
border
. Может существовать только граница
1
outline
вокруг всех четырех сторон элемента, и не может быть по другому.

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

1
outline: 2px dashed yellow
, то она будет создана таковой вокруг всех сторон элемента.

Заметьте, что элемент может одновременно иметь оба свойства

1
border
и
1
outline
. В этом случае граница
1
outline
будет отрисована браузером снаружи от границы
1
border
, так что внутренний край
1
outline
будет соприкасаться с внешним краем границы
1
border
:

Свойство outline и border для одного элемента

Если элемент также имеет

1
margin
, то эти поля рисуются вокруг границ
1
outline
; но при этом
1
outline
не изменяют поля
1
margin
и не замещают их.

Автор статьи: Eric Meyer - “Smashing CSS Professional Techniques for Modern Layout”


MongoDB - создание документа

![MongoDB]({{site.url}}/images/uploads/2017/05/mongodb-logo.jpg "MongoDB")Приступили к самому основному - операциям создания, чтения, изм...… Continue reading

MongoDB - документы

Published on May 23, 2017