Altura y Anchura CSS
CSS Tutorial » Altura y Anchura CSS
Como aplicar altura y anchura en CSS definicion.
La propiedad de ancho y alto define el ancho y alto del área de contenido de un elemento. Este ancho y alto no incluye relleno, bordes ni márgenes.
CSS tiene varias propiedades de dimensión, como: width - ancho, height - alto, ancho máximo - max-width, ancho mínimo - min-width, alto máximo - max-height y alto mínimo - min-height que le permiten controlar el ancho y alto de un elemento. Las siguientes secciones describen cómo utilizar estas propiedades para crear un mejor diseño de página web.
Las propiedades de alto y ancho pueden tener los siguientes valores:
- auto - Esto es predeterminado. El navegador calcula la altura y el ancho
- length - Define la altura / ancho en px, cm, etc.
- % - Define la altura / ancho en porcentaje del bloque contenedor
- initial - Establece el alto / ancho en su valor predeterminado
- inherit - La altura / ancho se heredará de su valor principal
Alto y ancho de CSS
La propiedad de ancho y alto define el ancho y alto del área de contenido de un elemento. Este ancho y alto no incluye relleno, bordes ni márgenes.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>CSS establece la anchura y la altura de un elemento</title>
<style>
div {
width: 310px;
height: 210px;
background-color: #9FC;
}
</style>
</head>
<body>
<div>¡Juega con los valores para ver cómo funciona!</div>
</body>
</html>
Las reglas de estilo anteriores asignan un ancho fijo de 310 píxeles y una altura de 210 píxeles al elemento <div>.
Etiquetas: Altura y anchura de CSS, alto y ancho, style, como aplicar altura y anchura en css, que es anchura y altura en css
Configuración de la anchura y la altura máximas
Puede usar la propiedad max-width y max-height para especificar el ancho y alto máximos del área de contenido.
Este ancho y alto máximo no incluye rellenos, bordes ni márgenes.
Un elemento no puede ser más ancho que el valor de ancho máximo, incluso si el valor de la propiedad de ancho se establece en algo más grande. Por ejemplo, si el ancho se establece en 350 px y el ancho máximo se establece en 290 px, el ancho real del elemento será 290 px. Similar en altura. Veamos un ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>CSS Set Maximum Width of an Element</title>
<style>
pre {
width: 350px;
background-color: #9F9;
}
div {
width: 350px;
max-width: 250px;
background: #bbb3ff;
}
p {
float: left;
max-width: 400px;
background: #eee8aa;
}
</style>
</head>
<body>
<pre>esta caja verde tiene 350 px</pre>
<div>El ancho máximo de este elemento div se establece en 250px, por lo que no puede ser más ancho que eso.</div>
<p>Ingrese un texto para ver cómo funciona.</p>
</body>
</html>
Configuración de la anchura y la altura mínimas
Puede utilizar la propiedad min-width y min-height para especificar la anchura y la altura mínimas del área de contenido. Este ancho y alto mínimo no incluye rellenos, bordes ni márgenes.
Un elemento no puede ser más estrecho que el valor de ancho mínimo, incluso si el valor de la propiedad de ancho se establece en algo menor. Por ejemplo, si el ancho se establece en 300 px y el ancho mínimo se establece en 400 px, el ancho real del elemento será 400 px. Veamos cómo funciona realmente:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>CSS establece el ancho mínimo de un elemento</title>
<style>
pre {
width: 300px;
background-color: #9F9;
}
div {
width: 100px;
min-width: 350px;
background: #bbb3ff;
}
p {
float: left;
min-width: 400px;
background: #eee8aa;
}
</style>
</head>
<body>
<h2> CSS establece el ancho mínimo de un elemento</h2>
<pre>esta caja verde tiene 300 px</pre>
<div>El ancho mínimo de este elemento div se establece en 350px,
por lo que no puede ser más estrecho que eso.</div>
<p>Ingrese un texto para ver cómo funciona.</p>
</body>
</html>
Etiquetas: Altura y ancho de CSS, alto y ancho css, style, como aplicar altura y anchura en css, Anchura y altura, que es anchura y altura en css, altura y anchura css
Altura y Anchura CSS - css.es
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.