Platums un augstums: mēs varam mainīt elementa izmēru. Parametri css platums un augstums elementu lieluma iestatīšanai html pusē Vidējais augstums

Apraksts

Iestatiet bloka vai aizstājējelementu augstumu (pirms tiem, piemēram, pievienojiet tagu ). Augstumā nav iekļauta biedriskums starp nākamo elementu, ievades vērtību un lauku.

Ja bloka vietā tiek rādīts augstums, elementa augstums tiks atstāts nemainīgs, un tā vietā tas tiks parādīts virs jaunā elementa. Izmantojot šo līdzekli, elementu vietā pa vienam var redzēt pārklājumu, ja elementi HTML kodā tiek pārvietoti secīgi. Lai no tā izvairītos, elementa stilam pievienojiet overflow: auto.

Sintakse

augstums: vērtība | vіdsotki | auto | mantot

Vērtība

Kā tiek pieņemtas vērtības, vai tās ir atsevišķas, pieņemtas CSS — piemēram, pikseļi (pikseļi), collas (in), punkti (pt) un collas. Mainot procentuālo ierakstu, elementa augstums tiek aprēķināts atbilstoši Batkiv elementa augstumam. Ja tēvs nepārprotami nav norāde, tas ir tā, it kā viņš runātu no pārlūkprogrammas. automātiski iestata ienākošā elementa augstumu

HTML5 CSS2.1 IE Cr Op Sa Fx

Rezultāts šis dibens attēlā parādīts. viens.

Mal. 1. Augstuma regulēšana

Objekta modelis

document.getElementById("elementID").style.height

pārlūkprogrammas

Pārlūkprogramma Internet Explorer 6 nepareizi parāda augstumu kā minimālo augstumu.

Internet Explorer summēšanas režīmā līdz versijai 8.0 ieskaitot, tas nepareizi aprēķina elementa augstumu, nepievienojot tam augstumu, lauku un int vērtību.

Internet Explorer līdz versijai 7.0 (ieskaitot) neatbalsta mantojuma vērtību.

Sveiki, jaunie lasītāji! Šodien mēs apskatīsim, kā tīmekļa pusē iestatīt bloka elementus palīdzēt css autoritāti un uzlabot tā laika saturu, kā arī vīni nekustas elementā.

platums і augstums — css elementu platums un augstums

Lai iegūtu papildu platuma un augstuma stila atribūtus, varat iestatīt bloka elementu platumu un augstumu:

platums: auto|<ширина>|mantot
augstums:auto|<ширина>|mantot

Kā vērtību varat pielāgot, vai tā ir pieejama css formātā pasaules mērvienībai, piemēram, pikseļi (pikseļi), collas (in), punkti (pt) un collas.

p (platums: 200 pikseļi; augstums: 150 pikseļi)

Absolūtās vientulības skaitu var skaidri norādīt uz elementu pasaules nozīmi simtiem vietu. Šajā gadījumā elementa platums un augstums ir Batkiv elementa platumā un augstumā. Yakshcho tētis nepārprotami nav norāde, rozmiri zalezhatimut vіd vіkna pārlūkprogramma.

div (platums: 40%;)

Auto vērtību parāda elementa tvērums tīmekļa pārlūkprogrammā un akcijas vērtība. Katrā gadījumā elementu paplašināšana būs tāda, ka jaunajā povnistyu visa vieta iederēsies.

Paskatīsimies uz aplikāciju šprotēm.

Rezultāts:

Šai lietojumprogrammai mēs izveidojām div bloku un ievietojām rindkopu p ar tekstu. Diviem izmēriem mēs iestatījām 300 x 300 pikseļus. Elementam p jaudas platuma un augstuma vērtības ir vienādas ar auto, kā redzams ekrānuzņēmumā, tā platums tika iestatīts vienāds ar Batkiv elementa platumu, un augstums kļuva tāds, lai teksts varētu ietilpt jaunu, kas jāievieto rindkopā.

Tagad mēs varam mainīt rindkopas p css un iestatīt izmēra labojumu:

slānis2(
fons: #eee;
platums: 250 pikseļi;
}

Rezultāts:

