Style width: width — CSS: Cascading Style Sheets

Leave a Comment / Разное / By /

CSS width

HTML5CSS.ru

ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ

❮ Назад Полный CSS Справочник Дальше ❯


Пример

Задайте ширину трех элементов <div>:

div.a {
    width: auto;
    border: 1px solid black;
}

div.b {
    width: 150px;
    border: 1px solid black;
}

div.c {
    width: 50%;
    border: 1px solid black;
}

Подробнее примеры ниже.

Определение и использование

Свойство width задает ширину элемента.

Ширина элемента не включает отступы, границы или поля!

Примечание: Свойства min-Width и max-width переопределяют width свойство.

Значение по умолчанию:auto
Inherited:no
Animatable:yes. Читайте о animatable
Version:CSS1
Синтаксис JavaScript: object
. style.width=»500px»

Поддержка браузера

Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Свойство
width1.04.01.01.03.5

Синтаксис CSS

width: auto|value|initial|inherit;

Значения свойств

ЗначениеОписание
autoЗначение по умолчанию. Обозреватель вычисляет ширину
lengthОпределяет ширину в пикселах, см и т. д. читать о единицах длины
%Определяет ширину в процентах от содержащего блока
initialПрисваивает этому свойству значение по умолчанию. (Читайте о initial)
inheritНаследует это свойство из родительского элемента.
(Читайте о inherit)

Другие примеры

Пример

Задайте ширину элемента <img>, используя значение процента:

img {
    width: 50%;
}

Пример

Задайте ширину < входного типа = «Text» > элемент 100px. Однако, когда он получает фокус, сделать его 250пкс широкий:

input[type=text] {
    width: 100px;
}

input[type=text]:focus {
    width: 250px;
}

Похожие страницы

CSS Справочник: CSS Height and Width

CSS Справочник: CSS Box model

CSS Справка: height Свойство

HTML DOM Справочник: width Свойство

❮ Назад Полный CSS Справочник Дальше ❯

Популярное CSS

css текст
блоки css
css картинки
как сделать css
цвета css
шрифты css
css стили
елементы css
фон css
кнопки css
таблица css
размер css

ссылки css
изображение css
выравнивание css
внешние отступы css
внутренние отступы css
списки css
css ширина
css при наведении
css формы

Copyright 2018-2020 HTML5CSS. ru

Правила и Условия Политика конфиденциальности О нас Контакты

width | CSS справочник

Поддержка браузерами

12.0+ 4.0+ 1.0+ 1.0+ 3.5+ 1.0+

Описание

CSS свойство width устанавливает ширину области содержимого элемента.

Если содержимое превышает заданную ширину области содержимого, оно будет выходить за границу элемента, например слишком длинное слово или слишком большое изображение. Для того, чтобы содержимое оставалось в пределах границ элемента, можно воспользоваться свойством overflow или overflow-x, в этом случае, если содержимое будет превышать заданную ширину, появится полоса прокрутки. Чтобы визуально увидеть, когда содержимое выходит за границу элемента, можно к примеру установить фон или рамку для элемента.

Общая ширина элемента вычисляется по формуле: width + padding (левый и правый) + border (левый и правый). Например, если вы зададите: width: 500px, padding: 5px, border 1px, то общая ширина элемента получится 512px.

Примечание: свойство width работает только с блочными элементами.

Значение по умолчанию: auto
Применяется: ко всем элементам, кроме незаменяемых строчных элементов, столбцов таблицы и групп столбцов
Анимируется: да
Наследуется: нет
Версия: CSS1
Синтаксис JavaScript: object.style.width=»50px»

Синтаксис

width: auto|величина|inherit;

Значения свойства

Значение Описание
auto Значение auto означает, что область содержимого будет автоматически растянута по ширине ровно на столько, сколько есть свободного места.
величина Определяет ширину в единицах измерения CSS.
% Ширина указывается в процентах и высчитывается в зависимости от ширины области содержимого родительского элемента.
inherit
Указывает, что значение наследуется от родительского элемента.

Пример


<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Пример</title>
  <style>
    p.ex { width: 300px; }
  </style>
</head>
<body>

  <p>Открыв глаза, он понял, что все еще находится в лесу, поблизости
  никого уже не было, даже чувство тревоги пропало. И только полностью осознав
  что произошло, он наконец-то понял причину нападения и осознал, как много у него
  украли за прошедшие мгновения его жизни.</p>

