From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pl/web/css/width/index.html | 207 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 207 insertions(+) create mode 100644 files/pl/web/css/width/index.html (limited to 'files/pl/web/css/width') diff --git a/files/pl/web/css/width/index.html b/files/pl/web/css/width/index.html new file mode 100644 index 0000000000..0e5abadd9f --- /dev/null +++ b/files/pl/web/css/width/index.html @@ -0,0 +1,207 @@ +--- +title: width +slug: Web/CSS/width +translation_of: Web/CSS/width +--- +
{{CSSRef}}
+ +

Właściwość widthCSS ustawia szerokość elementu. Domyślnie ustawia szerokość obszaru zawartości , ale jeśli {{cssxref ("box-sizing")}} jest ustawione na border-box, ustawia szerokość obszaru border .

+ +
{{EmbedInteractiveExample("pages/css/width.html")}}
+ + + +

Właściwości {{cssxref ("min-width")}} i {{cssxref ("max-width")}} przesłaniają {{cssxref ("width")}}.

+ +

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:

+ + + +

Wartości

+ +
+
{{cssxref("<length>")}}
+
Ustala absolutną wartość szerokości.
+
{{cssxref("<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 {{experimental_inline}}
+
Jeśli występuje, wartość {{cssxref("<length>")}} lub {{cssxref("<percentage>")}} są aplikowane do obszaru border elementu.
+
content-box {{experimental_inline}}
+
Jeśli występuje, wartość {{cssxref("<length>")}} lub {{cssxref("<percentage>")}} jest aplikowana do obszaru zawartości elementu.
+
auto
+
Przeglądarka sama wylicza i wybiera szerokość elementu.
+
fill {{experimental_inline}}
+
Używa liniowej wielkości fill-available lub blokowej wielkości fill-available, odpowiednio do trybu pisania (writing mode).
+
max-content {{experimental_inline}}
+
Naturalna preferowana szerokość zawartości (gdy nie zostanie zastosowane miękkie zawijanie soft wrap).
+
min-content {{experimental_inline}}
+
Naturalna minimalna szerokość zawartości (gdy zastosowane zostanie miękkie zawijanie soft wrap).
+
available {{experimental_inline}}
+
Dostępna szerokość - blok obejmujący minus poziome marginesy, border i padding.
+
fit-content {{experimental_inline}}
+
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

+ +
{{csssyntax}}
+ +

Examples

+ +

Domyślna szerokość

+ +
p.goldie {
+  background: gold;
+}
+ +
<p class="goldie">The Mozilla community produces a lot of great software.</p>
+ +

{{EmbedLiveSample('Default_width', '500px', '64px')}}

+ +

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>
+ +

{{EmbedLiveSample('Pixels_and_ems', '500px', '64px')}}

+ +

Procentowo

+ +
.percent {
+  width: 20%;
+  background-color: silver;
+  border: 1px solid red;
+}
+ +
<div class="percent">Width in percentage</div>
+ +

{{EmbedLiveSample('Percentage', '500px', '64px')}}

+ +

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>
+ +

{{EmbedLiveSample('max-content_2', '500px', '64px')}}

+ +

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>
+ +

{{EmbedLiveSample('min-content_2', '500px', '155px')}}

+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecifikacjaStatusKomentarz
{{SpecName('CSS3 Box', '#the-width-and-height-properties', 'width')}}{{Spec2('CSS3 Box')}}Dodanie słów kluczowych max-content, min-content, available, fit-content, border-box, content-box.
{{SpecName('CSS3 Transitions', '#animatable-css', 'width')}}{{Spec2('CSS3 Transitions')}}Dodanie width jako animowanego.
{{SpecName('CSS2.1', 'visudet.html#the-width-property', 'width')}}{{Spec2('CSS2.1')}}Doprecyzowanie  do jakich elementów własność jest stosowana.
{{SpecName('CSS1', '#width', 'width')}}{{Spec2('CSS1')}}Oryginalna definicja.
+ +
{{cssinfo}}
+ +

Działanie w przeglądarkach

+ + + +

{{Compat ("css.properties.width")}}

+ +

Zobacz też

+ + -- cgit v1.2.3-54-g00ecf