Faktiski rindkopas platums jau ir kļuvis par 250 pikseļiem, un augstums palielināts, lai teksts ietilptu, bet augstuma parametrs mainīts uz auto.

Tagad rindās iestatīsim rindkopas augstumu un platumu:

slānis2(
fons: #eee;
platums: 50%;
augstums: 50%;
}

Rezultāts:

Kā redzat attēlā, p elementa platums bija puse no div elementa platuma. Un augstums palielinājās un sasniedza 75 augstuma div.

Ņemot vērā jebkura elementa platumu un augstumu vizuālajās vienībās, iespējams, būs jānorāda minimālie un maksimālie iespējamie izmēri. Aje, piemēram, mainot pārlūkprogrammas logu, elementa paplašinājums var mainīties un palielināties līdz tādiem paplašinājumiem, ka vietnes lasāmība kļūs vēl zemāka.

Varat iestatīt minimālo platumu un augstumu, izmantojot papildu atribūtus min-width un min-height:

minimālais platums:<ширина>
minimālais augstums:<высота>

Līdzīgi stila atribūti max-width un max-height ļauj iestatīt maksimālo izmēru:

maksimālais platums:<ширина>
maksimālais augstums:<высота>

Es sapratu, ka, ņemot vērā maksimālās un minimālās augstuma un platuma vērtības, elementa izmērs nevar būt lielāks par minimālās vērtības maksimālo un minimālo vērtību.

Varto norādīt, kas ir uzdevums Parametriem augstums un platums nav jēgas bloku tagiem, pārlūkprogramma neapstrādā mērogojamos elementus maziem elementiem un parametriem.

Var būt tā, ka ar dotajiem vienkāršiem elementa augstuma un platuma parametriem, kas jāievieto jaunā, saturs var neietilpst apmales zonā.

Piemēram, mainīsim rindkopu p z vairāk aplūkosim piemērus līdz 100 pikseļiem:

slānis2(
fons: #eee;
platums: 100 pikseļi;
augstums: 100 pikseļi;
}

Rezultāts:

Kā redzat, teksts starp rindkopām neizskatās īpaši jauks. Unikālās situācijās, piemēram, šī, izmantojiet css pārpildes noteikumu.

pārplūdes parametrs satura pievienošanai (slēpta, redzama) vai ritināšanai (ritināšana, automātiska).

Atkārtoti plūstošajam saturam var piemirkt, ja elementa platumu un augstumu atstarpi. Apskatīsim divas rindkopas:

Pirmās rindkopas teksts

Citas rindkopas teksts

Rezultāts:

Tā kā rindkopām nav iestatīts platums un augstums, pārlūkprogramma tos neatkarīgi izvērš atkarībā no savas automātiskās nozīmes. Rezultātā rindkopas platumā aizņēma visu pieejamo vietu, un augstumā tās bija līdzīgas tajās ievietojamam saturam.

Tagad pirmās rindkopas platums ir starp:

Pirmās rindkopas teksts

Citas rindkopas teksts

Rezultāts:

Rindkopas platums ir mainīts, un augstums ir iestatīts tā, lai tas atbilstu visam tekstam.

Nu, tagad tas ir tuvu pirmajai rindkopai un augstumam:

Pirmās rindkopas teksts

Citas rindkopas teksts

Rezultātā izrādījās, ka teksts nevar ietilpt tik ierobežotā rindkopā un tas bija iekļuvis mazo burtu apgabalā. Acīmredzot tekstu praktiski nav iespējams izlasīt ne pirmajā, ne pārējās rindkopās. Pati par satura uzvedības pārvaldību šādās situācijās pārpildes noteikums:

pārpilde: redzams|slēpts|ritināt|automātiski|mantot

Pārplūde izmanto pārplūdes bloķēšanas redzamo vērtību, it kā lai liktu pārlūkprogrammai parādīt to vietā, kas neietilpst konteinerā. Rezultātu var attiecināt uz pieteikumu.

Noteikums ir tvert visu, kas netiek prom no konteinera:

Ritināšanas vērtība elementā tiek parādīta vertikāli un horizontāli, ritinot šajā virzienā, lai visu varētu pārvietot:

Pirmās rindkopas teksts

Citas rindkopas teksts

Populārākie un loģiskākie risinājumi, jo konteineram jāpievieno smoga ritināšana auto. Tādā veidā pati pārlūkprogramma ir nozīmīga, ja un uz dažām asīm varto parāda smoga ritināšanu:

Pirmās rindkopas teksts

Citas rindkopas teksts

Rezultāts:

Lai pielāgotu neapmierināto ritināšanu, varat arī pielāgot stila overflow-x un overflow-y atribūtus, kas ļauj pielāgot ritināšanu pa četrām asīm. Tādā rangā horizontāli, bet priekš vertikāli.

Tāpēc, piemēram, jums ir nepieciešams, lai rindkopā horizontālā ritināšana vispār nebija, bet bija nepieciešama tikai vertikālā ritināšana, tad pietiek ar nākamo css noteikumu:

p(pārpilde-x:slēpts;pārpilde-y:auto;)

Pirmais pasūtījums tiks izpildīts.

Uz kuriem viss. Līdz jaunajai sezonai. Neaizmirstiet abonēt emuāra atjauninājumu, un es būšu priecīgs, jo es paātrināju ar sociālo tīklu pogām.

Augstums un elementa platumsє daudzumi, kas tiek aprēķināti. Tīmekļa lapas ādas elements izveido taisnu laukumu, jo tas sastāv no vairākiem apgabaliem. satura apgabals (kopā), piekļuves zonas, rāmja laukumsі apūdeņotās platības elements.

Mіzh vmіstom elements, kas jogas rāmis ir pēda polsterējums , ārpus elementa robežas lauki starpība. Teritorija atrodas lokāli netālu no ādas elementa, citas zonas ir neobov'yazykovymi.

1. Elementa augstums

Augstuma jauda nosaka bloka elementa satura augstumu un nepārklājas ar maziem elementiem displejs: inline; . Mazo elementu augstums ir vienāds ar to augstumu. Negatīvās vērtības nav atļautas. Jauda nesamazinās.

Sintakse

P (augstums: 100 pikseļi;)

2. Elementa platums

Platuma jauda nosaka bloka elementa satura platumu un nepārklājas ar maziem elementiem displejs: inline; . Mazo elementu platums ir vienāds ar to platumu kopā. Negatīvās vērtības nav atļautas. Jauda nesamazinās.

Sintakse

P (platums: 100 pikseļi;)

3. Absolūti pozicionēta elementa augstums un platums

Iestatiet absolūti pozicionēta elementa pozīcijas platumu un augstumu: absolūts; kas ir nepieciešams, šķembas augstuma un platuma brīdī tiek netieši piešķirtas izmantotajiem elementiem. Ja elementam ir iestatīta apmale un piemale, tas mainīs apgabala lielumu, nevis noklusējuma vērtību.

