diezgan bieži izmanto mūsdienu vietņu izkārtojumā, lai izveidotu režģus un vienkārši nozīmē kaut kādu bloku vai konteineru. Tajā ir iespējams arī ligzdot citus tagus, kas nav iespējams ar visiem bloka elementiem, tāpēc
ērti lietojams. Bloki parasti tiek sakrauti viens virs otra un netiek ievietoti iekļautajos elementos. HTML iekļautie elementi ir teksts, un tā veidošanai tiek izmantots CSS.
Ņemot vērā satura platumu, kopējais bloka platums ir labā un kreisā polsterējuma, piemales, apmales un platuma vērtību summa. Noteiktā augstumā - no augšas un apakšas polsterējums, malas, apmales un augstums. Teksts bloka elementos pēc noklusējuma ir līdzināts pa kreisi. Ja vienā no tiem ir iekļauti elementi kopā ar bloka elementiem, tad ap iekļautajiem elementiem tiek izveidots anonīms bloks. Tam tiks piemērots noklusējuma stils. Tas arī pārmantos norādīto stilu, kas piešķirts tā vecākam.
Dokumentu plūsma Plūsma attiecas uz secību, kādā tiek parādīti lapas elementi, ko nosaka CSS norādītie rekvizīti. Šajā gadījumā pēc noklusējuma bloki tiek rindoti no augšas uz leju, un, ja nav pietiekami daudz vietas, iekļautie tagi tiek pārvietoti uz jaunu rindu un sakārtoti no augšas uz leju un no kreisās uz labo pusi. Elementa atrašanās vieta lapā ir atkarīga no tā vietas kodā: jo augstāks tas ir, jo agrāk tas atrodas. Katrs no bloka elementiem izskatās kā taisnstūris, kas atstumj savus kaimiņus. Varat mainīt šo darbību, izmantojot īpašus rekvizītus. Noteiktu bloku izlīdzināšanu konteinera centrā vai sānos CSS sauc par pozicionēšanu.
Pozicionēšanas elementi Bloku izvietojumu var kontrolēt, izmantojot absolūto un relatīvo pozicionēšanu. Pozicionēšana tiek izmantota, lai lielām lapas sadaļām piešķirtu noteiktu atrašanās vietu, izveidotu sarežģītas saskarnes, uznirstošos logus un dekoratīvos elementus. Galvenais rekvizīts, ko izmanto bloku pozicionēšanai CSS, ir pozīcija. Tam ir četras galvenās īpašības:
radinieks; absolūts; fiksēts; statisks.
Ar to palīdzību jūs varat pārslēgt izkārtojuma režīmus, norādot vienu no četriem parametriem: augšējo, labo, apakšējo vai kreiso. Ir arī īpašums slāņu pasūtīšanai - z-indekss. Pozicionēšana ar statisko rekvizītu parasti netiek izmantota, jo tā apzīmē bloku noklusējuma pozicionēšanu. Tāpēc nekādu parametru izmantošana to nekādā veidā neietekmē. Pārējie trīs rekvizīti tiek izmantoti izkārtojumam: relatīvs, absolūts, fiksēts.
Relatīvā pozicionēšana Bloku relatīvā pozicionēšana CSS, t.i., pozīcija: relatīvais īpašums, nozīmē, ka elementu var pārvietot un mainīt tā sākotnējo pozīciju. Šāds bloks joprojām paliek straumē. Patiesībā pārvietots ir nevis viņš pats, bet gan viņa kopija. Īpašumu vērtības ir iestatītas, lai precīzi norādītu, cik daudz bloks pārvietosies vienā vai otrā virzienā. Visbiežāk tos mēra pikseļos. Bet ir pieņemami izmantot citas vienības.
Rekvizītu izmantošana relatīvai pozicionēšanai Augšējais rekvizīts pārvieto konkrēta bloka kopiju uz augšu vai uz leju par īpašumā norādīto pikseļu skaitu. Lietojot to, elementi, kas atrodas zemāk vai augšā, paliek savās vietās, jo faktiski arī pārvietojamais bloks nekur nepārvietojas.
Apakšējais rekvizīts pārvieto bloku pretējā virzienā pret augšējo īpašumu. Pozitīva vērtība palīdz to pārvietot uz augšu, bet negatīva vērtība palīdz to pazemināt. Labās un kreisās īpašības pārvieto elementu attiecīgi pa labi un pa kreisi. Apvienojot tos visus, jūs varat iestatīt precīzu bloka atrašanās vietu lapā, pārvietojot to pa vertikālo un horizontālo koordinātu asi. Ja palielināsiet atkāpes, tās tiks aprēķinātas nevis no paša bloka malas, bet gan no tā kopijas nobīdes uz sāniem.
Absolūta pozicionēšana Bloku absolūto pozicionēšanu CSS nosaka absolūtās pozīcijas rekvizīta vērtība. Novietotais elements absolūti izkrīt no dokumentu plūsmas, un tā vietu ieņem blakus esošie bloki. Šāda elementa platums tiek izstiepts atkarībā no tā satura, un to var pārvietot, iestatot noteiktas vērtības rekvizītiem augšā, pa kreisi, pa labi, apakšā. Absolūtā bloku pozicionēšana CSS ir noderīga virsrakstiem. Bet pozīcija: absolūtais darbojas ne tikai bloka elementiem, bet arī iekļautajiem elementiem.
Elementu izlīdzināšana centrā Pozicionēts absolūti iekļauts elements darbosies tieši tāpat kā iekļauts elements. Tāpēc pozicionēšanu var izmantot arī teksta kontrolei CSS. Tam var lietot dažus jaunus rekvizītus, piemēram, mainīt augstumu un platumu. Centrēšana un vertikālā līdzināšana CSS izmanto vairāku īpašību kombināciju. Kontrolē augšējā īpašuma vertikālo līdzinājumu. Ja vēlaties centrēt bloku CSS, galvenajam konteineram ir jābūt relatīvi novietotam, un līdzinātajam elementam jābūt absolūti novietotam. Konteineram ir jāiestata augšējais rekvizīts: 50%, un, lai pārvietotu elementu uz pusi tā augstuma, izmantojiet translate rekvizītu ar vērtību “0, -50%. Absolūti pozicionētos elementus var iedalīt jaunā veidā, jo tiem tiek piemērotas īpašības, kas nav pieejamas citiem pozicionēšanas veidiem.
Pozicionēšana attiecībā pret pārlūkprogrammas augšējo kreiso stūri Kreisās, augšējās, labās un apakšējās īpašības darbojas atšķirīgi uz absolūti un relatīvi novietotiem elementiem. Relatīviem elementiem šīs īpašības nosaka nobīdi attiecībā pret elementa atrašanās vietu. Absolūti novietotie ieņem vietu attiecībā pret konkrētu koordinātu sistēmu, kas saistīta ar pārlūkprogrammas loga izmēru. Šīs sistēmas sākuma punkti ir loga stūri. Izmantojot kreiso rekvizītu, atkāpe tiks skaitīta no pārlūkprogrammas kreisās puses, taču ritjoslas nebūs. Augšējais rekvizīts, kad tas ir novietots absolūti, norāda nobīdi no pārlūkprogrammas augšdaļas līdz elementa augšdaļai, kuram tas tiek lietots. Apvienojot abus rekvizītus, elementu var pārvietot attiecībā pret pārlūkprogrammas augšējo kreiso stūri.
Pozicionēšana attiecībā pret pārlūkprogrammas augšējo labo stūri Līdzīgi, izmantojot labo un augšējo rekvizītu, varat nospiest elementu pārlūkprogrammas loga labajā pusē un mainīt tā vertikālo pozīciju, pārvietojot to uz augšējo labo stūri. Ja pareizais rekvizīts ir iestatīts uz negatīvu vērtību, bloks tiks pārvietots ārpus loga robežas. Pēc tam vajadzētu parādīties ritjoslai. Lai pārvietotu elementu uz leju, izmantojiet apakšējo rekvizītu. Tas norāda atkāpi no pārlūkprogrammas loga apakšējās malas līdz bloka apakšai. Ja tā vērtība ir negatīva, tiek parādīta arī ritjosla, jo elements tiek pārvietots ārpus pārlūkprogrammas loga apakšējās robežas.
Koordinātu sistēma absolūtai pozicionēšanai Pēc noklusējuma visi elementi, kuriem ir piešķirta absolūtā pozicionēšana, ir piesaistīti vienai koordinātu sistēmai - pārlūkprogrammas logam. Bet to var mainīt, piešķirot kādam vecāku elementam relatīvu pozicionēšanu. Pēc tam bērnu bloks mainīs savu atrašanās vietu atkarībā no vecāka. Ja starp vecākiem elementiem ir vairāki ar relatīvu pozicionēšanu, tad skaitīšana tiek veikta no tuvākā no tiem. Šajā gadījumā noklusējuma pozicionēšana būs no tā, kas norādīta body tagā.
Atskaites punkts absolūti novietotam elementam Pirms elementam tika piešķirta absolūta pozicionēšana, to dažviet sauca par netiešu izcelsmi. Ja šādam blokam netiek doti rekvizīti, tas nepārvietosies. Varat to pārvietot, iestatot piemales rekvizītu. Tas darbosies līdzīgi pozicionēšanas īpašībām. Ja nedefinēsi kreisās īpašības un visu pārējo vērtību, tad tā būs vienāda ar auto. Varat arī izmantot automātisko, lai atgrieztu elementus to sākotnējās vietās.
Fiksēta pozicionēšana Vēl viena vērtība ir fiksēta. Pozīcijas rekvizīts noenkuro elementu noteiktā vietā. Fiksētā pozicionēšana bieži tiek izmantota, lai izveidotu izvēlnes CSS. Tas ir līdzīgs absolūtajam, bet fiksētais bloks izkrīt no plūsmas. Pat ritinot lapu, šāds elements paliks savā vietā, tāpēc ir ērti to izmantot, lai izveidotu izvēlni CSS. Sākumpunkts tiks piesaistīts pārlūkprogrammas logam. Ja ir vairāki pozicionēti bloki, to sakārtošanai tiek izmantots z-index rekvizīts. Ar tās palīdzību jūs varat pārklāt relatīvos blokus ar absolūtajiem, ja piešķirat tiem atbilstošo indeksu, kas izteikts kā vesels skaitlis. Jo lielāks tas ir, jo augstāks būs bloks.
Viena no labākajām lietām CSS ir tā, ka stili dod mums iespēju novietot saturu un elementus lapā gandrīz jebkurā iedomājamā veidā. Tas mūsu dizainam pievieno struktūru un palīdz padarīt saturu vizuālāku.
Ir daži dažādi veidi pozicionēšana CSS, katram no šiem veidiem ir sava darbības joma. Šajā nodaļā mēs apskatīsim dažus dažādus lietošanas gadījumus — atkārtoti lietojamu izkārtojumu izveidi un vienreizlietojamo elementu unikālo novietojumu — un aprakstīsim dažas metodes, kā to izdarīt.
Pozicionēšana, izmantojot pludiņu Viens veids, kā novietot elementus lapā, ir peldēšanas rekvizīts. Šis īpašums ir diezgan daudzpusīgs, un to var izmantot dažādos veidos.
Būtībā peldēšanas rekvizīts ņem elementu, noņem to no parastās lapas plūsmas un novieto pa kreisi vai pa labi no tā vecākelementa. Visi pārējie lapas elementi tiks apvilkti ap šādu elementu. Piemēram, rindkopas apņems attēlu, ja elements
Ja pludināšanas rekvizīts tiek lietots vairākiem elementiem vienlaikus, tas ļauj izveidot izkārtojumu ar peldošiem elementiem blakus vai pretī viens otram, kā parādīts vairāku kolonnu izkārtojumā.
Pludināšanas rekvizītam ir vairākas vērtības, no kurām divas populārākās ir pa kreisi un pa labi, kas ļauj elementam peldēt pa kreisi vai pa labi no tā vecāka.
Img (peldēt: pa kreisi;)
peldēt praksē Izveidosim vispārīgu lapas izkārtojumu ar galveni augšpusē, divām kolonnām centrā un kājeni apakšā. Ideālā gadījumā šī lapa būtu marķēta ar elementiem
,
, Un , kā aprakstīts 2. nodarbībā “Iepazīstieties ar HTML”. Elementa iekšpusē HTML var izskatīties šādi:
Izkārtojuma bez pludiņa demonstrēšana Šeit ir elementi Un ir balstīti uz blokiem, tāpēc pēc noklusējuma tie ir salikti viens virs otra. Tomēr mēs vēlamies, lai šie elementi būtu blakus. Iestatot pludiņu uz patīk pa kreisi , un par kā pareizi , mēs varam tos novietot kā divas kolonnas pretī viena otrai. Mūsu CSS vajadzētu izskatīties šādi:
Sadaļa ( peldēt: pa kreisi; ) malā ( peldēt: pa labi; )
Atsauces nolūkā peldošie elementi ir novietoti gar vecākelementa malu. Ja vecāka nav, peldošais elements tiks novietots gar lapas malu.
Iestatot elementu peldēšanai, mēs to noņemam no parastās HTML dokumenta plūsmas. Tādējādi šī elementa noklusējuma platums kļūst par tā satura platumu. Dažreiz, piemēram, kad mēs veidojam kolonnas atkārtoti lietojamam izkārtojumam, šāda rīcība nav vēlama. To var labot, katrai kolonnai pievienojot platuma rekvizītu ar fiksētu vērtību. Turklāt, lai peldošie elementi nepieskartos viens otram, liekot viena elementa saturam atrasties blakus citam, mēs varam izmantot piemales rekvizītu, lai iestatītu atstarpi starp elementiem.
Tālāk mēs pagarinām iepriekšējo koda bloku, katrai kolonnai pievienojot piemali un platumu, lai labāk veidotu vēlamo rezultātu.
Sadaļa ( pludiņš: pa kreisi; mala: 0 1,5%; platums: 63%; ) malā ( pludiņš: pa labi; mala: 0 1,5%; platums: 30%; )
Izkārtojuma demonstrācija ar pludiņu float var mainīt elementa displeja vērtību Peldošam elementam ir arī svarīgi saprast, ka elements tiek noņemts no parastās lapas plūsmas un elementa noklusējuma displeja vērtība var mainīties. Pludināšanas rekvizīts ir atkarīgs no tā, ka elementa displeja vērtība ir iestatīta uz bloķēšanu, un tā var mainīt elementa noklusējuma displeja vērtību, ja tas vēl nav atveidots kā bloka elements.
Piemēram, elements, kura displejs ir norādīts kā iekļauts , piemēram, iekļauts , ignorē visas augstuma vai platuma īpašības. Tomēr, ja ieliktajam elementam norādāt pludināšanu, displeja vērtība mainīsies uz bloku, un tad elements jau var iegūt augstuma vai platuma rekvizītus.
Kad mēs peldam elementu, mums jābūt uzmanīgiem attiecībā uz to, kā tas ietekmē displeja rekvizīta vērtību.
Divām kolonnām varat iestatīt peldēšanu, vienu kolonnu kā kreiso un otru kā labo, bet vairākām kolonnām mums būs jāmaina pieeja. Pieņemsim, piemēram, mēs vēlamies, lai starp mūsu elementiem būtu trīs kolonnu rinda Un . Ja mēs izmetam savu elementu un izmantojiet trīs elementus , mūsu HTML varētu izskatīties šādi:
Lai sakārtotu šos trīs elementus trīs kolonnu rindā mums visiem elementiem jāiestata pludiņš kā pa kreisi. Mums arī jāpielāgo platums ņemot vērā papildu kolonnas un novietojot tās vienu pie otras.
Sadaļa ( pludiņš: pa kreisi; piemale: 0 1,5%; platums: 30%; )
Šeit ir trīs kolonnas, kurām visām ir vienāds platums un piemales vērtība, un pludiņš ir iestatīts pa kreisi .
Trīs kolonnu izkārtojuma ar pludiņu demonstrācija Satura dzēšana un peldēšana Pludināšanas rekvizīts sākotnēji tika izstrādāts, lai saturs varētu plūst ap attēliem. Attēlam var piešķirt pludiņu, un viss saturs ap šo attēlu dabiski plūst ap to. Lai gan tas ir lieliski piemērots attēliem, pludiņa īpašība nebija īsti paredzēta izmantošanai izkārtojuma un pozicionēšanas nolūkos, un tāpēc tajā ir dažas nepilnības.
Viena no šīm nepilnībām ir tāda, ka dažkārt pareizie stili neparādās elementā, kas atrodas blakus peldošajam elementam vai ir tā pamatelements. Ja elements ir iestatīts uz peldošu, tas tiek noņemts no parastās lapas plūsmas, un tādējādi var tikt negatīvi ietekmēti elementu stili ap šo peldošo elementu.
Bieži vien piemales un polsterējuma īpašību vērtības tiek interpretētas nepareizi, izraisot to saplūšanu peldošajā elementā. Var tikt ietekmētas arī citas īpašības.
Vēl viena kļūda ir tā, ka dažreiz ap peldošo elementu sāk aptīties nevēlams saturs. Elementa noņemšana no dokumenta plūsmas ļauj visiem elementiem ap peldošo elementu to apiet un aizņemt visu pieejamo vietu ap peldošo elementu, kas bieži vien ir nevēlami.
Mūsu iepriekšējo divu kolonnu piemērā pēc tam, kad elementiem pievienojām pludiņu Un , bet pirms platuma rekvizīta iestatīšanas kādam no tiem, elementa saturs atradās starp diviem racionalizētiem elementiem virs tā, aizpildot visu pieejamo vietu. Tāpēc elements būtu telpā starp elementiem
Izkārtojuma demonstrācija bez pludiņa klīringa Lai saturs neaptītos ap peldošajiem elementiem, mums ir jādzēš pludiņš un jāatgriež lapa tās parastajā plūsmā. Mēs apskatīsim, kā notīrīt pludiņus, un pēc tam apskatīsim to saturu.
Klīringa pludiņi Pludiņa dzēšana notiek, izmantojot dzēšanas rekvizītu, kam ir vairākas dažādas vērtības: visbiežāk izmantotās vērtības ir kreisais , labais un abas .
Div (notīrīt: pa kreisi;)
Vērtība pa kreisi notīra kreiso peldošo vērtību, bet vērtība pa labi notīra labo peldošos. Vērtība gan atbrīvos gan kreiso, gan labo pludiņu un bieži vien ir ideālākais variants.
Atgriežoties pie mūsu iepriekšējā piemēra, ja elementā izmantojam skaidru rekvizītu ar abu vērtību , tad varam notīrīt pludiņu. Lai lapa atgrieztos normālā plūsmā, ir svarīgi, lai elementam, kas norādīts pēc peldētajiem elementiem, tiktu lietots Clear.
Kājene ( skaidri: abi; )
Izkārtojuma demonstrācija ar pludiņa klīringu Satura peldēšana Tā vietā, lai notīrītu pludiņu, cita iespēja ir iestatīt saturu peldēšanai. Rezultāts būs gandrīz tāds pats, taču peldošais saturs patiešām nodrošina, ka visi mūsu stili tiks parādīti pareizi.
Lai iestatītu peldošo saturu, peldētajiem elementiem ir jāatrodas vecākelementa iekšpusē, tas darbosies kā konteiners, atstājot ārpus tā dokumenta plūsmu pilnīgi normālu. Šī vecākelementa stilu attēlo grupas klase, kā parādīts šeit:
Group::before, .group::after ( saturs: ""; displejs: tabula; ) .group::after ( notīrīt: abi; ) .group ( notīrīt: abi; *tālināt: 1; )
Šeit nekas daudz nenotiek, taču būtībā viss, ko CSS dara, ir notīrīt visus peldošos elementus grupas elementā un atgriezt dokumentu normālā plūsmā.
Konkrētāk, pseidoelementi ::before un ::after, kā aprakstīts 4. nodarbībā, dinamiski ģenerē elementus virs un zem elementa ar klases grupu . Šie elementi neietver nekādu saturu un tiek renderēti kā tabulas elementi, līdzīgi kā bloka elementi. Dinamiski ģenerēts elements pēc grupas elementa notīra pludiņu grupas elementā, tāpat kā Clear to darīja iepriekš. Visbeidzot, grupas elements notīra arī visus peldošos elementus, kas var parādīties pirms tā, ja ir pludiņš ar vērtību pa kreisi vai pa labi . Iekļauts arī neliels triks, kas liek vecākām pārlūkprogrammām labi darboties.
Šeit ir vairāk koda nekā tikai skaidrs: abi komandas, taču tas var būt diezgan noderīgs.
Ņemot vērā mūsu divu kolonnu lapu izkārtojumu, mēs varētu ietīt Un vecāku elements. Šajā vecākelementā būs peldošie elementi. Kods izskatīsies šādi:
Group::before, .group::after ( saturs: ""; displejs: tabula; ) .group::after ( notīrīt: abi; ) .group ( notīrīt: abi; *tuvināt: 1; ) sadaļa ( peldēt: pa kreisi ; piemale: 0 1,5%; platums: 63%; ) malā (pludiņš: pa labi; piemale: 0 1,5%; platums: 30%; )
Izkārtojuma ar peldošo saturu demonstrēšana Šeit parādītais paņēmiens ir pazīstams kā "clearfix", un tas bieži ir redzams citās vietnēs ar klases nosaukumu clearfix vai sk. Mēs izvēlējāmies izmantot klases nosaukumu grupu, jo tā attēlo elementu grupu un labāk izsaka saturu.
Ja elementi ir iestatīti peldēšanai, ir svarīgi pārraudzīt, kā tie ietekmē lapas plūsmu, un nodrošināt, lai lapas plūsma tiktu atiestatīta, veicot notīrīšanu vai izmantojot peldošo saturu, kā paredzēts. Pretējā gadījumā pludiņu uzskaite var radīt daudz galvassāpes, īpaši lapās, kurās ir vairākas rindas, katrā no kurām ir vairākas kolonnas.
Par praksi Atgriezīsimies Styles Conference vietnē un izmēģināsim kādam saturam pievienot pludiņus.
Vispirms pirms pludināšanas izmantošanas jebkuram elementam nodrošināsim saturu šiem peldošajiem elementiem, pievienojot mūsu CSS skaidrības labojumu. Main.css failā, tieši zem mūsu režģa stiliem, mēs pievienosim clearfix zem grupas klases nosaukuma, tāpat kā iepriekš. /* ================================================= ====== Clearfix ======= ==================================== * / .group::before, .group::after ( saturs: " "; displejs: tabula; ) .group::after ( notīrīt: abi; ) .group ( notīrīt: abi; *tālināt: 1; ) Tagad, kad mēs varam izmantot pludiņu, definēsim to galvenajam
iekšējais elements kā pa kreisi un ļaujiet pārējam galvenes saturam plūst pa labi.Lai to izdarītu, elementam pievienojiet logotipa klasi
. Pēc tam mūsu CSS mēs pievienosim jaunu stila sadaļu galvenajai galvenei. Šajā sadaļā mēs atlasīsim elementu ar logotipa klasi un iestatiet pludiņu pa kreisi .
/* ======================================= Galvenā virsraksts ====== = =================================== */ .logo ( peldēt: pa kreisi; )Kamēr esam šeit, pievienosim mūsu logotipam nedaudz sīkāku informāciju. Sāksim ar elementa ievietošanu
CSS mēs pievienosim apmali gar mūsu logotipa augšdaļu un vertikālu polsterējumu, lai logotips varētu brīvi “elpot”.
Logotips (apmale augšpusē: 4 pikseļi ciets #648880; polsterējums: 40 pikseļi 0 22 pikseļi 0; pludiņš: pa kreisi; )
Kopš izgatavojām elementu
racionalizēts, mēs vēlamies iestatīt saturu peldošu . Tiešais vecāks par ir elements tāpēc mēs tai pievienosim grupas klasi. Tādējādi tiks lietoti iepriekš iestatītie clearfix stili.
Elements iegūst formu, tāpēc apskatīsim elementu . Līdzīgi tam, ko mēs darījām , mēs iestatīsim peldošu mūsu autortiesības kā atstātas iekšā un ļaujiet visiem pārējiem elementiem plūst ap to pa labi.
Atšķirībā no elementa tomēr mēs neizmantosim klasi tieši peldošajam elementam. Šoreiz mēs pievienosim klasi peldošā elementa vecākelementam un izmantosim unikālu CSS atlasītāju, lai atlasītu elementu un pēc tam piešķirtu tam peldošo vērtību .
Sāksim, pievienojot elementam primārās kājenes klasi . Jo mēs zinām, ka iekšā mums būs racionalizēti elementi , tad mums jāpievieno grupas klase, kamēr mēs to darām.
Tagad elementam ir iestatīta primārā kājenes klase , mēs varam izmantot šo klasi, lai īpaši atlasītu elementu Ar izmantojot CSS . Mēs vēlamies dot tai pludiņu kā pa kreisi. Neaizmirstiet mūsu main.css failā izveidot jaunu sadaļu galvenajam kājenes stilam.
/* ======================================== Galvenais pagrabs ====== ==================================== */ .primary-footer small ( pludiņš: pa kreisi; ) Lai pārbaudītu - šeit mēs atlasām elementu , kam jāatrodas elementā ar klases atribūta vērtību primārā kājene, piemēram, mūsu elementā
Visbeidzot elementa augšdaļai un apakšai pievienosim nelielu polsterējumu. , tas palīdzēs to nedaudz atdalīt no pārējās lapas. Mēs to varam izdarīt tieši, izmantojot primārās kājenes klasi.
Galvenā kājene (polsterējums apakšā: 44 pikseļi; polsterējums augšpusē: 44 pikseļi; )
Ņemot vērā visas šīs izmaiņas elementos Un , mums tie noteikti jāiekļauj katrā lapā, nevis tikai lapā index.html.
Rīsi. 5.01. Vairāku pludiņa elementu izmantošana Un Styles Conference galvenajā lapā strādājiet kopā
Pozicionēšana, izmantojot inline-bloku Papildus pludiņa izmantošanai vēl viens veids, kā varam pozicionēt saturu, ir displeja rekvizīta izmantošana kopā ar iekļautā bloka vērtību. Inline-block metode, kā mēs to apspriedīsim vēlāk, galvenokārt ir noderīga lapu izkārtošanai vai elementu novietošanai rindā blakus.
Atcerieties, ka displeja rekvizīta iekļautā bloka vērtība parāda elementus rindā un ļauj tiem pārņemt visas lodziņa modeļa īpašības, tostarp augstumu , platumu , polsterējumu , apmali un piemale . Inline-block izmantošana ļauj pilnībā izmantot bloka modeļa priekšrocības, neuztraucoties par jebkādu pludiņu notīrīšanu.
inline-bloks praksē Apskatīsim mūsu trīs kolonnu piemēru no sākuma. Mēs sāksim ar mūsu HTML saglabāšanu šādi:
Tagad tā vietā, lai peldētu mūsu trīs elementiem mēs mainīsim to displeja vērtību uz inline-block , atstājot piemales īpašības un platums ir tāds pats kā iepriekš. Rezultātā mūsu CSS izskatīsies šādi:
Sadaļa ( displejs: iekļauts bloks; piemale: 0 1,5%; platums: 30%; )
Diemžēl ar šo kodu vien nepietiek, lai veiktu triku un pēdējo elementu tiek pārbīdīts uz jaunu rindu. Atcerieties, tā kā iekļautie bloku elementi parādās rindā viens otram, tie ietver vienu atstarpi starp tiem. Ja katras atsevišķās atstarpes lielums tiek pievienots visu rindas elementu platumam un horizontālās piemales vērtībai, kopējais platums kļūst pārāk liels, izspiežot pēdējo elementu. uz jaunu līniju. Lai parādītu visus vienumus vienā rindā noņemiet atstarpi starp tām
Inline-block elementu demonstrēšana ar atstarpi Atstarpes noņemšana starp inline bloka elementiem Ir vairākas metodes, kā noņemt atstarpi starp iekļautajiem bloka elementiem, un dažas no tām ir sarežģītākas nekā citas. Mēs koncentrēsimies uz diviem visvairāk vienkāršas metodes , no kuriem katrs notiek HTML.
Pirmais risinājums ir ievietot katru jaunu sākuma elementa tagu tajā pašā rindā kā iepriekšējā elementa beigu tags . Tā vietā, lai izmantotu jauna līnija katram elementam mēs galu galā sākam elementus vienā rindā. Mūsu HTML varētu izskatīties šādi:
Šādā veidā ierakstot iekļautos bloka elementus, tiek nodrošināts, ka HTML kodā starp šādiem elementiem nav atstarpes. Tāpēc atstarpe neparādīsies, kad lapa tiek parādīta.
Iekļauto bloku elementu demonstrēšana bez atstarpēm Vēl viena metode, kā noņemt atstarpi starp iekļautajiem bloku elementiem, ir atvērt HTML komentāru tūlīt pēc elementa aizvēršanas taga. Pēc tam aizveriet komentāru tieši pirms nākamā elementa sākuma taga. Tas ļauj iekļautajiem blokiem elementiem sākt un beigties atsevišķās HTML rindiņās un "komentēt" jebkuru iespējamo atstarpi starp elementiem. Iegūtais kods izskatīsies šādi:
Neviena no šīm iespējām nav ideāla, taču tās ir noderīgas. Man ir tendence labākai organizācijai izmantot komentārus, taču tas, kuru iespēju izvēlēties, ir pilnībā atkarīgs no jums.
Izveidojiet atkārtoti lietojamus izkārtojumus Veidojot vietni, vienmēr vislabāk ir rakstīt modulārus stilus, kurus var atkārtoti izmantot citur, un atkārtoti lietojamie izkārtojumi ir atkārtoti lietojamā koda saraksta augšgalā. Izkārtojumus var izveidot, izmantojot pludiņus vai inline-block elementus, bet kas darbojas vislabāk un kāpēc?
Jautājums par to, vai pludinātie vai iekļautie bloku elementi ir labāki lapas struktūrai, ir diskutējams. Mana pieeja ir izmantot iekļautos bloku elementus, lai izveidotu režģi vai lapas izkārtojumu, un pēc tam izmantot pludinātāju, kad vēlos, lai saturs plūst ap elementu (tas ir tas, kam pludiņi tika paredzēti, strādājot ar attēliem). Kopumā man arī šķiet vieglāk strādāt ar inline-block elementiem.
Tomēr izmantojiet to, kas jums ir vislabākais. Ja jums ir labāk pazīstama viena pieeja nekā cita, izmantojiet to.
Tiek izstrādātas jaunas CSS specifikācijas — īpaši elastības un režģa rekvizīti —, kas palīdzēs jums izlemt, kā vislabāk izkārtot lapas. Sekojiet līdzi šīm metodēm, kad tās sāk parādīties.
Par praksi Stingri izprotot atkārtoti lietojamus izkārtojumus, ir pienācis laiks to ieviest mūsu Styles Conference vietnē.
Styles Conference vietnei mēs izveidosim trīs kolonnu izkārtojumu, izmantojot inline-block elementus. Mēs to darīsim tā, lai iegūtu trīs tāda paša platuma kolonnas vai divas kolonnas, kuru kopējais platums ir sadalīts 2/3 vienai un 1/3 otrai.
Pirmkārt, mēs izveidosim klases, kas nosaka šo kolonnu platumu. Mēs sauksim šīs divas klases par 1. kolonu — par vienu trešdaļu un par 2. kolonu — par divām trešdaļām. Mūsu main.css faila sadaļā Grid virzīsimies uz priekšu un definēsim šīs klases un to atbilstošos platumus.
Col-1-3 (platums: 33,33%; ) .col-2-3 (platums: 66,66%; )
Mēs vēlamies, lai abas kolonnas tiktu rādītas kā iekļauti bloka elementi. Mums arī jāpārliecinās, ka to vertikālais līdzinājums ir iestatīts katras kolonnas augšdaļā.
Izveidosim divus jaunus atlasītājus, kas koplieto displeju un vertikālo līdzināšanu .
Col-1-3, .col-2-3 (displejs: iekļauts bloks; vertikāls līdzinājums: augšpusē; )
Apskatiet CSS vēlreiz. Mēs izveidojām divus klases atlasītājus col-1-3 un col-2-3, kas atdalīti ar komatu. Komats pirmā atlasītāja beigās nozīmē, ka tam seko cits atlasītājs. Pēc otrā atlasītāja ir atvēršanas cirtaini skava, kas norāda, ka sākas stila apraksts. Izmantojot komatu, lai atdalītu atlasītājus, mēs varam saistīt vienu stilu vairākiem atlasītājiem vienlaikus.
Mēs vēlamies atstāt atstarpi starp kolonnām, lai palīdzētu sadalīt saturu. To var izdarīt, katrai kolonnai pievienojot horizontālu polsterējumu.
Tas darbojas labi, taču, ja divas kolonnas ir novietotas blakus, atstarpes platums starp tām būs divreiz plašāks nekā atstarpe no ārējās malas. Lai to līdzsvarotu, visas kolonnas ievietosim režģī un pievienosim tam to pašu polsterējumu.
Izmantosim režģa klasi, lai definētu savu režģi, un pēc tam piešķirsim to pašu horizontālo polsterējumu režģim, col-1-3 un col-2-3 klasēm. Atdalot atlasītājus ar komatiem, mūsu CSS izskatās šādi:
Režģis, .col-1-3, .col-2-3 (polsterējums-pa kreisi: 15px; polsterējums-labais: 15px; )
Iestatot horizontālo polsterējumu, mums jābūt uzmanīgiem. Atcerieties, ka pēdējā nodarbībā mēs izveidojām konteineru ar konteinera klasi, lai centrētu visu mūsu saturu lapā ar platumu 960 pikseļi. IN Šis brīdis , ja elementu ar režģa klasi ievietotu elementā ar konteinera klasi, to horizontālais polsterējums saskaitītos un mūsu kolonnas netiktu rādītas proporcionāli pārējās lapas platumam.
Mēs to darīsim, sadalot veco konteineru kārtulu kopu šādi:
Konteiners, .režģis ( piemale: 0 automātiski; platums: 960 pikseļi; ) .konteiners ( polsterējums pa kreisi: 30 pikseļi; polsterējums pa labi: 30 pikseļi; )
Tagad jebkurš elements ar konteinera vai režģa klasi būs 960 pikseļu plats un atrodas lapas centrā. Turklāt esam saglabājuši esošo horizontālo polsterējumu jebkuram elementam ar konteinera klasi, pārvietojot to uz jaunu, atsevišķu kārtulu kopu.
Labi, visa sieta iestatīšanas grūtā daļa ir pabeigta. Tagad ir pienācis laiks strādāt ar mūsu HTML un redzēt, kā šīs nodarbības darbojas.
Sāksim ar īseriem sākumlapā, failā index.html, kas līdzināti trīs kolonnās. Pašlaik tīzeri ir ietīti elementā ar konteineru klasi. Mēs vēlamies mainīt konteinera klasi uz režģi, lai mēs varētu sākt ievietot kolonnas iekšā.
...
...
...
...
Un visbeidzot, tā kā katra no mūsu kolonnām ir iekļauts bloka elements, mums ir jāpārliecinās, ka starp tām tiek noņemtas visas atstarpes. Lai to izdarītu, mēs izmantosim komentārus un katrai sadaļai pievienosim kādu dokumentāciju, lai labāk sakārtotu mūsu kodu.
...
...
...
Lai pārbaudītu, mēs atstājām komentāru 3. rindiņā, norādot sadaļu “Skaļruņi”, kas tai seko. 7. rindiņas beigās mēs atveram komentāru uzreiz aiz beigu taga. Šajā komentārā 9. rindā mēs definējam šādu sadaļu "Grafiks". Pēc tam aizveriet komentāru 11. rindiņas sākumā tieši pirms sākuma taga . Līdzīga komentāru struktūra parādās 13. līdz 17. rindā starp abiem elementiem , tieši pirms sadaļas Norises vieta. Kopumā mēs komentējām jebkuru iespējamo atstarpi starp kolonnām, vienlaikus izmantojot tos pašus komentārus, lai identificētu mūsu sadaļas.
Tagad mums ir atkārtoti lietojams trīs kolonnu režģis, kas atbalsta dažādus izkārtojumus, izmantojot 1/3 un 2/3 kolonnu platuma. Mūsu mājaslapā tagad ir trīs kolonnas, kas atdala visas tīzes.
Rīsi. 5.02. Mājas lapa Stila konferencē tagad ir iekļauts trīs kolonnu izkārtojums
Demonstrācija un pirmkods Zemāk varat apskatīt Styles Conference vietni tās pašreizējā stāvoklī un arī lejupielādēt avots vietne šobrīd.
Unikāla elementu pozicionēšana Agri vai vēlu visi vēlēsies precīzi pozicionēt elementu, taču peldošie vai inline-block elementi šādu triku nepieļauj. Peldošie elementi, kas noņem elementu no lapas plūsmas, bieži rada nevēlamus rezultātus, jo apkārtējie elementi apvij peldošo elementu. Iekļautie bloku elementi, ja vien mēs neveidojam kolonnas, var būt diezgan sarežģīti, kad runa ir par pareizu pozicionēšanu. Šādās situācijās pozīcijas rekvizītu varam izmantot kopā ar bloka nobīdes īpašībām.
Pozīcijas rekvizīts nosaka, kā elements tiek novietots lapā un vai tas tiks parādīts parastajā dokumenta plūsmā. To lieto kopā ar bloka nobīdes īpašībām augšā , pa labi , apakšā un pa kreisi , kas nosaka, kur tieši elements tiks novietots, pārvietojot elementu dažādos virzienos.
Pēc noklusējuma katra elementa pozīcijas vērtība ir iestatīta uz static , kas nozīmē, ka elements pastāv parastajā dokumenta plūsmā un neizmanto rekvizītus, lai to novietotu. Vērtību statiskā visbiežāk pārraksta relatīvā vai absolūtā vērtība , ko aplūkosim tālāk.
Relatīvā pozicionēšana Pozīcijas rekvizīta iestatīšana uz relatīvu ļauj elementiem parādīties parastajā lapas plūsmā, rezervējot vietu elementam, kā paredzēts, un neļaujot citiem elementiem plūst ap to. Tomēr tas arī ļauj mainīt elementa pozīciju, izmantojot nobīdes īpašības. Piemēram, apsveriet šādu HTML un CSS:
...
...
...
Div ( augstums: 100 pikseļi; platums: 100 pikseļi; ) .offset ( pa kreisi: 20 pikseļi; pozīcija: relatīvs; augšā: 20 pikseļi; )
Relatīvās pozicionēšanas demonstrācija Šeit par otro elementu
ar nobīdes klasi pozīcijas vērtība ir iestatīta uz relatīvu, kā arī divas nobīdes īpašības - pa kreisi un augšā. Tādējādi tiek saglabāta elementa sākotnējā pozīcija, un citiem elementiem nav atļauts pārvietoties šajā apgabalā. Turklāt nobīdes rekvizīti pārvieto elementu, nospiežot to 20 pikseļus no kreisās puses un 20 pikseļus no sākotnējās atrašanās vietas augšdaļas.
Relatīvi novietotiem elementiem ir svarīgi zināt, ka bloka nobīdes īpašības nosaka, kur elements tiks pārvietots, ņemot vērā tā sākotnējo pozīciju. Tātad kreisais īpašums ar vērtību 20 pikseļi faktiski nospiež elementu uz labo 20 pikseļiem. Augšējais rekvizīts, kura vērtība ir 20 pikseļi, nospiedīs elementu uz leju par 20 pikseļiem.
Kad mēs novietojam elementu, izmantojot nobīdes rekvizītus, elements pārklājas ar zem tā esošo elementu, nevis nospiež to uz leju, kā to dara piemales vai polsterējuma rekvizīti.
Absolūta pozicionēšana Pozīcijas rekvizīta absolūtā vērtība atšķiras no relatīvās vērtības ar to, ka absolūti pozicionētais elements neparādās normālā dokumenta plūsmā, un absolūti pozicionētā elementa sākotnējā telpa un pozīcija netiek rezervēta.
Turklāt absolūti pozicionētie elementi pārvietojas attiecībā pret to tuvāko relatīvi novietoto pamatelementu. Ja relatīvi pozicionēts vecāks nepastāv, tad absolūti pozicionētais elements tiks novietots attiecībā pret elementu
. Šī ir neliela informācija; Apskatīsim, kā tas darbojas kaut kādā kodā:
Sadaļa ( pozīcija: relatīva; ) div ( pozīcija: absolūta; pa labi: 20 pikseļi; augšā: 20 pikseļi; )
Absolūtās pozicionēšanas demonstrācija Šajā piemērā elements ir novietots attiecībā pret, bet neietver nekādas nobīdes īpašības. Tāpēc tā pozīcija nemainās. Elements ar nobīdi klase ietver pozīcijas vērtību kā absolūtu . Kopš elementa
ir vistuvāk relatīvi novietotais vecāku elements , tad elements
tiks novietots attiecībā pret elementu
.Relatīvi novietotiem elementiem nobīdes īpašības nosaka, kādā virzienā elements tiks pārvietots attiecībā pret sevi. Absolūti novietotiem elementiem nobīdes īpašības nosaka, kādā virzienā elements tiks pārvietots attiecībā pret tā tuvāko relatīvo pozicionēto vecāku.
Labo un augšējo īpašību rezultātā elements
parādīsies 20 pikseļi no labās puses un 20 pikseļi no augšas iekšpusē
.Kopš elementa
novietots absolūti, tas nav novietots parastajā lapas plūsmā un pārklāsies ar visiem apkārtējiem elementiem. Turklāt sākuma pozīcija
netiek saglabāts, un šajā vietā var būt citi elementi. Parasti lielākā daļa pozicionēšanas var notikt, neizmantojot pozīcijas rekvizītus un nobīdes rekvizītus, taču dažos gadījumos tie var būt ļoti noderīgi.
Kopsavilkums Mācīšanās pozicionēt saturu HTML un CSS ir milzīgs solis ceļā uz šo valodu apguvi. Pievienojiet tam bloka modeli, un mēs esam labā ceļā, lai kļūtu par priekšgala izstrādātājiem.
Šis pamācības raksts būs veltīts ļoti svarīgai tēmai, kas saistīta ar elementu izvietojumu lapā un prasīs no jums maksimālu uzmanību. Jūs iepazīsities ar šādiem elementu pozicionēšanas veidiem: absolūts , radinieks , fiksēts Un statisks .
Pozicionēšana ļaus novietot šo vai citu elementu vajadzīgajā vietā, šī raksta mērķis ir saprast, pēc kādiem noteikumiem tas notiek, kādi CSS rekvizīti ir jāizmanto un kāpēc.
Elementu pozicionēšanas veidi
Pamati CSS īpašums Tas, kas ļauj kontrolēt elementu novietojumu lapā, ir pozīcijas rekvizīts, kas norāda pārlūkprogrammai, kāda veida pozicionēšana tiek izmantota elementam ( statisks - statisks radinieks - radinieks, absolūts – absolūts , vai fiksēts - fiksēts).
Lai pilnībā saprastu, kā elementi tiek novietoti jebkurā lapā, jums ir detalizēti jāizpēta visi pozicionēšanas veidi. Šis apmācības raksts sniegs jums šādu iespēju; tagad mēs atsevišķi runāsim par katru pozicionēšanas veidu un analizēsim, kā un attiecībā pret ko notiek elementu pārvietošana dokumentā.
Absolūta pozicionēšana
Kā jūs pamanījāt, elementi, kuriem ir absolūtā pozicionēšana , atdalīta no galvenās lapas plūsmas , kas var novest pie elementu slāņošanās viens virs otra. Vēl viena nianse strādājot ar elementiem, kuriem ir absolūtā pozicionēšana , tādi viņi ir nevar būt peldošs . Peldošie elementi var būt tikai tādi elementi, kuriem ir statiskā pozicionēšana (statisks), tas ir, tas, kas elementam ir iestatīts pēc noklusējuma. Mēs apspriedām metodes, kā strādāt ar peldošiem elementiem mācību grāmatas rakstā "".
Relatīvā pozicionēšana
Nākamais pozicionēšanas veids, ko mēs aplūkosim, ir relatīvā pozicionēšana (pozīcija: relatīvais) tiek pārvietoti (novietoti), vai citiem vārdiem sakot.
Pāriesim tieši pie piemēra un tad runāsim par visām niansēm, kas radīsies, strādājot ar
</span> Elementu relatīvā pozicionēšana
statisks
klase = "radinieks" > radinieks
klase = "statisks" > statisks
Tātad, ko mēs darījām šajā piemērā:
Blokiem (elementiem ), kuriem ir
statiskā pozicionēšana (noklusējums) iestatiet augstumu uz 50 pikseļiem un fona krāsu uz -
sarkans .
Mēs ievietojām elementu ar relatīvā pozicionēšana (pozīcija : relatīvs ), iestatiet tā augstumu uz 100 pikseļiem un fona krāsu zaļš . Turklāt tika norādīts, ka viņš pārvietojas attiecībā pret pašreizējo pozīciju no augšējās malas par 50 pikseļiem un no kreisās malas par 100 pikseļiem, izraisot dokumenta pārplūdi.
Mūsu piemēra rezultāts:
Tāpat no šī piemēra jāuzsver, ka atšķirībā no absolūtā pozicionēšana citi dokumenta elementi reaģē uz elementiem ar relatīvā pozicionēšana . Neskatoties uz to, ka pārlūkprogrammai devām komandu pārvietot elementu, pārlūkprogramma rezervēja vietu elementam, atstājot tukšu vietu, kur elementam sākotnēji vajadzētu būt pirms pārvietošanas.
Praksē jums, visticamāk, nevajadzēs pārvietot elementus, kuriem ir relatīvā pozicionēšana . galvenā doma relatīvā pozicionēšana nav kaut kur pārvietot elementu, bet gan izveidot "konteineru" elementam, kuram ir absolūtā pozicionēšana
. Citiem vārdiem sakot, ligzdotie elementi netiks nobīdīti attiecībā pret pārlūkprogrammas loga malu, bet gan attiecībā pret šo elementu, kuram būs relatīvā pozicionēšana un atrodas galvenajā dokumenta pavedienā . Mēs šo jautājumu sīkāk apsvērsim vēlāk šajā apmācības rakstā.
Fiksēta pozicionēšana
Trešais pozicionēšanas veids, ko mēs aplūkosim, ir fiksēta pozicionēšana elements kustas attiecībā pret noteiktu pārlūkprogrammas loga malu . Atšķirīga iezīme Šī pozicionēšana ir tāda, ka ritinot lapu elements paliek vienā vietā , tas ir, rupji sakot, tas ritina kopā ar lapu (elements ir fiksēts).
Domāju, ka, ceļojot pa internetu, nereti ir nācies saskarties ar vienuviet fiksētām navigācijas izvēlnēm, sānjoslām vai pat “lapas augšdaļas” pogām. Tas viss kļūst iespējams, pateicoties fiksēta pozicionēšana .
Apskatīsim piemēru, kurā mēs noformēsim fiksētu sānjoslu.
</span> Fiksēta elementu pozicionēšana
fiksēts
klase = "konteiners" >
Apskatīsim, ko mēs darījām šajā piemērā:
Komplekts elementiem Un augstums ir vienāds ar 100%, tas ļaus mums iestatīt sānjoslas augstumu procentos. Turklāt mēs esam noņēmuši šo elementu piemales, tas ir nepieciešams, lai noņemtu pārlūkprogrammas iebūvētos stilus.
Mūsu sānjoslai iestatiet vecāku elementa augstumu (100%), iestatiet platumu uz 15% no vecākelementa un iestatiet fona krāsu. sarkans . Tāpat norādīja, ka mūsu sānjoslā ir fiksēta pozicionēšana , kas ļauj tai šķist pielipt pie ekrāna. Lai mūsu panelis parādītos labajā pusē, mēs iestatām pareizo vērtību uz 0 (novietotā elementa nobīde no pārlūkprogrammas loga labās malas).
Demonstrēšanai fiksēta pozicionēšana mēs izveidojām konteineru ar 2000 pikseļu augstumu. Tagad, ja mēs ritināsim lapu, mūsu sānjosla paliks vietā, bet konteinera saturs (galvenais saturs) tiks ritināts.
Mūsu piemēra rezultāts:
Statiskā pozicionēšana
Nu, pēdējais pozicionēšanas veids ir statiskā pozicionēšana (statiska), jūs un es jau esam par to runājuši vairākas reizes. Statiskā pozicionēšana tas ir klasisks straumē HTML dokuments
Vēlos vērst jūsu uzmanību uz vienu faktu, ka iepriekš aplūkotās īpašības, kas ir atbildīgas par elementu pārvietošanos, nevar attiecināt uz elementiem, kuriem ir statiskā pozicionēšana , tas ir, tiem ir pozicionēšana, kas ir iestatīta pēc noklusējuma.
Uzlabota absolūtā pozicionēšana
Pirms pāriet uz uzlabotajām lietojumprogrammām absolūtā pozicionēšana , vēlos vērst jūsu uzmanību uz to, ka, ja jūs nenorādiet elementa vertikālās pozīcijas vērtība ar absolūtā pozicionēšana (augšpusē vai apakšā) vai otrādi horizontālā stāvoklī (pa kreisi vai pa labi), pēc tam pārlūkprogramma atstās elementu tajā pašā vietā lapā, kur tas atrodas vispārējā plūsmā (tiks ievietots satura augšpusē, ja tāds būs).
Mēs jau esam iemācījušies, ka elements ar absolūtā pozicionēšana (pozīcija : absolūta ) pozicionēta attiecībā pret tā priekšteča doto malu , un priekštecim ir jābūt vērtības pozīcijai atšķiras no noklusējuma - statisks citādi tiks veikta skaitīšana (pārvietošana). attiecībā pret norādīto pārlūkprogrammas loga malu . Ir pienācis laiks aplūkot šādu piemēru:
</span> Absolūtā pozicionēšana attiecībā pret priekšteci
radinieks
klase = "konteiners" > konteiners
klase = "absolūts" > absolūts
Sīkāk apskatīsim, ko mēs darījām šajā piemērā:
Sākumā mēs ievietojām bloku (elements ), kam ir
relatīvā pozicionēšana . Mēs tam norādījām iekšējo piemale no augšas (margin-top), kas vienāda ar 100 pikseļiem, iestatījām fona platumu, augstumu un krāsu.
Pēc tam tajā tika ievietots bloka elements (elements ), kura augstums ir 100 pikseļi un fona krāsa
dzeltens . Kā jūs saprotat, šim elementam ir
statiskā pozicionēšana (noklusējuma vērtība) kopš pozīcijas rekvizīta vērtības
nav iedzimts , un tas nav mantots no vecākbloka
relatīvā pozicionēšana .
Tad mēs ievietojām savā konteinerā ar statiskā pozicionēšana elements, kam ir absolūtā pozicionēšana . Iestatiet tā platumu un augstumu uz 50 pikseļiem un fona krāsu sarkans . Lūdzu, ņemiet vērā, ka vissvarīgākais ir tas, ka šis elements nav novietots attiecībā pret pārlūkprogrammas logu, nevis attiecībā pret vecāku elementu, bet gan attiecībā pret tā priekšteci, kura pozicionēšana nav statiska! Rezultātā mēs ievietojām savu elementu tā priekšteča augšējā labajā stūrī ar relatīvā pozicionēšana .
Mūsu piemēra rezultāts:
Apkoposim to, ko uzzinājām šajā mācību rakstā par elementu pozicionēšanu:
Statiskā pozicionēšana tas ir klasisks elementu izvietošana no augšas uz leju (preces tiek parādītas tādā secībā, kādā tās ir uzskaitītas HTML dokumentu straumē ), tā tiek uzskatīta par noklusējuma vērtību visiem elementiem.Elements ir novietots attiecībā pret pārlūkprogrammas logu ja viņam ir fiksēta pozicionēšana (elements ir fiksēts, ritinot dokumentu).
Elements ir novietots attiecībā pret pārlūkprogrammas logu ja viņam ir absolūtā pozicionēšana , un viņš nav ligzdots elementā, kuram ir cita pozicionēšana, nevis statisks
.
Elements, kuram tas ir iestatīts relatīvā pozicionēšana maiņas attiecībā pret pozīciju dokumentu plūsmā (attiecībā pret viņa pašreizējo stāvokli ).
Elements ir novietots attiecībā pret cita elementa malām gadījumā, ja viņš ir sencis vai vecāks ar absolūts , radinieks vai fiksēts pozicionēšana .
Jautājumi un uzdevumi par tēmu
Pirms pāriet pie nākamās tēmas, izpildiet prakses uzdevumu:
2016-2019 Deniss Boļšakovs, komentārus un ieteikumus par vietni varat sūtīt uz [email protected]
Kā izlīdzināt attēlu pa labi
Gara rindkopa ar vairākiem teikumiem. Tajā ir teksts, kas apraksta atzīmēto īpašumu, un attēls, kas jāpiespiež pie labās puses malas.
Tas izņem elementu no plūsmas un nospiež to uz vecāku kreisās vai labās puses malu. Elementi un teksts, kas atrodas kodā pēc peldošā elementa, plūst ap to pretējā pusē.
Nav iedzimts, attiecas uz visiem elementiem. izņem elementu no plūsmas un novieto to virs pārējā satura. To var pārvietot attiecībā pret tās vecākvērtības robežām, kuras pozīcijas vērtība nav statiska , izmantojot rekvizītus augšā , pa labi , apakšā , pa kreisi . Kad virziens: ltr; kreisais rekvizīts ir prioritārs pār labo rekvizītu, ja vien kreisais rekvizīts nav iestatīts uz auto .
Gara rindkopa ar vairākiem teikumiem.
Tajā ir teksts, kas apraksta atzīmēto īpašumu, un attēls, kas jāpiespiež pie labās puses malas.
Īpašums
teksta līdzināšana iedzimta, piemērota bloku elementiem.
Izlīdzina visus ietvertos elementus un tekstu horizontāli. Tas nepārvieto pašu elementu vai blokus, un nedarbojas, ja tiek piešķirts iekļautam elementam. Tam ir vairākas nozīmes, tostarp
pa labi, ļaujot pārvietot saturu pa labi.
Īpašums
piemale-kreisais nav iedzimta, attiecas uz visiem elementiem.
Tam ir nozīme
auto, kas izlīdzina bloka elementu horizontāli. Proti
piemale-kreisais: auto; nospiež elementu uz vecāku labo malu. Īpašums var mainīt šo pozīciju
mala-labais..html">Kad
piemale-kreisais: auto; Un
mala-labā: auto; elements ir novietots centrā uz senča platumu.
Īpašums
peldēt nav iedzimta, attiecas uz visiem elementiem.
Tas izņem elementu no plūsmas un nospiež to uz vecāku kreisās vai labās puses malu. Elementi un teksts, kas atrodas kodā pēc peldošā elementa, plūst ap to pretējā pusē.
Īpašums
pozīciju nav iedzimta, attiecas uz visiem elementiem.
pozīcija: absolūta; izņem elementu no plūsmas un novieto to virs pārējā satura. To var pārvietot attiecībā pret tā vecāka robežām, kuras vērtība ir
pozīciju atšķirīgs no
statisks, izmantojot īpašības
tops,
pa labi,
apakšā,
pa kreisi. Plkst
virziens: ltr;īpašums
pa kreisi ir prioritāte pār īpašumu
pa labi, izņemot gadījumus, kad īpašums
pa kreisi ir nozīme
auto.
Īpašums displejs nav mantota, attiecas uz visiem elementiem..html">tag tabula, A galda šūna — td.
Padoms: ieslēgts
šajā piemērā Ir interesanti redzēt, kā attēls darbojas, kad pārlūkprogrammas loga izmērs ir samazināts.
Kā līdzināt tekstu pa labi
Īss teksts labajā pusē
Īss teksts labajā pusē
Saistītie materiāli:
horizontālais html līdzinājums atjaunināts html pamatojumu vēlaties atjaunināt
Kā izlīdzināt bloku pa labi
Elements neietekmē vecākelementa augstumu vai platumu, kā arī neizraisa tā pārplūdi.
Elements neietekmē pamatelementa augstumu, ja vien pludiņš nav notīrīts.
Kā izlīdzināt vairākus blokus pa labi
starpība: 0 100% 0 -100%;
/* nav jāpievieno cits iesaiņojums, bet iepriekšējā stilā norādiet transformāciju: translate(-100%, 0); */ fons: zaļš; )
CSS HTML dokumenta izkārtojumu uzskata par elementu koku. Tiek izsaukts unikāls elements, kuram nav vecāku elementa sakne elements. CSS pozicionēšanas modulis apraksta, kā jebkuru no elementiem var novietot neatkarīgi no dokumenta secības (t.i., izņemt no "plūsmas").
Programmā CSS2 katrs dokumentu koka elements ģenerē nulli vai vairāk lodziņu, ievērojot lodziņa modeli. CSS3 modulis papildina un paplašina pozicionēšanas shēmu. Šo bloku atrašanās vieta tiek regulēta:
elementa izmērs un veids,
pozicionēšanas shēma (normāla plūsma, plūsma un absolūtā pozicionēšana),
attiecības starp elementiem dokumentu kokā,
ārējā informācija (piemēram, skata loga izmērs, iekšējā attēla izmēri utt.).
Pozicionēšanas shēmas
CSS elementa bloku var novietot pēc trim pozicionēšanas shēmām:
1. Normāla plūsma
Normālā plūsmā ietilpst bloka formatēšanas konteksts (elementi ar displeja bloku , saraksta vienumu vai tabulu ), iekļautā formatēšanas konteksts (elementi ar displeja iekļauto , inline-block vai inline-table ) un relatīvā un lipīgā bloka līmeņa elementu pozicionēšana un līnijas.
2. Plūst apkārt
Plūsmas modelī bloks tiek noņemts no parastās plūsmas un novietots pa kreisi vai pa labi. Saturs tiek apvilkts ap elementa labo pusi ar pludināšanu: kreiso un elementa kreiso pusi ar pludināšanu: labais .
3. Absolūtā pozicionēšana
Absolūtajā pozicionēšanas modelī bloks tiek pilnībā noņemts no parastās plūsmas un tam tiek piešķirta pozīcija attiecībā pret saturošo bloku. Absolūtā pozicionēšana tiek realizēta, izmantojot pozīcijas pozīcijas: absolūtā; un pozīcija: fiksēta; .
"Ārpus plūsmas" elements var būt pludiņš, absolūti pozicionēts elements vai saknes elements.
Vispārīgi runājot, saturošais bloks ir bloks, kas satur citu elementu. Normālas plūsmas gadījumā saknes html elements ir ķermeņa elementa saturošais bloks, kas savukārt ir visu tā pakārtoto elementu saturošais bloks utt. Pozicionēšanas gadījumā saturošais bloks ir pilnībā atkarīgs no pozicionēšanas veida.
Nesaknes elementam ar pozīciju: statisks; vai pozīcija: radinieks; tā saturošo bloku veido tuvākā vecākbloka līmeņa, tabulas šūnas vai rindas līmeņa bloka satura apgabala mala.
Nesaknes elementam ar pozīciju: absolūts; tā saturošais bloks ir iestatīts uz tuvāko vecāku elements ar pozīcijas vērtību, kas nav statiska, piemēram:
ja priekštecis ir bloka līmeņa elements, saturošais bloks būs satura apgabals un elementa pildījums ;
ja priekštecis ir līnijas līmeņa elements, saturošais bloks būs satura apgabals;
ja priekšteču nav, tad elementa saturošais bloks tiek definēts kā sākotnējais saturošais bloks.
“Lipošam” blokam saturošais bloks ir ritināmā vai skatvietas tuvākais priekštecis, pretējā gadījumā.
2. Pozicionēšanas shēmas izvēle: pozīcijas īpašība
Pozīcijas īpašība nosaka, kurš pozicionēšanas algoritms tiek izmantots bloka pozīcijas aprēķināšanai.
Īpašums nav mantots.
pozīciju
Nozīme:
statisks
Bloks ir novietots atbilstoši normālai plūsmai. Augšējais , labais , apakšējais un kreisais rekvizīts netiek lietots. Noklusējuma vērtība.
radinieks
Bloka pozīcija tiek aprēķināta saskaņā ar parasto plūsmu. Pēc tam bloks tiek nobīdīts no tā parastās pozīcijas, un visos gadījumos, ieskaitot tabulas elementus, tas neietekmē turpmāko bloku pozīciju. Tomēr šāda nobīde var izraisīt bloku pārklāšanos, kā arī ritjoslu, ja ir pārpilde. Relatīvi novietots bloks saglabā savus izmērus, ieskaitot līniju pārtraukumus un tam sākotnēji rezervēto vietu.
Relatīvi novietots bloks izveido jaunu saturošu bloku saviem absolūti novietotajiem bērniem.
Ietekmes pozīcija: relatīvā; uz tabulas elementiem ir definēts šādi:
absolūts
Bloka pozīcija (un, iespējams, izmērs) tiek norādīta, izmantojot augšējo , labo , apakšējo un kreiso rekvizītus. Šīs īpašības nosaka skaidru nobīdi attiecībā pret to saturošo bloku. Absolūti novietotie bloki tiek pilnībā noņemti no parastās plūsmas, neietekmējot māsu elementu izvietojumu. Absolūti novietoto bloku malas nesabrūk.
Absolūti novietots bloks izveido jaunu saturošu bloku normālas plūsmas bērniem un bērniem ar pozīciju: absolūts; .
Absolūti novietota elementa saturs nevar aptvert citus blokus. Absolūti pozicionēts bloks var paslēpt cita bloka saturu (vai var būt paslēpts pats) atkarībā no pārklājošo bloku z indeksa vērtības.
lipīga
Bloka pozīcija tiek aprēķināta saskaņā ar parasto plūsmu. Pēc tam bloks tiek nobīdīts attiecībā pret tā tuvāko ritināšanas priekšteci vai skata logu, ja nevienam no priekštečiem nav ritināšanas. Lipīgs bloks var pārklāties ar citiem blokiem un arī izveidot ritjoslas, ja tas pārplūst.
Lipīgs bloks saglabā savus izmērus, ieskaitot līniju pārtraukumus un tam sākotnēji paredzēto vietu.
Lipīgs bloks izveido jaunu saturošu bloku absolūti un relatīvi novietotiem bērniem.
fiksēts
Fiksētā pozicionēšana ir līdzīga absolūtajai pozicionēšanai, izņemot to, ka saturošajam blokam ir iestatīts skata logs. Šāds bloks ir pilnībā izņemts no dokumenta plūsmas, un tam nav vietas attiecībā pret kādu dokumenta daļu. Fiksētie bloki nepārvietojas, ritinot dokumentu. Šajā ziņā tie ir līdzīgi fiksētiem fona attēliem. Drukājot, fiksētie bloki tiek atkārtoti katrā lapā, un saturošais bloks nosaka tiem lapas laukumu. Fiksētas pozīcijas bloki, kas ir lielāki par lapas apgabalu, tiek apgriezti.
sākotnējā
Iestata rekvizīta vērtību uz noklusējuma vērtību.
mantot
Manto rekvizītu vērtību no vecākelementa.
Sintakse
Pozīcija: statiska; pozīcija: relatīvs; pozīcija: absolūta; pozīcija: lipīga; pozīcija: fiksēta; pozīcija: sākotnējā; pozīcija: mantot;
3. Bloka nobīde: rekvizīti augšā, pa labi, apakšā, pa kreisi
Elements tiek uzskatīts par pozicionētu, ja tā pozīcijas rekvizīts ir iestatīts uz kaut ko citu, nevis statisku. Pozicionēti elementi ģenerē pozicionētus blokus, un tos var novietot atbilstoši šādām četrām fiziskajām īpašībām:
Sintakse
Augšpusē: 10 pikseļi; augšā: 2em; augšā: 50%; top:auto; augšā: mantot; augšā: iniciālis;
Augšējais rekvizīts norāda attālumu, kādā absolūti pozicionēta bloka augšējā mala (atkarībā no tā piemales) ir nobīdīta zem saturošā bloka augšējās malas. Relatīvi novietotiem blokiem norāda nobīdi attiecībā pret paša bloka augšējo malu (tas ir, blokam tiek piešķirta pozīcija parastajā plūsmā un pēc tam nobīde no šīs pozīcijas atbilstoši šai īpašībai).
Sintakse
Pa labi: -10 pikseļi; pa labi: .5em; pa labi: -10%; pa labi: auto; tiesības: mantot; pa labi: iniciālis;
Labais īpašums norāda attālumu, kādā absolūti pozicionēta bloka labā mala (ņemot vērā tā malu) ir nobīdīta pa kreisi no saturošā bloka labās malas. Relatīvi novietotiem blokiem nosaka nobīdi attiecībā pret paša bloka labo malu.
Sintakse
Apakšā: 50 pikseļi; apakšā: -3em; apakšā: -50%; apakšā: auto; apakšā: mantot; apakšā: iniciālis;
Apakšējais rekvizīts norāda attālumu, kādā bloka apakšējā mala ir nobīdīta uz augšu attiecībā pret saturošā bloka apakšējo malu. Relatīvi novietotiem blokiem nosaka nobīdi attiecībā pret paša bloka apakšējo malu.
Sintakse
Pa kreisi: 50 pikseļi; pa kreisi: 10em; pa kreisi: 20%; pa kreisi: auto; pa kreisi: mantot; pa kreisi: iniciālis;
Kreisais rekvizīts norāda attālumu, kādā kreisā mala ir nobīdīta pa labi no saturošā bloka kreisās malas. Relatīvi novietotiem blokiem nosaka nobīdi attiecībā pret paša bloka kreiso malu.
Pozitīvās vērtības pārvieto elementu saturošā bloka iekšpusē, un negatīvās vērtības pārvieto to ārpus saturošā bloka.
4. Ietīšana: pludiņa īpašums
Aptīšana ļauj blokiem peldēt pa kreisi vai pa labi pašreizējā rindā. "Peldošais bloks" tiek pārvietots pa kreisi vai pa labi, līdz tā ārējā mala pieskaras saturošā bloka malai vai cita peldoša bloka ārmalai. Ja ir līnijas vienība, ārējā augšējā daļa peldošais bloks ir izlīdzināts ar pašreizējās līnijas bloka augšdaļu.
Izmantojot elementiem pludiņa īpašību, ieteicams iestatīt platumu. Tādējādi pārlūkprogrammā tiks izveidota vieta citam saturam. Ja peldošajam elementam nav pietiekami daudz horizontālās vietas, tas tiks nospiests uz leju, līdz tas iederas. Šajā gadījumā citi bloka līmeņa elementi to ignorēs, un rindas līmeņa elementi pārvietosies pa labi vai pa kreisi, atbrīvojot tam vietu un plūstot ap to.
Noteikumus, kas regulē peldošo malu uzvedību, apraksta peldošā īpašība.
Īpašums nav mantots.
Sintakse
Pludiņš: pa kreisi; pludiņš: pa labi; pludiņš: nav; peldēt: mantot;
Peldošais bloks iegūst tā satura izmērus, ņemot vērā polsterējumu un apmales. Peldošo elementu augšējā un apakšējā mala nesabrūk.
Peldošie elementi var izmantot negatīvas piemales, lai pārvietotos ārpus sava vecākelementa satura apgabala.
Rekvizīts automātiski maina aprēķināto (pārlūkprogrammā parādīto) displeja rekvizīta vērtību, lai parādītu: block šādām vērtībām: inline , inline-block , table-row , table-row-group , table-column , table-column-group , tabulas šūna . tabulas paraksts, tabulas galvenes grupa, tabulas kājenes grupa. Iekļautās tabulas vērtība mainās uz table .
Īpašums neietekmē elementus ar displeju: flex un displeju: inline-flex . Neattiecas uz absolūti novietotiem elementiem.
Rīsi. 3. Aptiniet elementus
5. Plūsmas kontrole ap peldošiem elementiem: skaidrais īpašums
Clear rekvizīts norāda, kuras elementa bloka(-u) malas avota dokumentā nedrīkst būt blakus peldošajiem blokiem virs tā. CSS2 un CSS 2.1 rekvizīts attiecas tikai uz nepeldošiem bloka līmeņa elementiem.
Īpašums nav mantots.
Sintakse
Skaidrs: nav; skaidrs: pa kreisi; skaidrs: pa labi; skaidrs: abi; skaidrs: mantot;
Lai novērstu fona vai apmales rādīšanu zem peldošiem elementiem, izmantojiet (pārpildes: paslēpts;) kārtulu.
6. Pārklājuma konteksta definēšana: z-index īpašība
CSS katram blokam ir pozīcija trīs dimensijās. Papildus horizontālajām un vertikālajām pozīcijām bloki tiek sakrauti pa Z asi viens virs otra. Pozīcija gar Z asi ir īpaši svarīga, ja bloki vizuāli pārklājas viens ar otru.
Rīsi. 1. Elementu novietojums pa Z asi
Dokumentu koka zīmēšanas secība ekrānā ir aprakstīta izmantojot pārklājuma konteksts . Katrs bloks pieder vienam pārklājuma kontekstam. Katram blokam noteiktā pārklājuma kontekstā ir vesela skaitļa līmenis, kas ir tā pozīcija uz Z ass attiecībā pret citiem blokiem tajā pašā pārklājuma kontekstā.
Bloki ar augstākiem līmeņiem vienmēr parādās pirms blokiem ar zemākiem līmeņiem, un bloki ar tādu pašu līmeni tiek sakārtoti no apakšas uz augšu atbilstoši elementu secībai avota dokumentā. Elementa lodziņam ir tāda pati pozīcija kā tā vecāklodziņam, ja vien tam nav piešķirts cits līmenis ar z-index rekvizītu.
Z-index rekvizīts ļauj mainīt veidu, kā elementi tiek sakrauti viens virs otra.
Īpašums nav mantots.
Sintakse
Z-indekss: auto; z-indekss: 0; z-indekss: 5; z-indekss: 999; z-indekss: -1; z-indekss: mantot; z-indekss: sākotnējais;
Bezmaksas programmu un noderīgu padomu pasaule
