Веб-браузеры, такие как Firefox, Chrome, Safari, Opera и т. Д. Все они следуют правилам о том, как изменять размеры элементов в зависимости от потока и макета страницы, возможно, эти правила могут быть очень подробными, но это то, что позволяет нам определить, как элементы должны обрабатываться так, чтобы размеры всегда оставались пропорционально тому, что мы хотим от них.
Свойства размера
Есть некоторые свойства размера, которые позволяют нам сказать браузеру, как интерпретировать наши элементы, давайте посмотрим их список, прежде чем перейти к вашему приложению:
Ширина / Высота: настройте ширину и высоту элемента, значения могут быть следующими: auto и.
min-width / min-height: это позволяет нам установить минимальную ширину или высоту для элемента, значения могут быть следующими: auto и
max-width / max-height: задает максимальную высоту или ширину, приемлемую для элемента, возможные значения: auto и
Размер поля : Устанавливает, какая часть поля элемента берется за размер. Доступны следующие варианты: поле-поле-поле-поле-поле-поле-поле.
Если вы не устанавливаете какое-либо значение для видимых свойств, значением по умолчанию будет: auto, даже если оно не указано, что означает, что браузер будет определять размеры, а также, как мы видели, мы можем устанавливать размеры, используя показатели длины или процентов, рассчитываемые проценты в зависимости от ширины элемента контейнера.
Ознакомившись с теорией, мы теперь приступим к практике, давайте рассмотрим следующий код, в котором мы установим размер двух элементов, чтобы мы могли увидеть, как все это работает:
Пример div {width: 75%; высота: 100 пикселей; бордюр: тонкий сплошной черный; } img {background: lightgray; рамка: 4px сплошная черная; поле: 2px; высота: 50%; } #first {box-sizing: border-box; ширина: 50%; } #second {box-sizing: content-box; }
Как мы видим, то, что мы сделали здесь, очень просто: мы устанавливаем ширину и высоту для элемента div страницы, затем мы указываем два идентификатора, где каждый из нас размещает разные размеры окна, давайте посмотрим, что это все генерирует:
Как мы видим, одно из изображений теряет свою пропорцию, а следующее изображение имеет размер, который не делает его искаженным.
Что, если теперь мы немного поиграемся с изменением размера окна браузера, мы знаем, что div будет составлять 75% от размера его контейнера, в этом случае его контейнер - это тело, которое изменяется вместе с окном и, в свою очередь, изображением С помощью селектора #first его контейнер на 50% шире, в данном случае это div, когда мы видим это, мы знаем, что что-то не будет сохранено, как есть, давайте посмотрим, что происходит в браузере со всем этим.
Пропорции изменяются из-за использования значений в процентах, теперь мы можем видеть, как браузер обрабатывает элементы, когда мы устанавливаем некоторые из правил размера. На этом мы заканчиваем наше руководство, теперь нам нужно практиковаться, пока мы не заставим браузер работать так, как мы хотим, чтобы изменение размера и размеры элементов в наших документах HTML5 .
- 0
СТАТЬИ