Mainiet polsterējumu un atstarpes augšpusē CSS. Augšējā polsterējuma CSS: sadaliet satura pozicionēšanas polsterējuma piemales

Piemales un polsterējums ir ļoti svarīgi stili, veidojot HTML lapu. Tie ļauj precīzāk novietot elementus, izveidot rāmi ar nepieciešamajām spraugām utt. Abi stili ir ļoti līdzīgi un veic līdzīgas funkcijas. Bet joprojām pastāv atšķirības.

Elementi var būt ligzdoti vai izvietoti blakus viens otram. Apskatīsim šādu piemēru:

Mums ir divi galdi, citrona un zila, kas atrodas viens zem otra. Tabulas sastāv no vienas šūnas. Pirmajā tabulas šūnā ir sarkans bloks. Izmantojot šo piemēru, apskatīsim, kā darbojas piemales un atkāpes.

Lauki ir iestatīti pēc stila polsterējums. Šis stils attiecas tikai uz konteinera elementiem, kas var saturēt citus elementus. Stils ļauj iestatīt malu starp elementa malām un tā saturu. Stils starpībaļauj iestatīt atkāpes no elementa līdz tuvākajām cita elementa robežām. Cita elementa apmales var būt vecākkonteinera apmales, kā arī pašas lapas malas.

Ir vairāki veidi, kā iestatīt šos stilus. Piemēram, tieši norādiet visu piemaļu vai atkāpju lielumu ar vienu argumentu kādā mērvienībā (px, ex, em, pt, cm un tā tālāk):

piemale: 3px;

polsterējums: 3px 5px;

pirmais noteiks piemaļu/atkāpju daudzumu augšā un apakšā, otrais - kreisajā un labajā pusē. Ja tiek sniegti trīs argumenti:

piemale: 3px 5px 2px; pirmā ir piemale/atkāpe augšpusē, otrā ir gan pa kreisi, gan pa labi, trešā ir apakšā. Ar četriem argumentiem:, polsterējums: 3px 5px 2px 6px;, piemale: 3px 5px 2px 6px;, pirmā ir piemale/atstarpe augšpusē, otrā ir labajā pusē, trešā ir apakšā, ceturtā ir kreisajā pusē. To ir viegli atcerēties: pirmais ir no augšas, pēc tam pulksteņrādītāja virzienā. Turklāt varat atsevišķi iestatīt piemales un polsterējumu noteiktai malai, izmantojot atbilstošos stilus:, polsterējums-top, polsterējums-pa labi, polsterējums-apakšā, polsterējums-pa kreisi margin-top

Attēlā sarkanais bloks atrodas tabulas šūnas iekšpusē un blakus tās robežām, tas ir, šūnai nav piemales. Iestatīsim šūnu piemales, izmantojot stilu:

Rezultātā lapa tiks mainīta uz šādu:

Tagad apskatīsim ievilkumus. Divas tabulas atrodas blakus viena otrai, ja vēlamies tās nedaudz atdalīt, varam izmantot atkāpes. Šeit ir divas iespējas: iestatīt pirmās tabulas apakšējo atkāpi vai otrās tabulas augšējo atkāpi. Izmantosim otro:

Lūdzu, ņemiet vērā, ka mēs iestatām atkāpi tieši tabulai, nevis tabulas šūnai, kā tas ir laukos. Lūk, rezultāts:

Starp citu, pirmajā gadījumā (atstarpe starp sarkano bloku un vecākšūnas robežām) tādu pašu efektu varētu panākt, iestatot bloka atkāpes. Kopumā, ja kaut kas nav skaidrs, paziņojiet mums komentāros.

Eksperimentālās lapas HTML kods:

Laipni lūdzam manā emuārā. Css (kaskādes stila lapas) nodrošina daudz pielāgošanas iespēju izskats tīmekļa lapas. Šodien es vēlos īsi parādīt, kā CSS definēt jebkura elementa polsterējumu augšpusē vai jebkurā citā pusē.

