Använda CSS för att placera HTML-element

• Maj 14, 2024

CSS-regler ger dig möjlighet att placera HTML-element exakt där du vill ha dem. Du kan justera hur de svarar på andra element som sitter runt dem, eller till och med dölja dem helt. Här är en sammanfattning av CSS-placeringsegenskaperna.

Display: Den här egenskapen definierar hur ett element ska visas. Att ställa in displayen till "ingen" döljer elementet helt, medan andra värden kan ändra hur ett element reagerar på andra egenskaper och element. Till exempel är divs inställda på att visas som "block" som standard, vilket innebär att det fungerar som ett rektangulärt objekt, men du kan använda "display: inline" för att tvinga en div att agera som ett stycke istället. Eller så kan du göra det motsatta och använda "display: block" för att tvinga ett stycke att agera som en div.

Position: Definierar hur ett element reagerar på elementen runt det. Element använder som standard "position: static", vilket betyder att de visas i ordning som de visas i HTML-koden. "Position: relativ" betyder att elementets statiska plats beräknas och sedan kompenseras av vad du anger i egenskaperna "överst" och "vänster". De andra sidelementen fungerar som om det relativa elementet fortfarande var på sin statiska plats. "Position: absoluta" element ignorerar deras statiska placering och baserar sin position enbart på värdena uppifrån, vänster, höger och botten. Dessutom kommer andra element att ignorera det elementet (så om du inte är försiktig kan du sluta med några röriga överlappningar). "Position: fast" liknar "position: absolut" förutom att elementet kommer att hålla sin plats även om din besökare bläddrar på sidan.

Synlighet: Bestämmer om ett element visas på sidan eller inte. Skillnaden mellan "display: ingen" och "synlighet: dold" är att i det tidigare fallet uppträder de andra sidelementen som om det osynliga objektet inte finns; i det senare kommer andra element att hålla en plats för det dolda elementet. Uppenbarligen är standardinställningen "synlig."

Float: Ställer in om ett element kaskader till vänster eller höger om andra element (eller inte kaskader alls, vilket är standard). Den här egenskapen är oerhört bra för att få relativa element på rätt sätt. Du måste ställa in en bredd för alla flytande element, annars kommer den inte att visas korrekt. Om du använder float för ett element vill du förmodligen ställa in egenskapen för alla elementen runt det också.

Rensa: Den här egenskapen fungerar tillsammans med egenskapen "flyta". Den bestämmer hur elementet låter andra element flyta runt det - "clear: left" betyder att inga andra element kan flyta till vänster; "clear: höger" blockerar från höger sida och "clear: båda" betyder att inga element kan flyta till någon sida. Standardinställningen är "tydlig: ingen" (vilket betyder att andra element kan flyta till endera sidan).

Video Instruktioner: When to use Section vs Article vs Div in Html? (Maj 2024).