Brug af CSS til at placere HTML-elementer

• Kan 12, 2024

CSS-regler giver dig muligheden for at placere HTML-elementer nøjagtigt, hvor du vil have dem. Du kan justere, hvordan de reagerer på andre elementer, der sidder omkring dem, eller endda skjule dem helt. Her er en oversigt over CSS-placeringsegenskaber.

Display: Denne egenskab definerer, hvordan et element skal vises. Indstilling af display til "ingen" skjuler elementet fuldstændigt, mens andre værdier kan ændre, hvordan et element reagerer på andre egenskaber og elementer. For eksempel er divs indstillet til at vises som "blok" som standard, hvilket betyder, at det fungerer som et rektangulært objekt, men du kan bruge "display: inline" til at tvinge en div til at fungere som et afsnit i stedet. Eller du kan gøre det modsatte og bruge "display: blok" til at tvinge et afsnit til at fungere som en div.

Position: Definerer, hvordan et element reagerer på elementerne omkring det. Elementer bruger "position: static" som standard, hvilket betyder, at de vises i rækkefølge, som de vises i HTML-koden. "Position: relativ" betyder, at elementets statiske placering beregnes og derefter udlignes med hvad du angiver i egenskaberne "øverste" og "venstre". De andre sideelementer fungerer som om det relative element stadig var på dets statiske placering. "Position: absolutte" elementer ignorerer deres statiske placering og baserer deres position udelukkende på værdierne i øverste, venstre, højre og nederste egenskaber. Derudover vil andre elementer ignorere dette element (så hvis du ikke er forsigtig, kan du ende med nogle rodede overlapninger). "Position: fast" ligner "position: absolute" bortset fra at elementet vil holde sin plads, selvom din besøgende ruller rundt på siden.

Synlighed: Afgør om et element vises på siden eller ej. Forskellen mellem "display: ingen" og "synlighed: skjult" er, at i det tidligere tilfælde opfører de andre sideelementer sig som om det usynlige objekt ikke findes; i sidstnævnte, vil andre elementer have et sted for det skjulte element. Naturligvis er standardindstillingen "synlig."

Float: Angiver, om et element kaskader til venstre eller højre for andre elementer (eller ikke kaskader overhovedet, hvilket er standard). Denne egenskab er yderst hjælpsom med at få relative elementer placeret korrekt. Du skal indstille en bredde for ethvert flydende element, ellers vises det ikke korrekt. Hvis du bruger float til et element, vil du sandsynligvis også angive egenskaben for alle elementerne omkring det.

Ryd: Denne egenskab fungerer sammen med egenskaben "flydende". Det bestemmer, hvordan elementet vil lade andre elementer flyde rundt om det - "klart: venstre" betyder, at ingen andre elementer kan flyde til venstre; "klar: højre" blokerer fra højre side og "klar: begge" betyder, at ingen elementer kan flyde til hver side. Standardindstillingen er "klar: ingen" (hvilket betyder, at andre elementer kan flyde til hver side).

Video Instruktioner: Modify Theme CSS with Inspect Element - WordPress (Kan 2024).