Marža

Marža tiek iestatīta, izmantojot margin rekvizītu. Ar tās palīdzību var iestatīt piemales visās četrās malās vienlaikus vai izmantot citus rekvizītus: margin-top, margin-left, margin-right, margin-bottom, kas ļauj veikt to tikai vienā pusē.

Piemale nosaka attālumu, kādā elementa atlasītā mala tiks nobīdīta no citiem lapas elementiem. Piemēram, ieraksts:

P,div(
Piemale augšpusē: 20 pikseļi;
}

Tas nozīmē, ka visi bloki un rindkopas tiks ievilktas augšpusē par 20 pikseļiem, tas ir, to augšējā mala tiks pārvietota prom no blakus esošajiem elementiem par šo attālumu.

Piemales var ierakstīt katrā pusē, izmantojot tikai vienu piemales īpašību, kurai pēc kārtas tiek ierakstītas 4 vērtības:

Div(
Piemale: 20 pikseļi 10 pikseļi 20 pikseļi 10 pikseļi;
}

Polsterējums tiks piešķirts attiecīgi no augšējās, labās, apakšējās un kreisās malas. Tā kā šajā gadījumā tie ir vienādi pretējās pusēs, mēs to varētu rakstīt arī šādi:

Div(
Piemale: 20 pikseļi 10 pikseļi;
}

Pirmā vērtība ir piemale augšpusē un apakšā, bet otrā ir piemale sānos.

Atkāpe

Iekšējais polsterējums darbojas citādi - tas nepārvieto bloku no citiem elementiem, bet gan pievieno šo vietu elementā, pārvietojot bloka saturu prom no tā malām. Tas ir ērti. Kur jūs esat redzējuši vietni, kur teksts sākas pašā loga augšējā kreisajā stūrī?

Es to neesmu redzējis, jo tīmekļa izstrādātāji vienmēr izmanto ārējos un iekšējos atkāpes, lai teksts būtu pēc iespējas vieglāk lasāms. Iekšējais polsterējums tiek norādīts, izmantojot polsterējuma īpašību, kurā var uzskaitīt uzreiz 4 vērtības, atdalītas ar atstarpi, attiecīgi visām malām.

Tāpat, līdzīgi kā piemalē, varat pievienot malas nosaukumu un iestatīt attālumu tikai tai. Piemēram, augšējo polsterējumu var rakstīt, izmantojot padding-top . Kopumā polsterējuma rekvizīts darbojas tieši tāpat kā maržas rekvizīts.

Piemēram, varat norādīt šo koda daļu:

Bloķēt(
Platums: 200 pikseļi;
Polsterējums: 20 pikseļi;
}

Kāds, jūsuprāt, būs mūsu elementa faktiskais platums? Šeit var redzēt, ka tas ir 200 pikseļi, bet polsterējums katrā pusē pievieno vēl 20 pikseļus, kopā 240 pikseļus. Ņem to vērā, izstrādājot.

Vēlos arī atzīmēt, ka polsterējums parasti tiek norādīts tikai bloku elementiem, labāk to nedot. Marža lieliski darbojas ar jebkuriem elementiem.

Sveiki, dārgie emuāra vietnes lasītāji! Šodien mēs turpināsim mācīties par Cascading Style Sheets jeb CSS. Iepriekšējos rakstos mēs jau vispārīgi izskatījām vietnes bloku izkārtojumu. Rezultātā mums sāka veidoties diezgan profesionālas tīmekļa lapas, taču tām kaut kā pietrūka. Bet viņiem, visticamāk, trūkst ievilkumu un rāmju. Šodien mēs apskatīsim piemales, polsterējuma un apmales stila noteikumus, kas ļauj iestatīt atkāpes un rāmjus html elementiem.

CSS polsterējuma opcijas

Ar kaskādes stila lapu palīdzību ir iespējams iestatīt divu veidu atkāpes.

