Las clases de Spectre Position se utilizan para cosas útiles de diseño y posición, incluidas las utilidades clearfix , float , position , margin y padding . Clearfix es una forma en que un elemento borra o corrige automáticamente sus elementos para que no necesite agregar marcas adicionales y el flotador se usa para colocar los elementos a la izquierda, derecha, de su contenedor junto con permitir el texto y en línea Elementos para envolverlo.
La posición informa sobre el método de posicionamiento de un elemento o una entidad HTML. Los márgenes se utilizan para crear espacio alrededor del elemento. Podemos establecer los diferentes tamaños de márgenes para lados individuales ( superior, derecho, inferior, izquierdo ) y los rellenos se utilizan para crear espacio alrededor del elemento, dentro de cualquier borde definido.
Clase de posición de espectro:
- clearfix: esta clase se usa para borrar float.
- float-left: esta clase se utiliza para crear el elemento flotante a la izquierda.
- float-right: esta clase se utiliza para crear el elemento flotante a la derecha.
- p-relativo | absoluto | fijo | pegajoso | centrado: Esta clase se utiliza para definir la posición del elemento.
- m-1 | 2: esta clase se usa para establecer el margen de todos los márgenes (m-1 es 4px y 2 es 8px)
- mt-1 | 2: esta clase se usa para establecer el margen del margen superior (m-1 es 4px y 2 es 8px)
- mx-1 | 2: esta clase se usa para establecer el margen del margen izquierdo (m-1 es 4px y 2 es 8px)
- mi-1 | 2: esta clase se usa para establecer el margen del margen derecho (m-1 es 4px y 2 es 8px)
- p-1 | 2: esta clase se usa para establecer el relleno de todo el relleno (m-1 es 4px y 2 es 8px)
- pt-1 | 2: esta clase se usa para establecer el relleno del relleno superior (m-1 es 4px y 2 es 8px)
- px-1 | 2: esta clase se usa para establecer el relleno del relleno izquierdo (m-1 es 4px y 2 es 8px)
- py-1 | 2: esta clase se usa para establecer el relleno del relleno derecho (m-1 es 4px y 2 es 8px)
Sintaxis:
<element class="Position-Class">
Los siguientes ejemplos ilustran la posición de espectro.
Ejemplo 1: En este ejemplo, usaremos la clase float-right .
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://unpkg.com/spectre.css/dist/spectre.min.css">
<link rel="stylesheet" href=
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
<link rel="stylesheet" href=
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
<style>
div {
border: 3px solid green;
}
.gfg {
overflow: auto;
}
</style>
</head>
<body>
<center>
<h1 class="text-success">GeeksforGeeks</h1>
<strong>Spectre Position Class</strong>
<br>
</center>
<div class="gfg">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200X200.png"
alt="Pineapple" width="200" height="200" class="float-right">
GATE(Graduate Aptitude Test in Engineering) is one the most
important and in-demand entrance exam for engineering graduates
in our country. M.Tech. in Computer Science is one of the most
demanding courses at prestigious institutes like IISCs and IITs.
GATE(Graduate Aptitude Test in Engineering) is one of the ways
to get into these top institutes. Every year around 10 Lakh
candidates apply for GATE exam and very few of them manage to
ace the exam with good score. So the competition is clearly
very tough and simply preparing without any strategy will make
it difficult to land you into IISCs and IITs.
</div>
</body>
</html>
Producción:
Ejemplo 2: En este artículo, usaremos todas las clases de margen y relleno .
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://unpkg.com/spectre.css/dist/spectre.min.css">
<link rel="stylesheet" href=
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
<link rel="stylesheet" href=
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
<style>
div {
border: 3px solid green;
height: 100%;
}
img {
border: 2px solid blue;
}
</style>
</head>
<body>
<center>
<h1 class="text-success">GeeksforGeeks</h1>
<strong>Spectre Position Class</strong>
<br>
</center>
<div class="gfg">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200X200.png"
class="m-2 p-2">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200X200.png"
class="mt-2 pt-2">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200X200.png"
class="mx-2 px-2">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200X200.png"
class="my-2 py-2">
</div>
</body>
</html>
Producción:
Enlace de referencia: https://picturepan2.github.io/spectre/utilities/position.html
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA