html.okpython.net
Основы создания сайтов
CSS :: Свойство width
css-свойство width (от англ. width – ширина) по умолчанию используется для установки ширины области содержимого элемента. Если будет задано свойство box-sizing: border-box, то свойство будет определять ширину всего элемента, включая паддинги и ширину границ.
Значение свойства width может быть переопределено свойствами min-width (если ширина станет меньше минимально допустимого значения) и max-width (если ширина превысит максимально допустимое значение).
Характеристики
- Значение по умолчанию: auto.
- Применяется: ко всем элементам, кроме строчных элементов, строк и групп строк таблицы.
- Наследуется: нет.
- Анимируется: да.
- JavaScript: object.style.width="value".
Синтаксис
width: <размер> | <проценты> | auto
Значения
- auto – ширина элемента будет устанавливаться браузером автоматически исходя из ширины содержимого элемента.
- размер – любые доступные в CSS единицы измерения (смотреть). Отрицательные значения не допускаются.
- проценты – ширина элемента вычисляется в процентах относительно ширины родительского элемента либо окна браузера при отсутствии такового. Однако, если ширина родительского элемента не будет указана явно, то будет использовано значение auto.
Ссылки
Официальный сайт W3C: https://drafts.csswg.org/css2/visudet.html#propdef-width
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/width
Примеры
HTML
Результат
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> p{ width: 300px; height: 100px; margin: 20px; padding: 20px; border: 10px solid green; } .p_1{box-sizing: content-box;} .p_2{box-sizing: border-box;} </style> </head> <body> <p class="p_1"> box-sizing: content-box;<br> width: 300px;<br> height: 100px; </p> <p class="p_2"> box-sizing: border-box;<br> width: 300px;<br> height: 100px; </p> </body> </html>
Пример №1
HTML
Результат
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №2</title> <style> div{ width: 400px; box-sizing: border-box; margin-top: 3em; padding: 0px; border: 5px solid blue; } .height{ height: 400px; } p{ width: 50%; height: 50%; margin: 0px; padding: 0px; border: 5px solid green; } </style> </head> <body> <div class="height"> <p> width: 50%;<br> height: 50%; </p> </div> <div> <p> width: 50%;<br> height: 50%; </p> </div> </body> </html>
Пример №2