От первого html тега, до SEO оптимизации порталов
Украина
+380 63 85 62 538

Свойства box-sizing, visibility, hidden

Новые свойства css

Свойства box-sizing, visibility, hidden

Хочу еще обратить ваше внимание на такие моменты, которые возникают при работе с 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

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

 

  1. андрейандрей04-20-2020

    На своем сайте, я методом тыка, изменял дизайн. То есть если нужно было подкорректировать картинку, искал в поисковике обозначения, как в редакторе «Вордпресс»прописывается та или другая позиция. Порой времени уходило очень много, потому что многие позиции повторяются. Я говорю собственным языком, и возможно вам будет непонятно. У меня вот какой вопрос. Сегодня на сайте, мне оставили комментарий, сказав что картинки вытянуты по горизонтали и нужно их немного по вертикали подкорректировать. Я так понимаю свойства box Model к этому отношения имеют и если можно подскажите где найти свойства картинок в Редакторе, а то снова придется полдня искать наугад. Заранее спасибо.

Написать ответ

.