1.Atkāpe ir attālums no elementa iedomātās robežas līdz tā saturam. Attāluma vērtība tiek norādīta, izmantojot parametru polsterējums. Šis ievilkums pieder pašam elementam un atrodas tā iekšpusē.

2. Marža— attālums starp pašreizējā tīmekļa lapas elementa apmali un blakus esošo elementu vai vecākelementa robežām. Distances lielumu kontrolē īpašums starpība. Šis ievilkums atrodas ārpus elementa.

Skaidrības labad attēls:

Piemēram, apsveriet šūnu, kas ir piepildīta ar tekstu. Tad polsterējums ir attālums starp šūnas iedomāto apmali un tajā ietverto tekstu. Un ārējā robeža ir attālums starp blakus esošo šūnu robežām. Sāksim ar polsterējums.

Polsterēšana CSS, izmantojot polsterējumu (augšā, apakšā, pa kreisi, pa labi)

Padding-left, padding-top, padding-right un padding-bottom stila rekvizīti ļauj iestatīt aizpildījuma vērtības attiecīgi tīmekļa lapas elementa kreisajā, augšējā, labajā un apakšā:

polsterējums | polsterējums-labais | polsterējums-apakšā | polsterējums pa kreisi: vērtība | procenti | mantot

Atkāpes lielumu var norādīt pikseļos (px), procentos (%) vai citās CSS pieņemamās vienībās. Norādot procentus, vērtību aprēķina no elementa platuma. Mantojuma vērtība norāda, ka tā ir mantota no vecāka.

Piemēram, pašreizējai rindkopai es izmantoju stila kārtulu, kas iestata kreiso polsterējumu uz 20 pikseļiem, augšējo polsterējumu uz 5 pikseļiem, labo polsterējumu uz 35 pikseļiem un apakšējo polsterējumu uz 10 pikseļiem. Noteikuma ieraksts izskatīsies šādi:

p.test(
polsterējums-kreisais:20px;
polsterējums-top: 5px;
polsterējums pa labi: 35 pikseļi;
polsterējums apakšā: 10 pikseļi
}

Kompozītmateriāla polsterējuma likumsļauj norādīt atkāpes visās tīmekļa lapas elementa pusēs vienlaikus:

polsterējums:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

Saliekamās konstrukcijas kārtula pieļauj vienu, divas, trīs vai četras vērtības, kas atdalītas ar atstarpi. Šajā gadījumā efekts ir atkarīgs no vērtību skaita:

• ja norādāt vienu vērtību, tiks iestatīts atkāpes apjoms uz visām lapas elementa pusēm;
• ja norādāt divas vērtības, pirmā iestatīs atkāpes apjomu augšā un apakšā, bet otrā - kreisajā un labajā pusē;
• ja norādāt trīs vērtības, tad pirmā noteiks atkāpes apjomu augšpusē, otrā - kreisajā un labajā pusē, bet trešā - apakšā;
• ja ir norādītas četras vērtības, pirmā iestatīs atkāpes apjomu augšpusē, otrā labajā pusē, trešā apakšā un ceturtā kreisajā pusē.

Tādējādi iepriekš minēto CSS noteikumu var pēc iespējas saīsināt un uzrakstīt šādi:

p.tests (polsterējums: 5 pikseļi 35 pikseļi 10 pikseļi 20 pikseļi)

Maržas rekvizīts vai maržas CSS

Piemales-left, margin-top, margin-right un margin-bottom stila atribūti ļauj iestatīt piemales vērtības attiecīgi pa kreisi, augšā, pa labi un apakšā:

margin-top | mala pa labi | mala-apakša | margin-kreisais:<значение>|auto|mantot

Kā minēts iepriekš, piemale ir attālums no pašreizējā elementa robežas līdz blakus esošā elementa robežai vai, ja blakus elementu nav, līdz vecākkonteinera iekšējai robežai.

Atkāpes lielumu var norādīt pikseļos (pikseļos), procentos (%) vai citās CSS atļautās vienībās:

p(
piemale-kreisais: 20 pikseļi;
}
h1(
mala-labā:15%;
}

Vērtība auto nozīmē, ka pārlūkprogramma automātiski aprēķinās atkāpes lielumu. Ja izmantojat procentuālo apzīmējumu, atkāpes tiek aprēķinātas atkarībā no vecākkonteinera platums. Turklāt tas attiecas ne tikai uz malu-kreiso un malu-labo, bet arī uz malas augšējo un apakšējo malu, procentuālās piemales tiks aprēķinātas atkarībā no konteinera platuma, nevis augstuma.

Ir atļauts izmantot kā ārējo atkāpju vērtības negatīvas vērtības:

p(
margin-left:-20px;
}

Ja ar pozitīvām atkāpes vērtībām blakus esošie elementi tiek pārvietoti prom, tad ar negatīvu vērtību blakus esošais bloks sadursies ar elementu, kuram esam iestatījuši šādu negatīvu nobīdi.

Mēs varam arī norādīt polsterējumu, izmantojot stila atribūtu starpība. Tas iestata atkāpes vērtības vienlaicīgi visās tīmekļa lapas elementa pusēs:

piemale:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

Norādot vienu, divas, trīs vai četras pildījuma vērtības, šis rekvizīts atbilst tiem pašiem likumiem kā pildījuma noteikumam.

Robežas opcijas, izmantojot robežu

Iestatot rāmjus, ir trīs veidu parametri:

• border-width — apmales biezums;
• border-color — apmales krāsa;
• border-style — līnijas veids, ar kādu tiks novilkts rāmis.

Sāksim ar rāmja biezuma parametru:

apmales platums: [vērtība | tievs | vidējs | biezs] (1,4) | mantot

Rāmja biezums var norādīt pikseļos vai citās vienībās, kas pieejamas CSS. Plānie, vidējie un biezie mainīgie iestata apmales biezumu attiecīgi uz 2, 4 un 6 pikseļiem:

apmales platums:vidējs;

Tāpat kā polsterējuma un piemales rekvizītu gadījumā, apmales platuma parametrs pieļauj vienu, divas, trīs vai četras vērtības, tādējādi iestatot apmales platumu visām pusēm vienlaikus vai katrai pusei atsevišķi:

apmales platums: 5 pikseļi 3 pikseļi 5 pikseļi 3 pikseļi

Pašreizējā rindkopā izveidojiet augšējās apmales biezumu 1 pikseļi, labās puses — 2 pikseļi, apakšējās — 3 pikseļi un kreisās puses — 4 pikseļi, izmantojot kārtulu (apmales platums: 1 pikseļi 2 pikseļi 3 pikseļi 4 pikseļi;)

Izmantojot stila atribūtus border-left-width, border-top-width, border-right-width un border-bottom-width, varat iestatīt attiecīgi apmales kreisās, augšējās, labās un apakšējās malas biezumu:

apmale-left-width|apmale-augšējā-platums|apmale-labais-platums|apmale-apakšā-platums: plāns|vidējs|biezs|<толщина>|mantot

Nākamais parametrs ir apmales krāsa, ar kuru jūs varat kontrolēt rāmja krāsa:

apmales krāsa: [krāsa | caurspīdīgs] (1,4) | mantot

Rekvizīts ļauj iestatīt apmales krāsu visām elementa pusēm vienlaikus vai tikai norādītajām. Kā vērtību varat izmantot HTML pieņemto krāsu norādīšanas metodes: heksadecimālo kodu, atslēgvārdus utt.:

p (apmales platums: 2 pikseļi; apmales krāsa: sarkana)

caurspīdīgs iestata caurspīdīgo apmales krāsu un manto vecākvērtību. Pēc noklusējuma, ja apmales krāsa nav norādīta, tiks izmantota tā, kas tiek izmantota fontam dotajā elementā.

