Les deux façons de dimensionner les éléments absolus dans CSS

<div >
	<div ></div>
</div>

#outer
{
	position: relative;
	width: 200px;
	height: 200px;
	margin: 20px auto;
	border: 2px solid #c00;
}

#inner
{
	position: absolute;
	left: 50px;
	top: 50px;
	width: 96px;
	height: 96px;
	background-color: #ddc;
	border: 2px solid #00c;
}

#inner
{
	position: absolute;
	left: 50px;
	right: 50px;
	top: 50px;
	bottom: 50px;
	background-color: #ddc;
	border: 2px solid #00c;
}

• L'espacement autour de l'élément est plus critique que la largeur ou la hauteur. Vous pouvez également utiliser des propriétés négatives à gauche, à droite, supérieure et / ou inférieure pour rendre la boîte intérieure plus grande que son parent extérieur.
• Vous avez plusieurs éléments internes avec des bordures et un rembourrage différents, mais vous avez besoin d'espacement extérieur cohérent. Cette méthode vous permet de créer un seul style pour tous ces éléments.

// expands and contracts the inner box
window.onload = function() {

	var inner = document.getElementById("inner");
	var offset = 100, dir = -1;
	setInterval(function() {
		inner.style.left = inner.style.right = inner.style.top = inner.style.bottom = offset+"px";
		offset += dir;
		if (offset == 0 || offset == 100) dir = -dir;
	}, 10);
	
}

Questions fréquemment posées (FAQ) sur le dimensionnement CSS et le positionnement absolu

Quelle est la différence entre le positionnement absolu et relatif dans CSS?

Dans CSS, absolument et relatif sont deux types de méthodes de positionnement. Le positionnement absolu permet de positionner un élément par rapport à l'ancêtre positionné le plus proche. Cela signifie que l'élément est retiré du flux normal du document et qu'aucun espace n'est créé pour l'élément de la disposition de la page. D'un autre côté, le positionnement relatif permet à un élément d'être positionné par rapport à sa position normale. Cela signifie que le positionnement est relatif à la position d'origine de l'élément dans l'écoulement du document, et l'espace est toujours conservé pour cela dans la mise en page.

Comment fonctionne la propriété «Position: Absolute» dans CSS?

La propriété «Position: Absolute» dans CSS supprime un élément du flux de document normal et le positionne à une position spécifiée par rapport à son ancêtre positionné le plus proche ou au bloc de contenu initial. L'élément positionné peut être déplacé à l'aide des propriétés «haut», «droite», «bas» et «gauche». Cependant, si aucun élément ancêtre n'a de position autre que «statique», le bloc de contenu initial est utilisé à la place.

Quelle est l'utilisation de «top», «droite», «en bas» et «gauche» dans les propriétés CSS?

Les propriétés CSS sont utilisées pour positionner un élément. Ces propriétés n'ont que des effets sur les éléments positionnés. Ils spécifient la distance entre l'élément et un ou plusieurs côtés de son élément contenant. Par exemple, «en haut: 20px» signifie que le bord supérieur de l'élément sera à 20px du bord supérieur de son élément contenant.

Comment puis-je centrer un élément absolument positionné dans CSS?

pour centrer un élément absolument positionné, vous pouvez utiliser les propriétés «gauche» et «transformer» ensemble. Tout d'abord, définissez «gauche: 50%» pour déplacer le bord gauche de l'élément au centre de son parent. Ensuite, utilisez «Transform: Translatex (-50%)» pour ramener l'élément vers la gauche par la moitié de sa propre largeur, en le centrant efficacement.

Quelle est la différence entre le positionnement «absolu» et «fixe» dans CSS?

Bien qu'ils soient à la fois «absolu» et «fixe» le positionnement de l'élément du flux de documents normal, ils diffèrent dans la façon dont ils positionnent l'élément. «Absolut» positionne l'élément par rapport à son ancêtre positionné le plus proche ou au bloc contenant initial. «Correction», en revanche, positionne l'élément par rapport à la fenêtre du navigateur. Cela signifie qu'un élément fixe ne bougera pas même si la page est défilée.

Comment CSS gère-t-il les éléments qui se chevauchent?

CSS gère les éléments qui se chevauchent à l'aide de la propriété «Z-index». Cette propriété spécifie l'ordre de pile d'un élément, qui est sa position sur l'axe Z. Un élément avec un «indice z plus élevé sera affiché devant un élément avec un« indice z »inférieur.

Qu'est-ce que le bloc contenant initial dans CSS?

Le bloc contenant initial dans CSS est le bloc contenant dans lequel réside l'élément racine (HTML). Il s'agit généralement de la fenêtre de la fenêtre du navigateur, mais peut également être la zone de page si la propriété «débordement» de l'élément racine n'est pas «visible».

Comment puis-je faire remplir une largeur et une hauteur entières de son élément parent, vous pouvez utiliser la «width» et la «hauteur» des aélets et des «width» et des «hauteur» et les réglages pour les «réglages». Cela rendra l'élément aussi large et aussi haut que son élément contenant.

Quelle est la différence entre la «largeur» et la «largeur maximale» dans CSS?

La propriété «largeur» dans CSS spécifie la largeur du contenu d'un élément, tandis que la propriété «max-largeur» définit la largeur maximale que l'élément peut s'étirer jusqu'à lorsque le contenu est plus grand que la largeur spécifiée. Si le contenu est plus petit que la «largeur maximale», le contenu restera à sa taille naturelle.

Comment puis-je faire en sorte qu'un élément maintienne son rapport d'aspect car il redimensionne?

pour faire en sorte qu'un élément maintienne son rapport d'aspect lorsqu'elle redimensionne, vous pouvez utiliser la propriété «Aspect-Ratio» dans le CSS. Cette propriété définit le rapport d'aspect pour la boîte, qui est le rapport de la largeur à la hauteur. Par exemple, «Ratio d'aspect: 16/9» maintiendra un rapport d'aspect 16: 9.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!