Обучаемся.com

Руководство по компьютеру, работа с Windows, разработка и продвижение сайтов…

Автор

Свойства box-sizing, visibility, hidden, Занятие 7/1

Хочу еще обратить ваше внимание на такие моменты, которые возникают при работе с margin или padding при работе с вложенными элементами. Итак разберем две ситуации, когда вложенные элементы имеют width: auto и 100%.

Если ширина вложенного элемента задана auto (значение по умолчанию), тогда при заданном margin либо padding сожмется сам вложенный элемент на размер заданные этими свойствами. Но если ширина задана 100%, то произойдет выползание области элемента за родителя, а это весьма неприятная ситуация.Ширина элемента и отступы

Из-за такой особенности было внедрено еще одно свойство box-sizing: border-box | content-box (значение по умолчанию).Свойство box-sizing

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

Свойства visibility и display

Итак, в продолжение занятия 6, сегодня рассмотрим очень интересные свойства, которые частенько используются при верстке и облегчают нам жизнь. Давайте создадим 5 блочных элементов, указав им фон и размеры, чтобы визуально мы их могли увидеть в окне браузера. Так как это блочные элементы, они выстроятся друг под друга, давайте второму зададим свойство и значение visibility: hidden, а четвертому display: none, смотрим на результат в окне браузера.

Итак свойство visibility со значением hidden прячет элемент, но держит его место, не сдвигает выше последующие элементы. А вот свойство display со значением none убирает все, точнее он не показывает ни содержимого ни самого места, где оно было.

У свойства visibility усть всего два свойства visible | hidden, первое по умолчанию и никак не влияет на отображение элементов.

У свойства display есть вот такие значения:  none | block | inline | inline-block | inline-table и мы сейчас о них поговорим.

  • none — не отображает элемент вовсе
  • block — задает принудительно любому элементу свойство блочного
  • inline — задает принудительно любому элементу свойство строчного
  • inline-block — по сути ни чем не отличается от значения block, но у него туго с поддержкой у старых браузерах

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

На этом первую часть седьмого занятия мы закончим и перейдем к его второй части, где мы будем использовать подключение JavaScript к нашему документу и понимать, как это работает. Так как это немного не о css будет, я решил создать вторую часть занятия 7 и там все это дело рассмотреть.

← Предыдущее зянятиеСледующее занятие →

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *