Właściwość width
CSS ustawia szerokość elementu. Domyślnie ustawia szerokość obszaru zawartości , ale jeśli box-sizing
jest ustawione na border-box
, ustawia szerokość obszaru border .
Źródło tego interaktywnego przykładu jest przechowywane w repozytorium GitHub. Jeśli chcesz przyczynić się do interaktywnego projektu przykładów, sklonuj https://github.com/mdn/interactive-examples i wyślij nam żądanie ściągnięcia.
Składnia
/ * <length> wartości * /
szerokość: 300px;
szerokość: 25em;
/ * <wartość procentowa> * /
szerokość: 75%;
/ * Wartości słów kluczowych * /
width: 25em border-box;
width: 75% content-box;
width: max-content;
width: min-content;
width: available;
width: fit-content;
width: auto;
/* Global values */
width: inherit;
width: initial;
width: unset;
Właściwość width
przyjmuje wartości:
- jedno ze słów kluczowych:
available
,min-content
,max-content
,fit-content
,auto
. <length>
lub<percentage>
. Opcjonalnie można po nich dodać jedno ze słów kluczowych:border-box
,content-box
.
Wartości
<length>
- Ustala absolutną wartość szerokości.
<percentage>
- Określa szerokość jako procentową wartość względem szerokości obejmującego bloku. Jeśli szerokość bloku obejmującego zależy od szerokości elementu, układ końcowy jest niezdefiniowany.
border-box
- Jeśli występuje, wartość
<length>
lub<percentage>
są aplikowane do obszaru border elementu. content-box
- Jeśli występuje, wartość
<length>
lub<percentage>
jest aplikowana do obszaru zawartości elementu. auto
- Przeglądarka sama wylicza i wybiera szerokość elementu.
fill
- Używa liniowej wielkości
fill-available
lub blokowej wielkościfill-available
, odpowiednio do trybu pisania (writing mode). max-content
- Naturalna preferowana szerokość zawartości (gdy nie zostanie zastosowane miękkie zawijanie soft wrap).
min-content
- Naturalna minimalna szerokość zawartości (gdy zastosowane zostanie miękkie zawijanie soft wrap).
available
- Dostępna szerokość - blok obejmujący minus poziome marginesy, border i padding.
fit-content
- Większa z wartości:
- naturalna minimalna szerokości (min-content)
- mniejsza z wartości: naturalna preferowana szerokość (max-content) i dostępna szerokość (available)
Formalna składnia
auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)where
<length-percentage> = <length> | <percentage>
Examples
Domyślna szerokość
p.goldie {
background: gold;
}
<p class="goldie">The Mozilla community produces a lot of great software.</p>
Piksele i emy
.px_length {
width: 200px;
background-color: red;
color: white;
border: 1px solid black;
}
.em_length {
width: 20em;
background-color: white;
color: red;
border: 1px solid black;
}
<div class="px_length">Width measured in px</div>
<div class="em_length">Width measured in em</div>
Procentowo
.percent {
width: 20%;
background-color: silver;
border: 1px solid red;
}
<div class="percent">Width in percentage</div>
max-content
p.maxgreen {
background: lightgreen;
width: intrinsic; /* Safari/WebKit uses a non-standard name */
width: -moz-max-content; /* Firefox/Gecko */
width: -webkit-max-content; /* Chrome */
}
<p class="maxgreen">The Mozilla community produces a lot of great software.</p>
min-content
p.minblue {
background: lightblue;
width: -moz-min-content; /* Firefox */
width: -webkit-min-content; /* Chrome */
}
<p class="minblue">The Mozilla community produces a lot of great software.</p>
Dostępność
Upewnij się, że elementy z ustaloną szerokością width
nie są przycinane ani nie zasłaniają pozostałej zawartości, kiedy strona jest przybliżana (zoom) aby zwiększyć rozmiar tekstu.
Specyfikacje
Specifikacja | Status | Komentarz |
---|---|---|
CSS Basic Box Model The definition of 'width' in that specification. |
Working Draft | Dodanie słów kluczowych max-content , min-content , available , fit-content , border-box , content-box . |
CSS Transitions The definition of 'width' in that specification. |
Working Draft | Dodanie width jako animowanego. |
CSS Level 2 (Revision 1) The definition of 'width' in that specification. |
Recommendation | Doprecyzowanie do jakich elementów własność jest stosowana. |
CSS Level 1 The definition of 'width' in that specification. |
Recommendation | Oryginalna definicja. |
Wartość początkowa | auto |
---|---|
Stosowana do | all elements but non-replaced inline elements, table rows, and row groups |
Dziedziczona | no |
Percentages | refer to the width of the containing block |
Wartość wyliczona | a percentage or auto or the absolute length |
Animation type | a length, percentage or calc(); |
Działanie w przeglądarkach
BCD tables only load in the browser
Tabela zgodności na tej stronie jest generowana na podstawie danych strukturalnych. Jeśli chcesz przyczynić się do danych, sprawdź https://github.com/mdn/browser-compat-data i wyślij nam prośbę o wycofanie.