CSS naudojimas HTML elementams talpinti

• Gegužė 17, 2024

CSS taisyklės suteikia galimybę HTML elementus išdėstyti ten, kur norite. Galite pakoreguoti, kaip jie reaguoja į kitus aplink juos esančius elementus, arba netgi visiškai juos paslėpti. Čia pateiktas CSS talpinimo ypatybių suskirstymas.

Ekranas: Ši savybė nusako elemento rodymo būdą. Jei ekrano nustatymas yra „jokio“, jis visiškai paslepia elementą, o kitos vertės gali pakeisti tai, kaip elementas reaguoja į kitas savybes ir elementus. Pavyzdžiui, pagal numatytuosius nustatymus divs yra rodomas kaip „blokas“, tai reiškia, kad jis veikia kaip stačiakampis objektas, tačiau jūs galite naudoti „display: inline“, kad priverstumėte div veikti kaip pastraipa. Arba galite padaryti atvirkščiai ir naudoti „display: block“, norėdami priversti pastraipą elgtis kaip div.

Padėtis: nustato, kaip elementas reaguoja į aplink jį esančius elementus. Elementai pagal nutylėjimą naudoja „padėtis: statinė“, tai reiškia, kad jie rodomi tokia tvarka, kokia jie yra HTML kode. „Padėtis: santykinis“ reiškia, kad apskaičiuojama statinė elemento vieta, o tada kompensuota tuo, ką nurodote „viršutinėje“ ir „kairėje“ savybėse. Kiti puslapio elementai veikia taip, lyg santykinis elementas vis dar būtų statiškoje vietoje. „Pozicija: absoliutus“ elementai nepaiso jų statinės padėties, pagrįsdami savo poziciją vien tik vertybėmis, esančiomis viršutinėje, kairėje, dešinėje ir apačioje. Be to, kiti elementai nepaisys to elemento (taigi, jei nesate atsargus, galite susidurti su nepatogiais sutapimais). „Pozicija: fiksuota“ yra panaši į „padėtis: absoliuti“, išskyrus tai, kad elementas užims savo vietą, net jei jūsų lankytojas slinks puslapį.

Matomumas: nusprendžia, ar elementas rodomas puslapyje, ar ne. Skirtumas tarp „rodymo: nėra“ ir „matomumas: paslėptas“ yra tas, kad pirmuoju atveju kiti puslapio elementai elgiasi taip, tarsi nematomas objektas neegzistuotų; pastarajame kiti elementai užims vietą paslėptam elementui. Akivaizdu, kad numatytasis nustatymas yra „matomas“.

Plūduriuojantis: nustato, ar elementas kaskaduojasi kairėje ar dešinėje nuo kitų elementų (ar ne kaskadinis, o tai yra numatytasis). Ši savybė yra labai naudinga norint teisingai išdėstyti santykinius elementus. Turite nustatyti bet kokio plūduriuojančio elemento plotį, kitaip jis nebus rodomas tinkamai. Be to, jei vienam elementui naudosite plūdę, greičiausiai norėsite nustatyti ir visų aplink jį esančių elementų ypatybes.

Aišku: ši savybė veikia kartu su „plūduriuojančia“ savybe. Jis nusprendžia, kaip elementas leis kitiems elementams plūduriuoti aplink jį - „išvalyti: kairė“ reiškia, kad jokie kiti elementai negali plūduriuoti jo kairėje; „Išvalyti: dešinė“ blokuoja dešinę pusę, o „išvalyti: abu“ reiškia, kad jokie elementai negali plūduriuoti į abi puses. Numatytasis nustatymas yra „aiškus: jokio“ (tai reiškia, kad kiti elementai gali plūduriuoti į abi puses).

Vaizdo Instrukcijos: JavaScript for Web Apps, by Tomas Reimers and Mike Rizzo (Gegužė 2024).