CSS gebruiken om HTML-elementen te plaatsen

• April 28, 2024

CSS-regels geven u de mogelijkheid om HTML-elementen precies daar te plaatsen waar u ze wilt. U kunt aanpassen hoe ze reageren op andere elementen die er omheen zitten, of ze zelfs helemaal verbergen. Hier is een overzicht van de CSS-plaatsingseigenschappen.

Weergeven: deze eigenschap bepaalt hoe een element wordt weergegeven. Als weergave wordt ingesteld op "geen", wordt het element volledig verborgen, terwijl andere waarden kunnen veranderen hoe een element reageert op andere eigenschappen en elementen. Div's zijn bijvoorbeeld standaard ingesteld om als "blok" te worden weergegeven, wat betekent dat het als een rechthoekig object fungeert, maar u kunt "display: inline" gebruiken om een ​​div in plaats daarvan als een alinea te dwingen. Of u kunt het tegenovergestelde doen en "display: block" gebruiken om een ​​alinea te dwingen zich als een div te gedragen.

Positie: bepaalt hoe een element reageert op de elementen eromheen. Elementen gebruiken standaard "position: static", wat betekent dat ze worden weergegeven in volgorde zoals ze worden weergegeven in de HTML-code. "Positie: relatief" betekent dat de statische locatie van het element wordt berekend en vervolgens wordt gecompenseerd door wat u in de eigenschappen "boven" en "links" aangeeft. De andere pagina-elementen doen alsof het relatieve element zich nog op de statische locatie bevond. "Position: absolute" -elementen negeren hun statische locatie en baseren hun positie uitsluitend op de waarden in de eigenschappen top, left, right en bottom. Bovendien negeren andere elementen dat element (dus als u niet voorzichtig bent, kunt u wat rommelige overlappingen krijgen). "Positie: vast" is vergelijkbaar met "positie: absoluut" behalve dat het element zijn plaats behoudt, zelfs als uw bezoeker door de pagina schuift.

Zichtbaarheid: bepaalt of een element op de pagina wordt weergegeven of niet. Het verschil tussen "weergave: geen" en "zichtbaarheid: verborgen" is dat in het eerste geval de andere pagina-elementen zich gedragen alsof het onzichtbare object niet bestaat; in het laatste geval zullen andere elementen een plaats behouden voor het verborgen element. Het is duidelijk dat de standaardinstelling "zichtbaar" is.

Float: Stelt in of een element links of rechts van andere elementen valt (of helemaal niet cascadeert, wat de standaardinstelling is). Deze eigenschap is uiterst nuttig om relatieve elementen correct te positioneren. U moet een breedte instellen voor elk zwevend element, anders wordt het niet correct weergegeven. Als u float voor één element gebruikt, wilt u waarschijnlijk ook de eigenschap instellen voor alle elementen eromheen.

Wissen: deze eigenschap werkt in combinatie met de eigenschap "zweven". Het bepaalt hoe het element andere elementen eromheen laat zweven - "clear: left" betekent dat er geen andere elementen naar links kunnen zweven; "clear: right" blokkeert de rechterkant en "clear: beiden" betekent dat er geen elementen naar beide kanten kunnen zweven. Standaardinstelling is "clear: none" (wat betekent dat andere elementen naar beide kanten kunnen zweven).

Video-Instructies: Afbeeldingen gebruiken - Les 7 - Website leren bouwen - Basis HTML & CSS (Dutch/NL Tutorial) (April 2024).