From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/es/web/css/width/index.html | 404 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 404 insertions(+) create mode 100644 files/es/web/css/width/index.html (limited to 'files/es/web/css/width/index.html') diff --git a/files/es/web/css/width/index.html b/files/es/web/css/width/index.html new file mode 100644 index 0000000000..3e8317e17d --- /dev/null +++ b/files/es/web/css/width/index.html @@ -0,0 +1,404 @@ +--- +title: width +slug: Web/CSS/width +tags: + - Propiedad CSS + - Referencia +translation_of: Web/CSS/width +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad CSS width especifica la anchura del area de contenido de un elemento. El área de contenido está dentro del padding, borde, y margen del elemento.

+ +

Las propiedades {{cssxref("min-width")}} y {{cssxref("max-width")}} sobreescriben el valor de {{cssxref("width")}}.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* Valores <length> */
+width: 300px;
+width: 25em;
+
+/* Valores <percentage> */
+width: 75%;
+
+/* Valores clave */
+width: 25em border-box;
+width: 75% content-box;
+width: max-content;
+width: min-content;
+width: available;
+width: fit-content;
+width: auto;
+
+/* Valores globales */
+width: inherit;
+width: initial;
+width: unset;
+
+ +

Valores

+ +
+
<length>
+
Ver {{cssxref("<length>")}} para unidades disponibles.
+
<percentage>
+
Especificado con el tipo {{cssxref("<percentage>")}} como porcentaje de la anchura del bloque contenedor. Si la anchura del bloque contenedor depende de la anchura del elemento, la presentación resultante es indefinida.
+
border-box {{experimental_inline}}
+
Si está presente, el valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} precedente es aplicado a los límites del borde del elemento.
+
content-box {{experimental_inline}}
+
Si está presente, el valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} precedente será aplicado a los límites de contenido del elemento.
+
auto
+
El navegador calculará y seleccionará la anchura para el elemento especificado.
+
fill {{experimental_inline}}
+
Use el tamaño fill-available para elementos inline o block, según sea más apropiado para el modo de escritura.
+
max-content {{experimental_inline}}
+
La anchura preferida intrínseca.
+
min-content {{experimental_inline}}
+
La anchura mínima intrínseca.
+
available {{experimental_inline}}
+
La anchura del bloque contenedor menos su margen horizontal, borde y padding.
+
fit-content {{experimental_inline}}
+
El mayor entre: +
    +
  • la anchura mínima intrínseca
    • +
  • la menor entre la anchura prefereida intrínseca y la anchura disponible
    • +
+
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

Anchura predeterminada

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

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

+ +

Píxeles y ems

+ +
.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')}}

+ +

Porcentaje

+ +
.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', '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', '500px', '155px')}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Box', '#the-width-and-height-properties', 'width')}}{{Spec2('CSS3 Box')}}Añade las palabras clave max-content, min-content, available, fit-content, border-box, content-box.
{{SpecName('CSS3 Transitions', '#animatable-css', 'width')}}{{Spec2('CSS3 Transitions')}}Incluye width como propiedad que puede ser animada.
{{SpecName('CSS2.1', 'visudet.html#the-width-property', 'width')}}{{Spec2('CSS2.1')}}Especifica a qué elementos es aplicable.
{{SpecName('CSS1', '#width', 'width')}}{{Spec2('CSS1')}}Definición inicial
{{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}}{{Spec2('CSS3 Sizing')}}Añade nuevas palabras clave de tamaño para width y height
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}43.51.0 (85)
Capacidad de ser animada{{experimental_inline}}{{CompatUnknown}}{{CompatGeckoDesktop("16.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
max-content{{experimental_inline}}{{CompatChrome(22.0)}} {{property_prefix("-webkit")}}
+ {{CompatChrome(46.0)}} [1]		{{CompatGeckoDesktop("1.9")}}{{property_prefix("-moz")}}{{CompatUnknown}}15 {{property_prefix("-webkit")}}2.0 (421) (intrinsic value)
+ 6.1 {{property_prefix("-webkit")}}
min-content{{experimental_inline}} +

{{CompatChrome(22.0)}} [4] {{property_prefix("-webkit")}}
+ {{CompatChrome(46.0)}} [1]

+ 		{{CompatGeckoDesktop("1.9")}} {{property_prefix("-moz")}}{{CompatUnknown}}15 {{property_prefix("-webkit")}}2.0 (421) (min-intrinsic value)
+ 6.1 {{property_prefix("-webkit")}}
available{{experimental_inline}}{{CompatNo}}{{CompatGeckoDesktop("1.9")}} {{property_prefix("-moz")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}[1]
fill-available{{experimental_inline}}{{CompatChrome(22.0)}} {{property_prefix("-webkit")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}6.1 {{property_prefix("-webkit")}}
fit-content{{experimental_inline}}{{CompatChrome(22.0)}} [4] {{property_prefix("-webkit")}}
+ {{CompatChrome(46.0)}} [1]		{{CompatGeckoDesktop("1.9")}} {{property_prefix("-moz")}}{{CompatUnknown}}15 {{property_prefix("-webkit")}}6.1 {{property_prefix("-webkit")}}[2]
border-box y content-box{{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
fill{{CompatChrome(46.0)}}    
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidAndroid WebviewFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Soporte básico{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
Capacidad de ser animada{{experimental_inline}}{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("16.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
max-content{{experimental_inline}}{{CompatNo}}{{CompatChrome(46.0)}} [1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(46.0)}} [1]
min-content{{experimental_inline}}{{CompatNo}}{{CompatChrome(46.0)}} [1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(46.0)}} [1]
available{{experimental_inline}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
fill-available{{experimental_inline}}{{CompatNo}}{{CompatChrome(46.0)}} [1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(46.0)}} [1]
fit-content{{experimental_inline}}{{CompatNo}}{{CompatChrome(46.0)}} [1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(46.0)}} [1]
border-box y content-box{{experimental_inline}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
fill{{CompatNo}}{{CompatChrome(46.0)}}    {{CompatChrome(46.0)}}
+
+ +

[1] WebKit implementa una variante a este valor con el nombre fill-available a partir de 2013.

+ +

[2] Las versiones anteriores de WebKit implementaban una versión anterior de este valor con nombre intrinsic, pero implementan además fit-content desde la versión 6.1.

+ +

[3] Sin prefijo.

+ +

[4] Soporte a las antiguas palabras clave intrinsic y min-intrinsic de Webkit, pero removido en Chrome 48.

+ +

Véase también

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