Bruke CSS for å plassere HTML-elementer

• April 28, 2024

CSS-regler gir deg muligheten til å plassere HTML-elementer akkurat der du vil ha dem. Du kan justere hvordan de reagerer på andre elementer som sitter rundt dem, eller til og med skjule dem helt. Her er en oversikt over CSS-plasseringegenskapene.

Skjerm: Denne egenskapen definerer hvordan et element skal vises. Innstilling av skjerm til "ingen" skjuler elementet fullstendig, mens andre verdier kan endre hvordan et element reagerer på andre egenskaper og elementer. For eksempel er divs satt til å vises som "blokk" som standard, noe som betyr at det fungerer som et rektangulært objekt, men du kan bruke "display: inline" for å tvinge en div til å fungere som et avsnitt i stedet. Eller du kan gjøre det motsatte og bruke "display: block" for å tvinge et avsnitt til å fungere som en div.

Posisjon: Definerer hvordan et element reagerer på elementene rundt det. Elementer bruker "posisjon: statisk" som standard, noe som betyr at de vises i rekkefølge slik de vises i HTML-koden. "Posisjon: relativ" betyr at elementets statiske plassering blir beregnet og deretter utlignet av hva du angir i "topp" og "venstre" egenskapene. De andre sideelementene fungerer som om det relative elementet fremdeles var på sin statiske plassering. "Posisjon: absolutte" elementer ignorerer deres statiske beliggenhet, og baserer sin posisjon utelukkende på verdiene i topp-, venstre-, høyre- og bunnegenskapene. I tillegg vil andre elementer ignorere det elementet (så hvis du ikke er forsiktig kan du ende med noen rotete overlapp). "Posisjon: fast" ligner på "posisjon: absolutt" bortsett fra at elementet vil holde sin plass selv om den besøkende bla gjennom siden.

Synlighet: Avgjør om et element vises på siden eller ikke. Forskjellen mellom "display: none" og "synlighet: skjult" er at i det tidligere tilfellet oppfører de andre sideelementene seg som om det usynlige objektet ikke eksisterer; i det siste vil andre elementer holde et sted for det skjulte elementet. Det er klart, standardinnstillingen er "synlig."

Float: Stiller inn om et element kaskader til venstre eller høyre for andre elementer (eller ikke kaskader i det hele tatt, som er standard). Denne egenskapen er svært nyttig for å få relative elementer plassert riktig. Du må angi en bredde for ethvert flytende element, ellers vises det ikke riktig. Hvis du bruker float for ett element, vil du sannsynligvis angi egenskapen for alle elementene rundt det.

Clear: Denne egenskapen fungerer sammen med "float" -egenskapen. Den bestemmer hvordan elementet skal la andre elementer flyte rundt det - "klart: venstre" betyr at ingen andre elementer kan flyte til venstre; "klar: høyre" blokkerer fra høyre side og "klar: begge deler" betyr at ingen elementer kan flyte til hver side. Standardinnstillingen er "klar: ingen" (noe som betyr at andre elementer kan flyte til hver side).

Video Instruksjoner: How to save inspect element changes permanent (April 2024).