Свойства box-sizing, visibility, hidden
Хочу еще обратить ваше внимание на такие моменты, которые возникают при работе с margin или padding при работе с вложенными элементами. Итак разберем две ситуации, когда вложенные элементы имеют width: auto и 100%.
Если ширина вложенного элемента задана auto (значение по умолчанию), тогда при заданном margin либо padding сожмется сам вложенный элемент на размер заданные этими свойствами. Но если ширина задана 100%, то произойдет выползание области элемента за родителя, а это весьма неприятная ситуация.
Из-за такой особенности было внедрено еще одно свойство box-sizing: border-box | content-box (значение по умолчанию).
Если зададим значение 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 вот вам небольшая картинка, которая поможет понять принцип работы.
Надеюсь вы усвоили новые свойства и их значения, рекомендую попрактиковаться и отточить мастерство на практике. Ну как же без закрепляющего видеоурока, где показа наглядный пример.
На своем сайте, я методом тыка, изменял дизайн. То есть если нужно было подкорректировать картинку, искал в поисковике обозначения, как в редакторе «Вордпресс»прописывается та или другая позиция. Порой времени уходило очень много, потому что многие позиции повторяются. Я говорю собственным языком, и возможно вам будет непонятно. У меня вот какой вопрос. Сегодня на сайте, мне оставили комментарий, сказав что картинки вытянуты по горизонтали и нужно их немного по вертикали подкорректировать. Я так понимаю свойства box Model к этому отношения имеют и если можно подскажите где найти свойства картинок в Редакторе, а то снова придется полдня искать наугад. Заранее спасибо.