Elemendi kõrgus ja laius on arvutatud väärtused. Iga veebilehe element moodustab ristkülikukujulise ala, mis omakorda koosneb mitmest alast - sisuala (sisu), polsterduspiirkonnad, raami alad ja põllualad element.
Elemendi sisu ja selle piiri vahel on taane polsterdus, väljaspool elemendi piiri - väljad marginaal. Igal elemendil on sisuala, muud alad on valikulised.
Riis. 1. Elemendi plokimudel 1. Elemendi kõrgus
Atribuut kõrgus määrab plokielemendi sisu kõrguse ja ei mõjuta inline elementide kuvamist: inline; ... Sisestatavate elementide kõrgus on võrdne nende sisu kõrgusega. Negatiivsed väärtused pole lubatud. Kinnisvara ei ole päritud.
Süntaks
P (kõrgus: 100 pikslit;)
2. Kauba laius
Atribuut laius määrab plokielemendi sisu laiuse ega mõjuta inline elementide kuvamist: inline; ... Tekstisiseste elementide laius on sama kui nende sisul. Negatiivsed väärtused pole lubatud. Kinnisvara ei ole päritud.
Süntaks
P (laius: 100 pikslit;)
3. Absoluutselt paigutatud elemendi kõrgus ja laius
Määrake absoluutselt paigutatud elemendi asukoha laius ja kõrgus: absoluutne; pole alati vajalik, kuna sel juhul määravad kõrguse ja laiuse kaudselt elemendi nihe. Kui elemendile on määratud piirid ja veerised, vähendavad need sisuala suurust sobivate väärtuste võrra.
Div (taust: # 6A7690; positsioon: absoluutne; ülaosa: 0; alumine: 0; vasak: 50%; parem: 0;) / * sel juhul on elemendi kõrgus 100%, laius 50%lähteplokist * / 
Riis. 2. Absoluutselt paigutatud elemendi kõrgus ja laius
4. Elementide taanded
Kasutades täitmisomadust, saate määrata elemendi mitmele küljele samaaegselt polstri järgmises järjekorras:. Kui elemendil on taust, laieneb see ka polsterdusele. Negatiivsed väärtused pole lubatud. Kinnisvara ei ole päritud.
Kui on antud kolm väärtust, näiteks div (padding: 10px 20px 30px;), jagatakse need järgmises järjekorras: esimene väärtus on ülemine polster, teine parem ja vasak polster ning kolmas on alumine polster.
Kui on antud kaks väärtust, näiteks div (padding: 10px 20px;), siis esimene määrab ülemise ja alumise polsterduse, teine parema ja vasaku.
Üksik väärtus nagu div (polster: 10 pikslit;) määrab elemendi kõikidele külgedele sama polstri.
Süntaks
P (polster: 5px 10px 15px 10px;)
4.1. Elemendi ühe külje taane
Polsterduse määramiseks elemendi ainult ühele küljele peate kasutama ühte polstri ülaosa, polsterdamise parempoolse, polsterdamise alumise ja polsterdamise vasakpoolse omadusi, näiteks:
P (vasakpoolne polster: 10 pikslit;)
5. Elementide väljad
Enamik elemente on üksteisest eraldatud veeristega. Veerise atribuut on lühendatud vorm elemendi veeriste kirjutamiseks järgmises järjekorras: üleval, paremal, all, vasakul... Seda kasutatakse siis, kui peate määrama veerised mitmest küljest, kuid mitte tingimata neljast küljest. Plokielementide vertikaalselt külgnevad veerised on ahendatud ning ülemised ja alumised veerised ei mõjuta inline elemente. Negatiivsed väärtused on lubatud. Kinnisvara ei ole päritud.
Kui on antud kolm väärtust, näiteks div (veeris: 10 pikslit 20 pikslit 30 pikslit;), jaotatakse need järgmises järjekorras: esimene väärtus on ülemine veerg, teine parem- ja vasakpoolne ning kolmas on alumine äär.
Kui on antud kaks väärtust, näiteks div (marginaal: 10 pikslit 20 pikslit;), siis esimene määrab ülemise ja alumise veerise, teine parema ja vasaku.
Üksik väärtus nagu div (veeris: 10 pikslit;) määrab elemendi kõikidele külgedele samad veerised.
(veeris: 0 automaatne;) töötab ainult siis, kui elemendi laius on selgesõnaliselt määratud.
Riis. 3. varu: auto; absoluutselt paigutatud elemendi jaoks Süntaks
Div (veerised: 5px 10px 2px 5px;)
5.1. Veerised elemendi ühel küljel
Veerise ülaosa, veerise parem, veerise alumine ja veerise vasak omadused juhivad vastavaid veeriseid elemendi mõlemal küljel, näiteks:
P (veerised vasakul: 10 pikslit;)
6. Laiuse ja kõrguse piiramine
CSS toetab ka mõnda muud atribuuti, mis on seotud veebilehe elementide kõrguse ja laiuse määramisega: min-kõrgus, min-laius, max-kõrgus ja max-laius. Need omadused võimaldavad teil määrata elemendi laiuse või kõrguse minimaalsed ja maksimaalsed väärtused, andes elemendile võimaluse täita saadaolevat ruumi. Atribuute kasutatakse sageli reageeriva veebilehe kujundamiseks. Kehtib kõikidele elementidele, välja arvatud tekstisisesed ja tabelielemendid. Nad järgivad alati peamist reeglit, s.t. pärast elemendi kõrguse või laiuse andmist. Pole päritud.
Tavalisi mõõtmeid saate määrata mõne mõõtühiku abil ja suurusepiiranguid teiste ühikute abil, näiteks:
Div (laius: 400 pikslit; maksimaalne laius: 50%;)
Elemendi laius on 400 pikslit ainult siis, kui see väärtus ei ületa 50% konteineriploki laiusest, vastasel juhul väheneb selle laius.
Selles artiklis vaatleme, kuidas saate CSS -is ploki kõrguse määrata protsendina selle laiusest. Vaatame selle tehnoloogia rakendamist, näites Bootstrapi karusselli (liuguri) loomise kohta erineva suurusega piltidest.
Ploki loomine kõrgusega, mille laiusest on teatud protsent
- Looge HTML -struktuur kahest plokist:
Esimeses plokis on 2 klassi. Üksusele reageeriva klassi abil määrame ploki suhtelise positsioneerimise. Seda tuleb teha nii, et 2 plokk (millel on absoluutne positsioneerimine) paikneks selle suhtes. Lisaks kasutatakse seda klassi ka: enne pseudoelementi vastavate elementide sisu lisamiseks (üksusele reageeriv). See element määrab kasti soovitud kõrguse selle laiuse suhtes, kasutades polsterduskattega CSS-i omadust. Selle meetodi trikk on see, et kui polsterdamise omadus on seatud väärtusele mitte pikslites, vaid protsentides, siis arvutab brauser selle laiuse järgi... Seega on võimalik saada vajaliku kõrgusega plokk. Järgmine samm on anda plokile 2 absoluutne positsioneerimine ja joondada see esimese plokiga.
- Lisage lehele järgmine CSS: .item-reageeriv (positsioon: suhteline; / * suhteline positsioneerimine * /) .item-reageeriv: enne (kuva: plokk; / * renderdage element plokina * / sisu: ""; / * sisu pseudoelement * / laius: 100%; / * elemendi laius * /). üksus-16by9 (topp-top: 56,25%; / * (9:16) * 100% * /). üksusele reageeriv> .sisu (positsioon: absoluutne; / * elemendi absoluutne asukoht * / / * elemendi asukoht * / üleval: 0; vasak: 0; parem: 0; alumine: 0;) / * Vajadusel (nende plokkidega klassid) * / .tem -4by3 (polsterdatud ülaosa: 75%; / * (3: 4) * 100% * /). üksus-2by1 (topp-top: 50%; / * (1: 2) * 100 % * /). üksus -1 x 1 (topp -top: 100%; / * (1: 1) * 100% * /)
Ülaltoodud tehnoloogia rakendamine Bootstrapi karusselli loomiseks
Kui te pole Bootstrapiga tuttav ja soovite teada, mis see on, saate tutvuda meie Bootstrapi sissejuhatusega.
Vaatame näidet, kus ülaltoodud HTML -struktuuri ja CSS -koodi kasutatakse Bootstrapi karussellide slaidide kuvamiseks.
Kasutame piltidena järgmisi faile:
- karussell_1.jpg (laius = 736 pikslit, kõrgus = 552 pikslit, kuvasuhe (kõrgus ja laius) = 1,33);
- karussell_2.jpg (laius = 1155 pikslit, kõrgus = 1280 pikslit, kuvasuhe (kõrgus ja laius) = 0,9);
- karussell_3.jpg (laius = 1846 pikslit, kõrgus = 1028 pikslit, kuvasuhe (kõrgus ja laius) = 1,8);
- karussell_4.jpg (laius = 1140 pikslit, kõrgus = 550 pikslit, kuvasuhe (kõrgus ja laius) = 2,07);
- karussell_5.jpg (laius = 800 pikslit, kõrgus = 600 pikslit, kuvasuhe (kõrgus ja laius) = 1,33);
Seame pildid taustaks. See võimaldab Bootstrap 3 karussellis kasutada erineva kuvasuhtega pilte.
Karusselli HTML -märgistus:
Karusselli CSS -kood:
Üksusele reageeriv (positsioon: suhteline; / * suhteline positsioneerimine * /). Üksusele reageeriv: enne (kuva: plokk; / * renderduselement plokina * / sisu: ""; / * pseudoelemendi sisu * / laius: 100 %; / * elemendi laius * /) .tem-16by9 (polsterdatud ülaosa: 56,25%; / * (9:16) * 100% * /). üksusele reageeriv>> sisu elemendist * / / * elemendi asukoht * / ülemine: 0; vasak: 0; parem: 0; alumine: 0; tausta suurus: kate! oluline;)
Vaikimisi kasutatakse plokielementide puhul automaatset laiust. See tähendab, et elementi venitatakse horisontaalselt täpselt nii palju, kui on vaba ruumi. Plokielementide vaikekõrgus määratakse automaatselt, s.t. brauser sirutab sisuala vertikaalselt, et kuvada kogu sisu. Elemendi sisualale kohandatud mõõtmete määramiseks võite kasutada laiuse ja kõrguse atribuute.
Atribuut laius CSS võimaldab teil määrata elemendi sisuala laiuse ja atribuut kõrgus võimaldab määrata sisuala kõrguse.
Pange tähele, et laiuse ja kõrguse omadused määravad ainult sisuala suuruse; plokielemendi kogulaiuse arvutamiseks lisage sisuala laius, vasak ja parem polster ning vasaku ja parema piiri laius. Sama kehtib ka elemendi kogukõrguse kohta, ainult kõik väärtused arvutatakse vertikaalselt:
Selle lõigu jaoks määrame ainult laiuse ja kõrguse.
See lõik sisaldab lisaks laiusele ja kõrgusele polsterdust, äärist ja polsterdust.
Proovige "Näide näitab selgelt, et teine element võtab rohkem ruumi kui esimene. Kui arvutate meie valemi järgi, on esimese lõigu mõõtmed 150x100 pikslit ja teise lõigu mõõtmed:
| Üldine kõrgus: | 5 pikslit | + | 10 pikslit | + | 100 pikslit | + | 10 pikslit | + | 5 pikslit | = 130 pikslit |
| ülemine raami | ülemine taane | kõrgus | madalam taane | alt raami |
ehk 180x130 pikslit.
Elementide ülevool
Pärast elemendi laiuse ja kõrguse määratlemist tasub pöörata tähelepanu ühele olulisele punktile - elemendi sees olev sisu võib ületada määratud ploki suurust. Sel juhul läheb osa sisust kaugemale elemendi piiridest, selle ebameeldiva hetke vältimiseks võite kasutada CSS -i ülevoolu atribuuti. Ülevoolu atribuut ütleb brauserile, mida teha, kui ploki sisu ületab selle suurust. Sellel atribuudil võib olla üks neljast väärtusest.
- nähtav on brauseri kasutatav vaikeväärtus. Selle väärtuse määramisel on sama mõju kui ületäitmise atribuudi määramata jätmisel.
- kerimine - lisab elemendile vertikaalsed ja horisontaalsed kerimisribad.
- auto - lisab kerimisribasid vastavalt vajadusele.
- peidetud - peidab osa sisust, mis väljub plokielemendi piiridest.
Kirjeldus
Määrab ploki või vahetatavate elementide kõrguse (näiteks sildi ). Kõrgus ei hõlma elemendi, polstri ja veeriste ümbritsevate ääriste paksust.
Kui ploki sisu ületab määratud kõrguse, jääb elemendi kõrgus muutumatuks ja sisu kuvatakse selle peal. See funktsioon võib põhjustada elementide sisu kattumist, kui HTML -koodi elemendid on järjestikused. Selle vältimiseks lisage elemendi stiilile ülevool: auto.
Süntaks
kõrgus: väärtus | intress | auto | pärida
Väärtused
Väärtustena aktsepteeritakse kõiki CSS-is aktsepteeritud pikkusühikuid- näiteks piksleid (px), tolli (in), punkte (pt) jne. Protsendimärkide kasutamisel arvutatakse elemendi kõrgus sõltuvalt vanem element. Kui vanem pole selgesõnaliselt määratud, kasutatakse selle vanemana brauseriakent. auto määrab kõrguse vastavalt elemendi sisule
HTML5 CSS2.1 IE Cr Op Sa Fx
Selle näite tulemus on näidatud joonisel fig. 1.
Riis. 1. Kõrguse omaduse rakendamine
Objekti mudel
document.getElementById ("elementID") .style.height
Brauserid
Internet Explorer 6 määratleb kõrguse valesti min-kõrgusena.
Pöörderežiimis arvutab Internet Explorer kuni versioonini 8.0 (kaasa arvatud) valesti elemendi kõrguse, lisamata sellele polsterdus-, veeris- ja äärisväärtusi.
Internet Explorer kuni versioonini 7.0 (kaasa arvatud) ei toeta pärimisväärtust.
The kõrgus CSS -atribuut määrab elemendi kõrguse. Vaikimisi määratleb atribuut sisuala kõrguse. Kui kasti suuruse määramine on aga piirikast, määrab see hoopis piiriala kõrguse.
Selle interaktiivse näite allikas on salvestatud GitHubi hoidlasse. Kui soovite interaktiivsete näidete projektile kaasa aidata, kloonige palun https://github.com/mdn/interactive-examples ja saatke meile tõmbetaotlus.
Min-kõrguse ja max kõrguse omadused tühistavad kõrguse.
Süntaks
/ * Märksõna väärtus * / kõrgus: auto; / *Väärtused
CSS andmetüüp tähistab kauguse väärtust. Pikkusi saab kasutada paljudes CSS-atribuutides, nagu laius, kõrgus, veerised, polsterdus, äärise laius, fondi suurus ja teksti vari. ">Formaalne süntaks
Näide
Html
CSS
div (laius: 250 pikslit; veerise allosa: 5 pikslit; ääris: 2 pikslit sinine;) #kõrgem (kõrgus: 50 pikslit;) #lühike (kõrgus: 25 pikslit;) #vanem (kõrgus: 100 pikslit;) ; laius: 75%;)Tulemus
Juurdepääsetavuse probleemid
Veenduge, et kõrgusega seatud elemendid pole kärbitud ja / või ei varja muud sisu, kui leht teksti suurendamiseks suumitakse.
Tehnilised andmed
| Spetsifikatsioon | Olek | Kommenteeri |
|---|---|---|
| CSS sisemise ja välise suuruse moodul 4. tase |
Toimetaja mustand | |
| CSS sisemise ja välise suuruse moodul 3. tase Kõrguse määratlus selles spetsifikatsioonis. |
Töö mustand | Lisatud maksimaalse, minimaalse ja sobiva sisuga märksõnad. |
| CSS üleminekud Kõrguse määratlus selles spetsifikatsioonis. |
Töö mustand | Loetleb animeeritava kõrguse. |
| CSS 2. tase (1. versioon) Kõrguse määratlus selles spetsifikatsioonis. |
Soovitus | Lisab toe CSS -i andmetüübile, mis tähistab kauguse väärtust. Pikkusi saab kasutada paljudes CSS-atribuutides, nagu laius, kõrgus, veerised, polsterdus, äärise laius, fondi suurus ja teksti vari. "> |
| CSS 1. tase Kõrguse määratlus selles spetsifikatsioonis. |
Soovitus | Esialgne määratlus. |
| Algne väärtus | auto |
|---|---|
| Kehtib | kõik elemendid, välja arvatud asendamata tekstielemendid, tabeliveerud ja veerugrupid |
| Päritud | ei |
| Protsendid | Protsent arvutatakse genereeritud kasti sisaldava ploki kõrguse järgi. Kui sisaldava ploki kõrgus pole selgesõnaliselt määratud (st see sõltub sisu kõrgusest) ja see element pole absoluutselt paigutatud, arvutab väärtus juurelemendi protsentuaalne kõrgus on esialgse sisaldava ploki suhtes. |
| Meedia | visuaalne |
| Arvutatud väärtus | protsent või automaatne või absoluutne pikkus |
| Animatsiooni tüüp | CSS-i andmetüüp interpoleeritakse reaalsete ujukomaarvudena. "> pikkus, CSS-i andmetüüp interpoleeritakse reaalsete, ujukomaarvudena."> protsent või calc (); |
| Kanooniline järjekord | formaalse grammatikaga määratletud ainulaadne mitmetähenduslik järjekord |
Brauseri ühilduvus
Selle lehe ühilduvustabel luuakse struktureeritud andmetest. Kui soovite andmetega kaasa aidata, vaadake aadressi https://github.com/mdn/browser-compat-data ja saatke meile tõmbetaotlus.
Värskendage GitHubi ühilduvusandmeid
| Töölaud | Mobiilne | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Ooper | Safari | Androidi veebivaade | Chrome Androidile | Firefox Androidile | Opera Androidile | Safari iOS -is | Samsungi Internet | |
| kõrgus | Chrome'i täielik tugi 1 | Edge Täielik tugi 12 | Firefoxi täielik tugi 1 | IE täielik tugi 4 | Opera täielik tugi 7 | Safari täielik tugi 1 | WebView Androidi täielik tugi 1 | Chrome Androidi täielik tugi 18 | Firefox Androidi täielik tugi 4 | Opera Android Täielik tugi 10.1 | Safari iOS täielik tugi 1 | Samsung Internet Android Täielik tugi 1.0 |
| sobiv sisu | Chrome'i täielik tugi 46 | Serv puudub tugi Ei | Firefox Ei toeta Ei | IE Ei toeta Ei | Opera täielik tugi 33 | Safari Täielik tugi 11 Täielik tugi 11 Täielik tugi 9 Eesliide Eesliide | Opera Android? | Safari iOS Täielik tugi 11 Täielik tugi 11 Täielik tugi 9 Eesliide Eesliide Rakendatud müüja eesliitega: -webkit- | ||||
| max-sisu | Chrome'i täielik tugi 46 | Serv puudub tugi Ei | Eesliide Eesliide | IE Ei toeta Ei | Opera täielik tugi 44 | Safari täielik tugi 11 | WebView Androidi täielik tugi 46 | Chrome Androidi täielik tugi 46 | Eesliide Eesliide Rakendatud müüja eesliitega: -moz- | Samsung Internet Android Täielik tugi 5.0 | ||
| min-sisu | Chrome'i täielik tugi 46 | Serv puudub tugi Ei | Firefoxi täielik tugi 66 Täielik tugi 66 Täielik tugi 3 Eesliide Eesliide Rakendatud müüja eesliitega: -moz- | IE Ei toeta Ei | Opera täielik tugi 44 | Safari täielik tugi 11 | WebView Androidi täielik tugi 46 | Chrome Androidi täielik tugi 46 | Firefox Android Täielik tugi 66 Täielik tugi 66 Täielik tugi 4 Eesliide Eesliide Rakendatud müüja eesliitega: -moz- | Opera Androidi täielik tugi 43 | Safari iOS täielik tugi 11 | Samsung Internet Android Täielik tugi 5.0 |
| venitada | Chrome'i täielik tugi 28 Veebikomplekti täitmine saadaval"> Alternatiivne nimi Täielik tugi 28Veebikomplekti täitmine saadaval"> Alternatiivne nimi Veebikomplekti täitmine saadaval"> Alternatiivne nimi | Serv puudub tugi Ei | Firefox Ei toeta Ei | IE Ei toeta Ei | Opera täielik tugi 15 Veebikomplekti täitmine saadaval"> Alternatiivne nimi Täielik tugi 15Veebikomplekti täitmine saadaval"> Alternatiivne nimi Veebikomplekti täitmine saadaval"> Alternatiivne nimi Kasutab mittestandardset nime: -webkit-fill-available | Safari täielik tugi 9 Veebikomplekti täitmine saadaval"> Alternatiivne nimi Täielik tugi 9Veebikomplekti täitmine saadaval"> Alternatiivne nimi Veebikomplekti täitmine saadaval"> Alternatiivne nimi Kasutab mittestandardset nime: -webkit-fill-available | WebView Android Täielik tugi 4.4 Veebikomplekti täitmine saadaval"> Alternatiivne nimi Täielik tugi 4.4Veebikomplekti täitmine saadaval"> Alternatiivne nimi Veebikomplekti täitmine saadaval"> Alternatiivne nimi Kasutab mittestandardset nime: -webkit-fill-available | Chrome Androidi täielik tugi 28 Veebikomplekti täitmine saadaval"> Alternatiivne nimi Täielik tugi 28Veebikomplekti täitmine saadaval"> Alternatiivne nimi Veebikomplekti täitmine saadaval"> Alternatiivne nimi Kasutab mittestandardset nime: -webkit-fill-available | Firefox Android Ei toeta Ei | Opera Android? | Safari iOS täielik tugi 9 Veebikomplekti täitmine saadaval"> Alternatiivne nimi Täielik tugi 9Veebikomplekti täitmine saadaval"> Alternatiivne nimi Veebikomplekti täitmine saadaval"> Alternatiivne nimi Kasutab mittestandardset nime: -webkit-fill-available | Samsung Internet Android Täielik tugi 5.0 Veebikomplekti täitmine saadaval"> Alternatiivne nimi Täielik tugi 5.0Veebikomplekti täitmine saadaval"> Alternatiivne nimi Veebikomplekti täitmine saadaval"> Alternatiivne nimi Kasutab mittestandardset nime: -webkit-fill-available |
