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