CSS Макет - width и max-width
CSS свойство width
устанавливает фиксированную ширину элемента. CSS свойство max-width
устанавливает максимальную ширину элемента.
CSS свойства width, max-width и margin:auto;
Как уже упоминалось в предыдущей главе; блочный элемент всегда занимает всю ширину доступного (простирается влево и вправо насколько это возможно).
Установка CSS свойства width
для элемента уровня блока предохранит его от растяжения к краям контейнера. Затем, вы можете подключить поля auto
, чтобы установить элемент по горизонтали по центру внутри контейнера. Элемент будет принимать указанную ширину, а остальное пространство будет разделено поровну между двумя полями:
<div>
имеет ширину 500 пикселей и поле установлено автоматически.Примечание: Проблема происходит выше в примере с <div>
, когда окно браузера меньше, чем ширина элемента. Затем браузер добавляет горизонтальную полосу прокрутки на странице
Используя CSS свойство max-width
вместо width
, в этой ситуации, улучшит управляемость браузера маленьких окон. Это важно при создании сайта для использования на небольших устройствах:
Совет: Измените размер окна браузера меньше, чем 500 пикселей в ширину, чтобы увидеть разницу между двумя <div>
!
Пример двух <div>
:
div.ex1 {
width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
Попробуйте сами »