Izmantojot stila atribūtus border-left-color, border-top-color, border-right-color un border-bottom-color, varat iestatīt attiecīgi apmales kreisās, augšējās, labās un apakšējās malas krāsu:

apmales-left-color|border-top-color|border-right-color|border-bottom-color: caurspīdīgs|<цвет>|mantot

UN pēdējais parametrs apmales stils norāda rāmja tips:

apmales stils: (1,4) | mantot

Rāmja tipu var norādīt visām elementa pusēm vienlaikus vai tikai norādītajām. Kā vērtības varat izmantot vairākus atslēgvārdus. Izskats būs atkarīgs no izmantotās pārlūkprogrammas un rāmja biezuma. Nozīme neviens tiek izmantots pēc noklusējuma un nerāda rāmi, un tā biezums ir iestatīts uz nulli. Slēptai vērtībai ir tāds pats efekts. Rezultātā iegūtais rāmis citām vērtībām atkarībā no biezuma ir parādīts tabulā zemāk:

Stila atribūti border-left-style, border-top-style, border-right-style un border-bottom-style norāda līniju stilu, kas tiks zīmētas rāmja kreisajā, augšējā, labajā un apakšējā pusē, attiecīgi:

apmale-left-style|apmale-augšējais-stils|apmale-labais-stils|apmale-apakšējais-stils: nav|slēpts|punktēts|punktēts|stingrs|dubults|rieva|kore|ielaidums|ievads|mantot

Tāpat kā ar polsterējuma un polsterējuma opcijām, ir vispārējs pierobežas īpašums. Tas ļauj vienlaikus iestatīt apmales biezumu, stilu un krāsu ap elementu:

robeža: | mantot

Vērtības var būt jebkurā secībā, atdalītas ar atstarpēm:

td (apmale: 1 px cieta dzeltena)

Lai iestatītu apmali tikai atsevišķām elementa pusēm, ir rekvizīti border-top, border-bottom, border-left, border-right, kas ļauj iestatīt parametrus augšējai, apakšējai, kreisajai un labajā pusē ietvaros

Atliek tikai apkopot:

• uzdevumam polsterējums mēs izmantojam īpašumu polsterējums;
• lai konfigurētu piemales ir noteikums starpība;
• rāmja parametri tiek norādīti, izmantojot atribūtu robeža.

Es atzīmēju, ka visi šie css īpašības palielināt tīmekļa lapas elementa izmēru. Tāpēc, ja mainīsim mājas lapas dizainu veidojošo bloku konteineru apmales biezumu vai polsterējuma izmēru, mums būs attiecīgi jāmaina šo konteineru izmērs, pretējā gadījumā tie var pārvietoties un dizains tiks izveidots. salauzts.

Tas arī viss, tiekamies nākamreiz!

Šodien mēs ar jums nedaudz parunāsim par izkārtojuma principiem, proti, par veidiem, kā organizēt atkāpi jūsu vietnē noteiktiem elementiem.

Attiecīgais elements, kuram ir nepieciešama atkāpe, var būt teksts, attēls, tabula vai jebkurš cits HTML elements. Galvenais ir ievērot dažus svarīgus noteikumus, par kuriem es jums pastāstīšu tagad.

Ja jūs tikai veidojat savu vietni, iesaku galvenā stila faila augšdaļā ievietot šādus rekvizītus:

