Elementa augstums un platums ir aprēķinātas vērtības. Katrs tīmekļa lapas elements veido taisnstūrveida apgabalu, kas savukārt sastāv no vairākām zonām - satura apgabals (saturs), polsterējuma vietas, rāmja laukumi un lauka platības elements.
Starp elementa saturu un tā robežu atrodas ievilkums polsterējums ārpus elementa robežas - lauki rezerve. Katram elementam ir satura apgabals, citi apgabali nav obligāti.
Rīsi. 1. Elementa bloka modelis 1. Elementa augstums
Augstuma rekvizīts nosaka bloka elementa satura augstumu un neietekmē iekļauto elementu displeju: inline; ... Iekļauto elementu augstums ir vienāds ar to satura augstumu. Negatīvas vērtības nav atļautas. Īpašums netiek mantots.
Sintakse
P (augstums: 100 pikseļi;)
2. Preces platums
Platuma rekvizīts nosaka bloka elementa satura platumu un neietekmē iekļauto elementu displeju: inline; ... Iekļauto elementu platums ir vienāds ar to saturu. Negatīvas vērtības nav atļautas. Īpašums netiek mantots.
Sintakse
P (platums: 100 pikseļi;)
3. Absolūti novietota elementa augstums un platums
Iestatiet absolūti novietota elementa pozīcijas platumu un augstumu: absolūts; ne vienmēr ir nepieciešams, jo šajā gadījumā augstumu un platumu netieši nosaka elementa nobīde. Ja elementam ir norādītas robežas un piemales, tās samazina satura apgabala lielumu par atbilstošām vērtībām.
Div (fons: # 6A7690; pozīcija: absolūta; augšā: 0; apakšā: 0; pa kreisi: 50%; pa labi: 0;) / * šajā gadījumā elementa augstums ir 100%, platums ir 50%no vecākā bloka * / 
Rīsi. 2. Absolūti novietota elementa augstums un platums
4. Elementa atkāpes
Izmantojot polsterējuma īpašību, jūs varat iestatīt polsterējumu vairākām elementa pusēm vienlaikus šādā secībā :. Ja elementam ir fons, tas attieksies arī uz polsterējumu. Negatīvas vērtības nav atļautas. Īpašums netiek mantots.
Ja ir norādītas trīs vērtības, piemēram, div (polsterējums: 10 pikseļi 20 pikseļi 30 pikseļi;), tad tās tiks sadalītas šādā secībā: pirmā vērtība ir augšējais polsterējums, otrā ir labās un kreisās puses polsterējums, un trešais ir apakšējais polsterējums.
Ja ir norādītas divas vērtības, piemēram, div (polsterējums: 10 pikseļi 20 pikseļi;), tad pirmā iestatīs augšējo un apakšējo polsterējumu, otrā - labo un kreiso.
Viena vērtība, piemēram, div (polsterējums: 10 pikseļi;), iestatīs vienādu 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. Elementa vienas puses atkāpe
Lai polsterējumu iestatītu tikai vienā elementa pusē, jums jāizmanto viena no polsterējuma augšpuses, polsterējuma labās, polsterējuma apakšējās, polsterējuma kreisās puses īpašībām, piemēram:
P (polsterējums pa kreisi: 10 pikseļi;)
5. Elementu lauki
Lielākā daļa elementu ir atdalīti viens no otra ar malām. Piemales rekvizīts ir saīsināta forma, lai rakstītu elementa piemales šādā secībā: augšā, pa labi, apakšā, pa kreisi... To izmanto, ja jums ir jānorāda piemales no vairākām pusēm, bet ne obligāti no četrām pusēm. Bloku elementu vertikāli blakus esošās piemales ir sakļautas, un augšējās un apakšējās malas neietekmē iekļautos elementus. Ir atļautas negatīvas vērtības. Īpašums netiek mantots.
Ja ir norādītas trīs vērtības, piemēram, div (piemale: 10 pikseļi 20 pikseļi 30 pikseļi;), tad tās tiks sadalītas šādā secībā: pirmā vērtība ir augšējā mala, otrā - labā un kreisā mala, un trešā ir apakšējā rezerve.
Ja ir norādītas divas vērtības, piemēram, div (mala: 10 pikseļi 20 pikseļi;), tad pirmā noteiks augšējo un apakšējo malu, otrā - labo un kreiso.
Viena vērtība, piemēram, div (piemale: 10 pikseļi;), noteiks vienādas piemales visās elementa pusēs.
(piemale: 0 auto;) darbosies tikai tad, ja elementa platums ir skaidri iestatīts.
Rīsi. 3. mala: auto; absolūti novietotam elementam Sintakse
Div (mala: 5 pikseļi 10 pikseļi 2 pikseļi 5 pikseļi;)
5.1. Malas elementa vienā pusē
Augšējās malas, labās malas, labās malas un apakšējās malas kreisās puses rekvizīti kontrolē atbilstošās piemales katrā elementa pusē, piemēram:
P (mala pa kreisi: 10 pikseļi;)
6. Platuma un augstuma ierobežošana
CSS atbalsta arī dažus citus rekvizītus, kas saistīti ar tīmekļa lapas elementu augstuma un platuma iestatīšanu: min-height, min-width, max-height un max-width. Šīs īpašības ļauj iestatīt minimālās un maksimālās elementa platuma vai augstuma vērtības, dodot elementam iespēju aizpildīt pieejamo vietu. Rekvizīti bieži tiek izmantoti atsaucīgai tīmekļa lapas noformēšanai. Attiecas uz visiem elementiem, izņemot iekļautos un tabulas elementus. Viņi vienmēr ievēro galveno noteikumu, t.i. pēc elementa augstuma vai platuma piešķiršanas. Nav mantots.
Jūs varat norādīt parastos izmērus, izmantojot dažas mērvienības, un lieluma ierobežojumus, izmantojot citas vienības, piemēram:
Div (platums: 400 pikseļi; maksimālais platums: 50%;)
Elementa platums būs 400 pikseļi tikai tad, ja šī vērtība nepārsniegs 50% no konteinera bloka platuma, pretējā gadījumā tā platums tiks samazināts.
Šajā rakstā mēs apskatīsim, kā jūs varat iestatīt bloka augstumu procentos no tā platuma CSS. Apskatīsim šīs tehnoloģijas pielietojumu, izmantojot piemēru, kā izveidot Bootstrap karuseli (slīdni) no dažāda izmēra attēliem.
Bloka izveidošana ar augstumu, kuram ir noteikts procents no tā platuma
- Izveidojiet HTML struktūru no 2 blokiem:
Pirmajā blokā ir 2 klases. Izmantojot klasi, kas reaģē uz vienumu, mēs iestatīsim bloka relatīvo novietojumu. Tas jādara tā, lai 2 bloks (kuram būs absolūta pozicionēšana) atrastos attiecībā pret to. Turklāt šo klasi izmanto arī, lai pirms atbilstošo elementu satura pievienotu: pirms pseidoelementa (reaģē uz vienumu). Šis elements iestatīs vēlamo kastes augstumu attiecībā pret tās platumu, izmantojot polsterētā CSS īpašību. Šīs metodes viltība ir tāda, ka, ja polsterējuma rekvizīts ir iestatīts uz nevis pikseļos, bet procentos, tad pārlūkprogramma to aprēķinās attiecībā pret tā platumu... Tādējādi ir iespējams iegūt bloku ar nepieciešamo augstumu. Nākamais solis ir piešķirt 2. blokam absolūtu pozicionēšanu un saskaņot to ar pirmo bloku.
- Pievienojiet lapai šādu CSS: .item-responsive (pozīcija: relatīvā; / * relatīvā pozicionēšana * /) .item-adaptive: before (display: block; / * atveidot elementu kā bloku * / saturs: ""; / * satura pseidoelements * / platums: 100%; / * elementa platums * /). tēma-16by9 (polsterējums-augšdaļa: 56,25%; / * (9:16) * 100% * /). uz preci reaģējošs> . saturs (pozīcija: absolūta; / * elementa absolūtā pozīcija * / / * elementa pozīcija * / augšā: 0; pa kreisi: 0; pa labi: 0; apakšā: 0;) / * Ja nepieciešams (blokiem ar šiem klases) * / .item -4by3 (polsterējums augšpusē: 75%; / * (3: 4) * 100% * /) .tems-2by1 (polsterējums: 50%; / * (1: 2) * 100 % * /). vienums -1by1 (polsterējums: 100%; / * (1: 1) * 100% * /)
Izmantojot iepriekš minēto tehnoloģiju, lai izveidotu Bootstrap karuseli
Ja neesat pazīstams ar Bootstrap un vēlaties uzzināt, kas tas ir, varat iepazīties ar mūsu ievadu Bootstrap.
Apskatīsim piemēru, kur Bootstrap karuseļa slaidu parādīšanai tiks izmantota iepriekš minētā HTML struktūra un CSS kods.
Kā attēlus mēs izmantosim šādus failus:
- karuselis_1.jpg (platums = 736 pikseļi, augstums = 552 pikseļi, malu attiecība (augstums un platums) = 1,33);
- karuselis_2.jpg (platums = 1155 pikseļi, augstums = 1280 pikseļi, malu attiecība (augstums un platums) = 0,9);
- karuselis_3.jpg (platums = 1846 pikseļi, augstums = 1028 pikseļi, malu attiecība (augstums un platums) = 1,8);
- karuselis_4.jpg (platums = 1140 pikseļi, augstums = 550 pikseļi, malu attiecība (augstums un platums) = 2,07);
- karuselis_5.jpg (platums = 800 pikseļi, augstums = 600 pikseļi, malu attiecība (augstums un platums) = 1,33);
Mēs iestatīsim attēlus kā fonu. Tas ļaus Bootstrap 3 karuselī izmantot attēlus ar dažādām malu attiecībām.
Karuseļa HTML marķējums:
Karuseļa CSS kods:
Vienumam atbilstošs (pozīcija: relatīvs; / * relatīvais pozicionējums * /). Uz vienumu atsaucīgs: pirms (displejs: bloks; / * renderēšanas elements kā bloks * / saturs: ""; / * pseidoelementa saturs * / platums: 100 %; / * elementa platums * /). tēma-16by9 (polsterējums augšpusē: 56,25%; / * (9:16) * 100% * /). uz vienību reaģējošs> .saturs (pozīcija: absolūts; / * absolūtā pozīcija no elementa * / / * elementa pozīcijas * / augšā: 0; pa kreisi: 0; pa labi: 0; apakšā: 0; fona izmērs: vāks! svarīgi;)
Pēc noklusējuma bloka elementiem tiek izmantots automātiskais platums. Tas nozīmē, ka elements tiks izstiepts horizontāli tieši tik daudz, cik ir brīvas vietas. Bloka elementu noklusējuma augstums tiek iestatīts automātiski, t.i. pārlūkprogramma paplašina satura apgabalu vertikāli, lai parādītu visu saturu. Lai iestatītu pielāgotus izmērus elementa satura apgabalam, varat izmantot platuma un augstuma rekvizītus.
Platuma CSS rekvizīts ļauj iestatīt elementa satura apgabala platumu, un augstuma rekvizīts ļauj iestatīt satura apgabala augstumu:
Ņemiet vērā, ka platuma un augstuma rekvizīti nosaka tikai satura apgabala lielumu; lai aprēķinātu bloka elementa kopējo platumu, pievienojiet satura apgabala platumu, kreiso un labo polsterējumu un kreisās un labās apmales platumu. Tas pats attiecas uz elementa kopējo augstumu, tikai visas vērtības tiek aprēķinātas vertikāli:
Šajā rindkopā mēs iestatīsim tikai platumu un augstumu.
Šajā rindkopā papildus platumam un augstumam ir polsterējums, apmale un polsterējums.
Izmēģiniet "Piemērs skaidri parāda, ka otrais elements aizņem vairāk vietas nekā pirmais. Ja jūs aprēķināt pēc mūsu formulas, tad pirmās rindkopas izmēri ir 150x100 pikseļi, bet otrās rindkopas izmēri:
| Kopējais augstums: | 5 pikseļi | + | 10 pikseļi | + | 100 pikseļi | + | 10 pikseļi | + | 5 pikseļi | = 130 pikseļi |
| augšējā rāmis | augšējā atkāpe | augstums | zemāks atkāpe | apakšā rāmis |
tas ir, 180x130 pikseļi.
Elementu pārpilde
Kad esat definējis elementa platumu un augstumu, ir vērts pievērst uzmanību vienam svarīgam punktam - saturs, kas atrodas elementa iekšpusē, var pārsniegt norādīto bloka izmēru. Šajā gadījumā daļa satura pārsniegs elementa robežas, lai izvairītos no šī nepatīkamā brīža, varat izmantot CSS pārpildes īpašumu. Pārpildes rekvizīts norāda pārlūkprogrammai, kā rīkoties, ja bloka saturs pārsniedz tā lielumu. Šim īpašumam var būt viena no četrām vērtībām:
- redzama ir pārlūkprogrammas izmantotā noklusējuma vērtība. Šīs vērtības iestatīšanai būs tāds pats efekts kā pārplūdes rekvizīta neiestatīšanai.
- ritināt - elementam pievieno vertikālas un horizontālas ritjoslas.
- auto - pēc vajadzības pievieno ritjoslas.
- slēpts - slēpj daļu satura, kas pārsniedz bloka elementa robežas.
Apraksts
Iestata bloka vai nomaināmu elementu augstumu (piemēram, tagu ). Augstumā neietilpst ap elementu, polsterējumu un malām esošo malu biezums.
Ja bloka saturs pārsniedz norādīto augstumu, tad elementa augstums nemainīsies un saturs tiks parādīts tā augšpusē. Šī funkcija var izraisīt elementu satura pārklāšanos, ja elementi HTML kodā ir secīgi. Lai tas nenotiktu, elementa stilam pievienojiet pārpildi: auto.
Sintakse
augstums: vērtība | procenti | auto | mantot
Vērtības
Visas CSS pieņemtās garuma vienības tiek pieņemtas kā vērtības- piemēram, pikseļi (px), collas (in), punkti (pt) utt. Izmantojot procentuālo apzīmējumu, elementa augstums tiek aprēķināts atkarībā no augstuma vecāku elements. Ja vecāks nav skaidri norādīts, tad kā vecāks tiek izmantots pārlūkprogrammas logs. automātiski iestata augstumu, pamatojoties uz elementa saturu
HTML5 CSS2.1 IE Cr Op Sa Fx
Šī piemēra rezultāts ir parādīts attēlā. 1.
Rīsi. 1. Augstuma rekvizīta pielietošana
Objekta modelis
document.getElementById ("elementID") .style.height
Pārlūkprogrammas
Internet Explorer 6 nepareizi definē augstumu kā minimālo augstumu.
Dīvainā režīmā programma Internet Explorer līdz versijai 8.0 (ieskaitot) nepareizi aprēķina elementa augstumu, nepievienojot tam polsterējumu, piemali un apmales vērtības.
Internet Explorer līdz versijai 7.0 (ieskaitot) neatbalsta mantoto vērtību.
The augstums CSS rekvizīts norāda elementa augstumu. Pēc noklusējuma rekvizīts nosaka satura apgabala augstumu. Tomēr, ja lodziņa izmērs ir iestatīts uz robežas lodziņu, tas nosaka robežas apgabala augstumu.
Šī interaktīvā piemēra avots tiek glabāts GitHub repozitorijā. Ja vēlaties piedalīties interaktīvo piemēru projektā, lūdzu, klonējiet vietni https://github.com/mdn/interactive-examples un nosūtiet mums pieprasījumu.
Minimālā un maksimālā augstuma rekvizīti ignorē augstumu.
Sintakse
/ * Atslēgvārda vērtība * / augstums: auto; / *Vērtības
CSS datu tips apzīmē attāluma vērtību. Garumus var izmantot daudzos CSS rekvizītos, piemēram, platumā, augstumā, malā, polsterējumā, apmales platumā, fonta lielumā un teksta ēnā. ">Formālā sintakse
Piemērs
Html
CSS
div (platums: 250 pikseļi; apakšējā mala: 5 pikseļi; apmale: 2 pikseļi vienkrāsaini zils;) #augstāks (augstums: 50 pikseļi;) #īss (augstums: 25 pikseļi;) #vecāks (augstums: 100 pikseļi;) ; platums: 75%;)Rezultāts
Pieejamības problēmas
Pārliecinieties, ka elementi, kas iestatīti ar augstumu, nav saīsināti un / vai neaizēno citu saturu, kad lapa tiek palielināta, lai palielinātu teksta izmēru.
Specifikācijas
| Specifikācija | Statuss | Komentēt |
|---|---|---|
| CSS iekšējais un ārējais lieluma noteikšanas modulis, 4. līmenis |
Redaktora melnraksts | |
| CSS iekšējais un ārējais lieluma noteikšanas modulis, 3. līmenis "Augstuma" definīcija šajā specifikācijā. |
Darba projekts | Pievienoti maksimālā satura, minimālā satura, atbilstošā satura atslēgvārdi. |
| CSS pārejas "Augstuma" definīcija šajā specifikācijā. |
Darba projekts | Uzskaita augstumu kā animējamu. |
| CSS 2. līmenis (1. pārskatīšana) "Augstuma" definīcija šajā specifikācijā. |
Ieteikums | Pievieno atbalstu CSS datu tipam, kas attēlo attāluma vērtību. Garumus var izmantot daudzos CSS rekvizītos, piemēram, platumā, augstumā, malā, polsterējumā, apmales platumā, fonta lielumā un teksta ēnā. "> |
| CSS 1. līmenis "Augstuma" definīcija šajā specifikācijā. |
Ieteikums | Sākotnējā definīcija. |
| Sākotnējā vērtība | auto |
|---|---|
| Attiecas uz | visi elementi, izņemot neaizstātos rindas elementus, tabulas kolonnas un kolonnu grupas |
| Mantojis | Nē |
| Procenti | Procentuālā daļa tiek aprēķināta, ņemot vērā ģenerētās kastes saturošā bloka augstumu. Ja satura bloka augstums nav skaidri norādīts (ti, tas ir atkarīgs no satura augstuma) un šis elements nav absolūti novietots, vērtība tiek aprēķināta saknes elementa augstums procentos ir salīdzinājumā ar sākotnējo saturējošo bloku. |
| Plašsaziņas līdzekļi | vizuāls |
| Aprēķinātā vērtība | procentu vai auto vai absolūtais garums |
| Animācijas veids | CSS datu tips tiek interpolēts kā reāli, peldošā komata skaitļi. "> garums, CSS datu tips tiek interpolēts kā reāli, peldošā komata skaitļi."> procents vai aprēķins (); |
| Kanoniskā kārtība | formālās gramatikas definētā unikālā, neskaidrā secība |
Pārlūkprogrammas saderība
Šajā lapā esošā saderības tabula tiek ģenerēta no strukturētiem datiem. Ja vēlaties sniegt ieguldījumu datu apkopošanā, lūdzu, apmeklējiet vietni https://github.com/mdn/browser-compat-data un nosūtiet mums pieprasījumu.
Atjauniniet saderības datus vietnē GitHub
| Darbvirsma | Mobilais | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android tīmekļa skats | Chrome operētājsistēmai Android | Firefox operētājsistēmai Android | Opera operētājsistēmai Android | Safari operētājsistēmā iOS | Samsung internets | |
| augstums | Pilns Chrome atbalsts 1 | Edge Pilns atbalsts 12 | Pilns Firefox atbalsts 1 | IE Pilns atbalsts 4 | Opera Pilns atbalsts 7 | Pilns Safari atbalsts 1 | WebView Android Pilns atbalsts 1 | Pilns Chrome Android atbalsts 18 | Firefox Android Pilns atbalsts 4 | Opera Android Pilns atbalsts 10.1 | Pilns Safari iOS atbalsts 1 | Samsung Internet Android Pilns atbalsts 1.0 |
| piemērots saturs | Pilns Chrome atbalsts 46 | Edge Nav atbalsta Nr | Firefox Nav atbalsta Nē | IE Nav atbalsta Nē | Opera Pilns atbalsts 33 | Pilns Safari atbalsts 11 Pilns atbalsts 11 Pilns atbalsts 9 Prefikss Prefikss | Opera Android? | Safari iOS Pilns atbalsts 11 Pilns atbalsts 11 Pilns atbalsts 9 Prefikss Prefikss Ieviests ar pārdevēja prefiksu: -webkit- | ||||
| maksimālais saturs | Pilns Chrome atbalsts 46 | Edge Nav atbalsta Nr | Prefikss Prefikss | IE Nav atbalsta Nē | Opera Pilns atbalsts 44 | Pilns Safari atbalsts 11 | WebView Android Pilns atbalsts 46 | Chrome Android Pilns atbalsts 46 | Prefikss Prefikss Ieviests ar pārdevēja prefiksu: -moz- | Samsung Internet Android Pilns atbalsts 5.0 | ||
| min-saturs | Pilns Chrome atbalsts 46 | Edge Nav atbalsta Nr | Pilns Firefox atbalsts 66 Pilns atbalsts 66 Pilns atbalsts 3 Prefikss Prefikss Ieviests ar pārdevēja prefiksu: -moz- | IE Nav atbalsta Nē | Opera Pilns atbalsts 44 | Pilns Safari atbalsts 11 | WebView Android Pilns atbalsts 46 | Chrome Android Pilns atbalsts 46 | Firefox Android Pilns atbalsts 66 Pilns atbalsts 66 Pilns atbalsts 4 Prefikss Prefikss Ieviests ar pārdevēja prefiksu: -moz- | Opera Android Pilns atbalsts 43 | Safari iOS Pilns atbalsts 11 | Samsung Internet Android Pilns atbalsts 5.0 |
| stiept | Pilns Chrome atbalsts 28 Webkit-fill-available"> Alternatīvs nosaukums Pilns atbalsts 28Webkit-fill-available"> Alternatīvs nosaukums Webkit-fill-available"> Alternatīvs nosaukums | Edge Nav atbalsta Nr | Firefox Nav atbalsta Nē | IE Nav atbalsta Nē | Opera Pilns atbalsts 15 Webkit-fill-available"> Alternatīvs nosaukums Pilns atbalsts 15Webkit-fill-available"> Alternatīvs nosaukums Webkit-fill-available"> Alternatīvs nosaukums Tiek izmantots nestandarta nosaukums: -webkit-fill-available | Pilns Safari atbalsts 9 Webkit-fill-available"> Alternatīvs nosaukums Pilns atbalsts 9Webkit-fill-available"> Alternatīvs nosaukums Webkit-fill-available"> Alternatīvs nosaukums Tiek izmantots nestandarta nosaukums: -webkit-fill-available | WebView Android Pilns atbalsts 4.4 Webkit-fill-available"> Alternatīvs nosaukums Pilns atbalsts 4.4Webkit-fill-available"> Alternatīvs nosaukums Webkit-fill-available"> Alternatīvs nosaukums Tiek izmantots nestandarta nosaukums: -webkit-fill-available | Pilns Chrome Android atbalsts 28 Webkit-fill-available"> Alternatīvs nosaukums Pilns atbalsts 28Webkit-fill-available"> Alternatīvs nosaukums Webkit-fill-available"> Alternatīvs nosaukums Tiek izmantots nestandarta nosaukums: -webkit-fill-available | Firefox Android Nav atbalsta Nē | Opera Android? | Safari iOS Pilns atbalsts 9 Webkit-fill-available"> Alternatīvs nosaukums Pilns atbalsts 9Webkit-fill-available"> Alternatīvs nosaukums Webkit-fill-available"> Alternatīvs nosaukums Tiek izmantots nestandarta nosaukums: -webkit-fill-available | Samsung Internet Android Pilns atbalsts 5.0 Webkit-fill-available"> Alternatīvs nosaukums Pilns atbalsts 5.0Webkit-fill-available"> Alternatīvs nosaukums Webkit-fill-available"> Alternatīvs nosaukums Tiek izmantots nestandarta nosaukums: -webkit-fill-available |