</body>
</html>

Результат данного примера в окне браузера:

HTML | Ширина стиля DOM Свойство

Улучшить статью

Сохранить статью

  • Последнее обновление: 05 Авг, 2022

  • Читать
  • Обсудить

    • Улучшить статью

    Сохранить статью

    Свойство ширины стиля в HTML DOM используется для установки или возврата ширины элемента, который может быть элементом уровня блока или элементом с фиксированным положением.

    Синтаксис: 

    • Используется для возврата свойства ширины:
     object.style.width
    • Используется для установки свойства ширины:
     object.style.width = "auto|length|%|initial|inherit"

    Значение свойства Описание

    4

      3

      3

      auto- Это значение автоматически устанавливает браузером значение ширины по умолчанию.
    • длина- Это значение задает значение ширины в указанных единицах длины.
    • %- Процентное значение устанавливает значение ширины в указанном проценте от ширины родительского элемента.
    • начальный- Это значение устанавливает для свойства ширины значение по умолчанию браузера.
    • inherit- Это значение задает для свойства width значение родительского элемента.

    Возвращаемое значение: Строка, представляющая ширину элемента.

    Пример 1:  

    HTML

    > html0080

    < head >

         < style >

             #GfG {

                 width: 100px;

                 высота: 100 пикселей;

                 цвет фона: зеленый;

                 цвет: белый;

             }

         style >

    head >

    < body >

         < p >HTML|DOM Style Width Property: p >

         < ()! button 0080 button >

         < div id="GfG">

             < h2 >GfG h2 >

    Div >

    < Сценарий >

    Функция MyFuphanc () {

    . 0080

                 document.getElementById("GfG")

                 .style.width = "500px";

             }

         script >

    body >

    html >

    Выход:

    • Before click on the button:  

    • After click on the button:  

    Example 2:  

    html

    < HTML >

    < Body >

    <

    . 0080 >GeeksforGeeks h2 >

         < h3 >HTML|DOM Style Width Property: h3 >

         < button Тип = "Кнопка"

    OnClick = "myFunction ()"> Нажмите здесь! Кнопка >

    <

     
     
        < 
     
        <0080  Сценарий  >  
     
     
     
       Функция MyFunction () { 
     
        Document.getElementByID ("MyBTN")  
     
      80808080808080808.    
      
                   }   
      
                  script    >   
      
          body    >   
      
          html    >

    Output:

    • Before click on the button:  

    • After click on the button:  

    Поддерживаемые браузеры: Браузеры, поддерживаемые свойством ширины стиля DOM , перечислены ниже:

    • Google Chrome 1
    • Edge 12
    • Internet Explorer 4
    • Firefox 1
    • Safari 1
    • Opera 3.5

    Далее

    Функция D3. js geoCollignon()

    Похожие статьи

    html - растягивает содержащийся в нем div. Я не хочу, чтобы

    спросил

    Изменено 4 года, 6 месяцев назад

    Просмотрено 4к раз

    В моем реальном проекте не используются встроенные стили или цвета фона. Они были добавлены только для устранения неполадок.

    Начиная с приведенного ниже кода, все в порядке, за исключением того, что ввод второго текста кажется немного коротким. Все остальные текстовые поля растягиваются, чтобы заполнить окно браузера. Я не хочу этого делать, но я бы хотел, чтобы он просто заполнил раздел, который я выделил красным. Так что потянитесь полностью вправо, но не полностью влево. 

     
<дел>

    ()

    Учитывая, что я хотел бы, чтобы текстовый ввод заполнял 100% родительского элемента div (т. е. область красного цвета), мой первый порыв — написать style="width:100%;" , но это не дает желаемого результата. См. ниже.

     
<дел>

    ()

    Как сделать так, чтобы ввод текста заполнял область, выделенную красным?

    • html
    • css

    Используйте flex , как показано ниже.

    Добавить display: flex на родительском div и flex: 1 0 auto; на родительском div второго входа и ширина 100% на втором входе.

     
<дел>
  
    ()
    
  <дел>

    2

    Вы пытаетесь сделать так:

     
    
    

    ()

    Как я вижу, в вашем коде вы указали width:20px; в div (желтый), так что оставшееся пространство в родительском div (синий) равно не 100% , поэтому, когда вы указываете ширину: 100% для ввода внутри div (красный), он ломается и переходит к следующей строке, чтобы взять 100%; ширина.