* ( -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; ) *:before, *:after ( -webkit-box-sizing: border- box-box-sizing: border-box;

Kāpēc tas ir vajadzīgs, jūs jautājat? Es atbildu uz jūsu jautājumu ar skaidru piemēru.

Pieņemsim, ka jums ir šāds izkārtojuma elements:

Šādi izskatīsies opcija, neizmantojot iepriekš aprakstītās īpašības (augšējais elements) un ar to izmantošanu (apakšējais elements):

Ko jūs šeit varat redzēt? Ka elementa platums pirmajā versijā (neizmantojot rekvizītus) kļuva lielāks par norādīto pievienoto atkāpju dēļ, kas nav gluži ērti un pareizi izkārtojuma ziņā.

Opcija ar rekvizītiem ir daudz estētiski pievilcīgāka, taču to vajadzētu izmantot apzināti, jo, pievienojot tos gatavai vietnei, jūs riskējat iegūt sliktu dizainu un “galvassāpes” to visu savešanas formā. . Visi projekti, kurus man bija iespēja vadīt no nulles, nebija bez šiem īpašumiem.

Un tagad patiesībā runāsim par iespējām, kā organizēt jūsu vietnes elementu atkāpes, izmantojot vizuālus piemērus.

Polsterējums, izmantojot CSS rekvizītu “padding”.

Lai jūs saprastu visu lietu loģiku, ņemsim kā piemēru šādu izkārtojuma fragmentu:

ar saviem stiliem:

Test_div (platums: 250 pikseļi; apmale: 1 pikseļi cieta;)

Vizuālā versija izskatās šādi:

Kas ir īpašums" polsterējums"? Tas palīdz organizēt iekšējo atkāpi norādītajos elementos. Pievienojiet mūsu izkārtojumam iekšējo polsterējumu 10 pikseļus:

Test_div (platums: 250 pikseļi; apmale: 1 pikseļi cieta; polsterējums: 10 pikseļi; // Iekšējais polsterējums 10 pikseļi)

Vizuāli tas izskatās šādi:

Īpašumā esošais skaitlis 10 nozīmē, ka norādīto elementu iekšpusē katrā no to četrām pusēm ir jāpievieno 10 pikseļu piemale. Pikseļus (pikseļus) var aizstāt ar procentiem vai citām CSS atbalstītajām vērtībām.

Ir divi varianti norādes par pusēm, no kurām jāizdara ievilkumi.

Pirmkārt- tas ir ar skaidru norādi par pusēm:

Polsterējums augšpusē: 10 pikseļi; // 10px augšējais polsterējums-labais: 10px; // 10px polsterējums labajā polsterējums-apakšā: 10px; // Iekšējais polsterējums 10px no apakšas polsterējums-pa kreisi: 10px; // 10 pikseļu kreisais polsterējums

Šajā gadījumā katra puse izmanto savu īpašumu. UN otrais:

Polsterējums: 10 pikseļi 0 0 0; // Iekšējais polsterējums 10px uz augšu, viss pārējais - 0px polsterējums: 10px 0; // Iekšējais polsterējums 10px augšpusē un apakšā, un sānos - 0px polsterējums: 0 10px; // Iekšējais polsterējums 0 pikseļi augšā un apakšā un 10 pikseļi sānos

Šeit ir vienkāršs vērtību saraksts, no kurām katra atbilst savai pusei. Sāni ir iestatīti šādi: pirmā vērtība ir augšējā, otrā ir labā, trešā ir apakšējā un ceturtā ir pa kreisi, tas ir, viss ir pulksteņrādītāja virzienā.

Ja ir divas vērtības (augšējā un labā), tas nozīmē, ka spogulī vienas un tās pašas vērtības iet uz leju un pa kreisi, un tas ir vienīgais veids. Šķiet, ka viss ir skaidrs. Ja jums nav jāiestata atkāpe vienai no pusēm, iestatiet šīs puses vērtību uz “0”. Man šis variants patīk labāk, jo tas ir kompaktāks, bet savos centienos izmantoju pirmo variantu.

Šis atkāpes veids ir piemērots teksta, tabulas šūnu satura u.c. atdalīšanai. teksta informācija. Lai atdalītu pašus elementus, līdzīgi kā iepriekš minētajā piemērā, ir vēl viens īpašums.

Marža, izmantojot CSS rekvizītu “margin”

Īpašuma atšķirīgā iezīme" starpība" nozīmē, ka atkāpe tiek pievienota ārpus elementa, tas ir, ārējā.

Šeit ir arī divas pievienošanas iespējas.

Pirmkārt– ar skaidru norādi par pusi:

Piemale augšpusē: 10 pikseļi; // 10 pikseļu piemale augšējā malā-labajā pusē: 10 pikseļi; // 10 pikseļu piemale labajā malā-apakšā: 10 pikseļi; // Piemale 10 pikseļi no apakšējās malas-kreisais: 10 pikseļi; // 10 pikseļu kreisā mala

Otrkārt– ar vērtību sarakstu, no kurām katra atbilst savai pusei:

Piemale: 10 pikseļi 0 0 0; // Ārējā mala 10px augšpusē, viss pārējais - 0px margin: 10px 0; // Piemale 10px augšā un apakšā, un sānos - 0px piemale: 0 10px; // Ārējais polsterējums 0 pikseļi augšā un apakšā un 10 pikseļi sānos

Šeit neaprakstīšu visas nianses darbā ar noteikumiem, viss ir tāpat kā ar īpašumu. polsterējums", par viņu rakstīts iepriekš.

Mēs izmantojam rezervi ar šādu vērtību:

Test_div (platums: 250 pikseļi; apmale: 1 pikseļi cieta; piemale: 10 pikseļi; // Piemale 10 pikseļi)

Vizuāli tas izskatīsies šādi:

Kā redzams no piemēra, šajā gadījumā tiek pievienota ārējā piemale, lai atdalītu norādītos elementus.

Svarīga funkcija: Ja rūpīgi apskatījāt rezultātu, iespējams, pamanījāt, ka blakus esošo elementu atkāpes nesakrīt. Tas ir, ja pirmā elementa apakšējā piemale ir 10 pikseļi, bet otrajam elementam ir tāda pati vērtība, kopējais attālums starp tiem arī būs 10 pikseļi. Ja attiecīgi 10 un 15, tad kopā ir 15 un tā tālāk.

Šo atkāpes iespēju bieži izmanto tekstā, proti, rindkopu noformējumā, kā arī elementos, kuriem ir redzamas apmales.

Bet abas īpašības neaprobežojas tikai ar šiem elementiem. Jūs pats izvēlaties to izmantošanas iespējas, es tikai mēģināju jums sniegt pamatinformāciju par tām.

CSS izkārtojums vienmēr ir bijis taisnstūrveida. Visas gludas līnijas ir izstrādātāja kompetencē. Stila kārtulas nodrošina pietiekami daudz iespēju, lai piešķirtu lapai vienmērīgu formu ekrāna izšķirtspējas robežās. Bet jebkurš izkārtojuma elements vienmēr ir taisnstūris, kurā informācijas izkārtojumu regulē CSS noteikumi.

Vispusējs polsterējums ir svarīgs katram lapas elementam, ja tas ir absolūti novietots, un CSS augšējais polsterējums ir īpaši definēts, jo tas ir svarīgi dažādiem elementiem, īpaši iekļautajiem.

Pozicionēšanas pamatnoteikumi

Bloka elementam ir piemales noteikums, tajā esošo elementu polsterējuma kārtula un apmales platums, ko var arī izmantot.

Īpaši svarīgs ir ievilkums augšpusē. CSS blokā saista aizpildīšanas noteikumus ar noteikumiem par absolūti un relatīvi novietotiem elementiem šajā blokā.

Izplatīta CSS noteikumu prakse: varat norādīt polsterējumu visās pusēs vienādi, pa pāriem augšā/apakšā un labajā/kreisajā pusē vai katrai pusei atsevišķi. Piemēram,

• piemale: 10 pikseļi;
• polsterējums: 10px20px;
• polsterējums: 10px20px30px40px.

Pirmajā gadījumā tiek iestatīts elementa ievilkums no ārējā konteinera sāniem, kurā tas atrodas. Otrajā gadījumā piemales augšā un apakšā ir 10 pikseļi, kreisajā un labajā pusē - 20 pikseļi. Trešajā gadījumā ievilkumu lielums ir norādīts no visām pusēm: augšā, labajā, apakšējā un kreisajā pusē.

Visos šajos gadījumos ievilkums augšējais CSS ir 10 pikseļi.

Noteikumi, kas maina elementu novietojumu

Ja izkārtojuma elements nav novietots absolūti, tas tiek novietots vispārējā lapas veidošanas secībā.

Ja mēs definējam polsterējums augšpusē CSS scCurrInfo elementā, mērķis tiks sasniegts, bet ja li līmenī tas netiks.

Šajā piemērā, izmantojot pildījuma kārtulu: 40 pikseļi; nepieciešams atbilstoši samazināt platuma un augstuma noteikumus par 80 pikseļiem. IN citādi ScCurrInfo bloka izmērs pārsniegs ārējā bloka robežas.

Ja mēs noņemsim aizpildīšanas kārtulu no scCurrInfo apraksta, bet pievienosim to ar vērtību 20 pikseļi saraksta vienuma stila aprakstam, mēs iegūsim tikai augšējais ievilkums. CSS neizmantos šo vērtību citām pusēm.

Protams, šī atkāpes noteikuma izmantošana attiecas uz katru li elementu.

Vispārīga satura formatēšanas prakse

Daži izstrādātāji sasniedz pilnību, izkārtojot lapas, izmantojot bloku elementus. Acīmredzot tā ir klasiska prakse - sākt ar tabulām un beigt savu izglītības procesu ar blokiem.

Bloku izkārtojumam piemītošā brīvība ir aizraujoša, un izstrādātāja iztēli nedrīkst ierobežot stingri tabulas noteikumi: tikai rindas, tikai šūnas, kas apvienojas tikai horizontāli un vertikāli. Nekas raksturīgs relāciju idejām.

Tikmēr tabulām papildus acīmredzamajiem trūkumiem ir daudz kvalitatīvu priekšrocību. Veidojot polsterējumu augšpusē, CSS ņem vērā polsterējumu pa kreisi, pa labi (apakšā ir īpašs brīdis). Tabulas šūnu noteikumi ļauj kontrolēt gan vertikālo, gan horizontālo līdzinājumu. Izmantojot rindu stilus un apvienojot tos ar šūnu stiliem, varat izveidot sarežģītus satura skatus.

Parastais lapas attēlojums taisnstūru veidā nemaz neliedz to attēlot tabulas veidā. Tie ir arī taisnstūri, taču tie ir arī tabulas šūnas, tas ir, tiem ir savi noteikumi, kas papildina bloku noteikumus.

Absolūta pozicionēšana

Bloķēt ar noteikumu POSITION: absolūts ; atradīsies vietā, ko nosaka tās koordinātas attiecībā pret bloku, kurā tas atrodas.

CSS noteikumu raksturīga iezīme ir tā, ka “prakse ir labākais patiesības kritērijs” vairumā gadījumu, it īpaši, ja ir nepieciešama saderība starp pārlūkprogrammām un izkārtojums tiek veikts manuāli, labāk ir izpētīt pilnvērtīgas rokasgrāmatas kaskādes stila lapās.

Tabulu izmantošana bieži rada problēmas ar šūnu satura pārvietošanu. Līdzīga nobīde blokā ne vienmēr ietekmē visus elementus. Eksperimentējot, jūs varat sasniegt vēlamo rezultātu. Triviāls uzdevums: kā augšējā polsterējuma noņemšana ne vienmēr ir triviāls CSS risinājums.

Atsevišķos gadījumos, kad nākas izkārtot lapas elementus kādas populāras mājaslapas satura vadības sistēmas dzīlēs, tomēr ir jāpievērš uzmanība ne tikai eksperimentālai praksei, bet arī jāpaskatās kolēģu pieredze.