Div ( fons: #6A7690; pozīcija: absolūts; augšā: 0; apakšā: 0; pa kreisi: 50%; pa labi: 0; ) /*šajā pozīcijā elementa augstums ir 100%, platums ir 50% vecāku bloks*/
Mal. 2. Absolūti pozicionēta elementa augstums un platums

4. Elementa soļi

Lai iegūtu papildu polsterējuma jaudu, varat iestatīt soļus vienlaikus vairākām elementa pusēm šādā secībā: . Ja elements ir vājš, vīni paplašināsies uz šī numura ieejas. Negatīvās vērtības nav atļautas. Jauda nesamazinās.

Piemēram, ir dotas trīs vērtības, piemēram, div (padding: 10px 20px 30px;) , tās tiek sadalītas šādā secībā: pirmā vērtība ir augšējais ieraksts, otra ir labais un kreisais ieraksts, trešā ir apakšējais ieraksts.
Ja iestatāt divas vērtības, piemēram, div (padding: 10px 20px;) , tad vispirms iestatiet augšējo un apakšējo malu, otru - labo un kreiso.
Viena vērtība, piemēram, div (padding: 10px;) , iestatiet vienu un to pašu polsterējumu visās elementa pusēs.

Sintakse

P (polsterējums: 5 pikseļi 10 pikseļi 15 pikseļi 10 pikseļi;)

4.1. Piekļuve no vienas elementa puses

Lai iestatītu piekļuvi tikai no vienas elementa puses, ir jāpaātrina viena no padevēm polsterējums-augšpusē, polsterējums-labais, polsterējums-apakšā, polsterējums-kreisais, piemēram:

P (polsterējums pa kreisi: 10 pikseļi;)

5. Elementu piemales

Vairāk elementu vienā laukā. Rezerves jauda ir īsa forma elementa lauku rakstīšanai šādā secībā: augšā, pa labi, apakšā, pa kreisi. Vikoristovuєtsya pie reizes, ja ir nepieciešams noteikt laukus uz lielu skaitu malām, bet ne obov'yazkovo s chotiroh. Bloku elementu vertikāli summētie lauki sabrūk, un augšējam un apakšējam laukam nav vienādas ietekmes uz maziem elementiem. Ir atļautas negatīvas vērtības. Jauda nesamazinās.

Piemēram, ir dotas trīs vērtības, piemēram, div (margin: 10px 20px 30px;) , tās tiek sadalītas šādā secībā: pirmā vērtība ir augšējais lauks, otra ir labais un kreisais lauks, trešā ir apakšējais lauks.
Ja iestatāt divas vērtības, piemēram, div (margin: 10px 20px;) , tad vispirms iestatiet augšējo un apakšējo malu, otru - labo un kreiso.
Viena vērtība, piemēram, div (margin: 10px;) , iestata vienādas piemales visās elementa pusēs.

(margin: 0 auto;) Izmantojiet tikai tad, ja elementa platums ir iestatīts skaidri.

Sintakse

Div (mala: 5 pikseļi 10 pikseļi 2 pikseļi 5 pikseļi;)

5.1. Piemales no vienas elementa puses

Piemales-augšējās, piemales labās puses, piemale-apakšā, piemale-kreisās pakāpes ir atzīmētas ar dažādām piemalēm no elementa ādas puses, piemēram:

P (marža-kreisā: 10 pikseļi;)

6. Platuma un augstuma apmaiņa

CSS pievieno arī dažas papildu iespējas, kas attiecas uz iegulto tīmekļa lapas elementu augstumu un platumu: min-height , min-width , max-height un max-width . Jaudas līmeņi ļauj iestatīt minimālās un maksimālās vērtības elementa platumam un augstumam, dodot elementam iespēju uzglabāt pieejamo vietu. Jauda bieži tiek izmantota atsaucīgam tīmekļa lapu dizainam. Zastosovuєtsya visiem elementiem, krim mazs un elementi galda. Vienmēr ievērojiet pamatnoteikumu, tobto. pēc augstuma vai platuma iestatīšanas elementam. Chi nesamazinās.

Jūs varat lūgt palīdzību dažiem vientuļniekiem pasaulē un citu vientuļnieku palīdzību, piemēram:

Div (platums: 400 pikseļi; maksimālais platums: 50%;)

Elementam ir iestatīts 400 pikseļu platums, ja vien vērtība nav iestatīta uz 50% no konteinera bloka platuma, pretējā gadījumā platums tiks mainīts.

CSS platuma jauda ir iestatīta uz apgabala platuma vērtību elementa vietā.

Platums: vērtība | vіdsotki | auto | mantot

CSS augstuma jauda ir atkarīga no laukuma augstuma vērtības elementa vietā.

Augstums: vērtība | vіdsotki | auto | mantot

Negatīvās augstuma un platuma vērtības nav atļautas.

Šķiet, ka ar CSS spēku viss ir vienkārši un saprotami, taču patiesībā viss nav tik vienkārši.

Ja kādam tīmekļa lapas elementam ir piešķirts 500 pikseļu platums papildu jaudai, tas nenozīmē, ka šī elementa kopējais platums būs 500 pikseļi un ne vairāk.

Vēl svarīgāk ir tas, ka ir jāsaprot jaudas platums un augstums, lai no iekšpuses iestatītu platuma un augstuma vērtības.

Platuma un augstuma dominēšana - tikai viena no noliktavām tiks ieskaitīta elementa kopējā platumā un augstumā. Jūs norādāt apgabala Saturs platumu un augstumu, lai varētu redzēt nākamo attēlu. Arī zagalnoy platuma un augstuma forma ir tāda spēka liktenis kā polsterējums, mala un apmale.

Tshomu var viegli šķērsot.

Piemēram, ņemsim divus blokus ar vienādu platumu un piešķirsim vienam no tiem papildu polsterējuma jaudu.

Aiz parakstiem uz tīmekļa malām attiecas noteikums, ka skata puses polsterējuma vērtība tiek pievienota augstuma un platuma vērtībai.

Tobto. Elementa kopējais platums tiek pievienots elementa platuma jaudas vērtībai, un pirms tā tiek pievienota polsterējuma-kreisā un polsterējuma-labā vērtība.

Priekš dažādi veidi elementi, yakі var izmantot virsraksta malā, elementu platums un augstums tiek ņemts vērā īpašām formulām.

Dažādu veidu elementiem, ko var redzēt tīmekļa lapās, platuma un augstuma vērtības var mainīt šīs vērtības darbību.

Līdzīga situācija būs ar tādu pašu augstumu.

CSS ir īpašs algoritms, kas aprēķina dažādu tīmekļa vietnes elementu platuma un augstuma vērtības. Nebūšu traks uz kuru algoritmu, jo vīns ir nedaudz salokāms.

Uzreiz ir smuki saprast, ka platuma un augstuma jaudu drīkst ņemt no paša laukuma platuma un augstuma no elementa vietas, nevis no elementa kopējā platuma un augstuma.

Bloku elementu reklāmām ir iestatīts automātiskais platums. Tse nozīmē, ka elements tiks izstiepts horizontāli vienmērīgi uz zolītēm, zolītēm brīva vieta. Bloka elementu augstums aiz akcijām tiek iestatīts automātiski, tobto. pārlūkprogramma izstiepj apgabalu, nevis vertikāli, lai tas izskatās kā visa vieta. Lai elementa vietā iestatītu reģiona vērtības, varat mainīt platuma un augstuma jaudu.

CSS jaudas platums ļauj iestatīt apgabala platumu elementa vietā, un jaudas augstums ļauj iestatīt apgabala augstumu vietā:

Uzmanieties, lai platuma un augstuma spēks ir iestatīt tikai laukuma lielumu kopā, lai aprēķinātu bloka elementa kopējo platumu, ir nepieciešams salocīt laukuma platumu kopā, kreisās un labās iekšējās durvis un kreisā un labā rāmja platums. Tās pašas vērtības un elementa galvenais augstums, bet visas vērtības tiek aprēķinātas vertikāli:

Šajā punktā ir norādīts tikai platums un augstums.

Šis punkts ir jāatriebj, platums un augstums, iekšējā atvere, rāmis un ārējā atvere.

Pie dibena ir labi redzēt, ka otrs elements aizņem vairāk vietas nekā pirmais. Lai ievērotu mūsu formulu, izvērsiet pirmo rindkopu — 150 × 100 pikseļi un izvērsiet otru rindkopu:

tas ir 180 × 130 pikseļi.

Elementu pārkārtošana

Tā kā elementam esat piešķīris platumu un augstumu, varat mainīt vērtības vienam svarīgam brīdim - tā vietā varat mainīt elementa vidu, varat mainīt bloka vērtības. Šajā brīdī daļa vietas iziet aiz elementa robežas, lai nepieņemamais moments pazūd, var paātrināt CSS jauda pārplūde. Pārplūdes jauda norāda pārlūkprogrammai, kā tas ir nepieciešams, lai tas svārstītos, it kā bloka vietā tas mainīs skaļumu. Tsya spēks var iegūt vienu no šīm nozīmēm:

• redzams - vērtība, kādu pārlūkprogramma ir atlasījusi bloķēšanai. Viena un tā paša efekta nozīmes norāde ir tāda pati ietekme, jo tā ir pārplūdes spēka iestatīšanas būtība.
• ritināšana — ritiniet līdz smuga elementam vertikāli un horizontāli.
• auto - pievienot swag patēriņam.
• paslēpts — pievienojiet daļu, lai pārsniegtu bloka elementa robežu.