Меню
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP КАК СДЕЛАТЬ ПРОГРАММЫ SW3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS КИБЕРБЕЗОПАСНОСТЬ НАУКА О ДАННЫХ
     ❯   

CSS Учебник


CSS Продвинутый


CSS Отзывчивый


CSS Grid


CSS SASS


CSS Примеры


CSS Справочники



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, в этой ситуации, улучшит управляемость браузера маленьких окон. Это важно при создании сайта для использования на небольших устройствах:

Элемент <div> элемент имеет максимальную ширину 500 пикселей и поле установлено автоматически.

Совет: Измените размер окна браузера меньше, чем 500 пикселей в ширину, чтобы увидеть разницу между двумя <div>!

Пример двух <div>:

div.ex1 {
   width: 500px;
   margin: auto;
   border: 3px solid #73AD21;
}

div.ex2 {
   max-width: 500px;
   margin: auto;
   border: 3px solid #73AD21;
}
Попробуйте сами »


×

Связаться с отделом продаж

Если вы хотите использовать услуги schoolsw3 как образовательное учреждение, команда или предприятие, отправьте нам электронное письмо:
sales@schoolsw3.com

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, отправьте нам электронное письмо:
help@schoolsw3.com

Schoolsw3 оптимизирован для обучения и подготовки. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно проверяются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего контента.
При использовании Schoolsw3 вы соглашаетесь прочитать и принять наши условия использования,
политику использования файлов cookie и конфиденциальности.

Авторское право 1999- принадлежит Refsnes Data. Все права защищены. Schoolsw3 работает на SW3.CSS.