Տարրի բարձրությունը և լայնությունըհաշվարկված արժեքներ են: Վեբ էջի յուրաքանչյուր տարր կազմում է ուղղանկյուն տարածք, որն իր հերթին բաղկացած է մի քանի տարածքներից. բովանդակության տարածք (բովանդակություն), լիցքավորման տարածքներ, շրջանակային տարածքներեւ դաշտային տարածքներտարր.

Տարրի բովանդակության և դրա սահմանի միջև են նահանջլիցքավորում, տարրի սահմանից դուրս - դաշտերըլուսանցք Յուրաքանչյուր տարր ունի բովանդակության տարածք, մյուս ոլորտներն ընտրովի են:

Բրինձ 1. Արգելափակել տարրի մոդելը

1. Տարրի բարձրություն

Բարձրության հատկությունը սահմանում է բլոկի տարրի բովանդակության բարձրությունը և ազդեցություն չի ունենում ներկառուցված տարրերի ցուցադրման վրա. ... Ներկառուցված տարրերի բարձրությունը հավասար է դրանց բովանդակության բարձրությանը: Բացասական արժեքներն անթույլատրելի են: Գույքը ժառանգված չէ:

Շարահյուսություն

P (բարձրությունը ՝ 100px;)

2. Նյութի Լայնություն

Լայնության հատկությունը սահմանում է բլոկի տարրի բովանդակության լայնությունը և ազդեցություն չի ունենում ներկառուցված տարրերի ցուցադրման վրա. ... Ներքին տարրերն ունեն նույն լայնությունը, ինչ բովանդակությունը: Բացասական արժեքներն անթույլատրելի են: Գույքը ժառանգված չէ:

Շարահյուսություն

P (լայնությունը ՝ 100px;)

3. Բացարձակապես տեղադրված տարրի բարձրությունն ու լայնությունը

Սահմանեք բացարձակապես տեղադրված տարրի դիրքի լայնությունը և բարձրությունը `բացարձակ; միշտ չէ, որ անհրաժեշտ է, քանի որ այս դեպքում բարձրությունն ու լայնությունը անուղղակիորեն որոշվում են տարրի օֆսեթով: Եթե ​​տարրի համար սահմաններ և լուսանցքներ են նշվում, դրանք նվազեցնում են բովանդակության տարածքի չափը համապատասխան արժեքներով:

Div (ֆոն ՝ # 6A7690; դիրք ՝ բացարձակ; վերև ՝ 0; ներքև ՝ 0; ձախ ՝ 50%; աջ ՝ 0;) / * այս դեպքում տարրի բարձրությունը 100%է, լայնությունը ՝ մայր բլոկի 50% * /
Բրինձ 2. Բացարձակապես տեղադրված տարրի բարձրությունն ու լայնությունը

4. Տարրերի ներդիրներ

Օգտագործելով լիցքավորման հատկությունը, կարող եք միաժամանակ լրացնել տարրերի մի քանի կողմերի հետևյալ հաջորդականությամբ. Եթե ​​տարրն ունի նախապատմություն, այն կտարածվի նաև լիցքավորման վրա: Բացասական արժեքներն անթույլատրելի են: Գույքը ժառանգված չէ:

Եթե ​​տրված է երեք արժեք, օրինակ ՝ div (լրացում ՝ 10px 20px 30px;), ապա դրանք կբաշխվեն հետևյալ հաջորդականությամբ. երրորդը ներքևի լիցքն է:
Եթե ​​տրված է երկու արժեք, օրինակ ՝ div (լցոնում ՝ 10px 20px;), ապա առաջինը կկարգավորի վերևի և ներքևի ծածկոցը, երկրորդը ՝ աջը և ձախը:
Div- ի (լիցքավորումը `10px;) նման մի արժեք սահմանում է նույն լիցքը տարրի բոլոր կողմերում:

Շարահյուսություն

P (լիցքավորում ՝ 5px 10px 15px 10px;)

4.1. Տարրերի մի կողմի թեքում

Լիցքավորումը տարրի միայն մի կողմում տեղադրելու համար հարկավոր է օգտագործել լցոնման վերևի, լցոնման աջ, լցոնման ներքևի, լիցք-ձախ հատկություններից մեկը, օրինակ.

P (լիցք-ձախ ՝ 10px;)

5. Տարրերի դաշտեր

Տարրերի մեծ մասը միմյանցից բաժանված են լուսանցքներով: Մարժայի հատկությունը սղագրության ձև է ՝ տարրի լուսանցքը հետևյալ հաջորդականությամբ գրելու համար. վերև, աջ, ներքև, ձախ... Այն օգտագործվում է, երբ դուք պետք է նշեք լուսանցքները մի քանի կողմից, բայց ոչ պարտադիր չորս կողմից: Բլոկային տարրերի ուղղահայաց հարակից լուսանցքները փլուզված են, իսկ վերևի և ներքևի լուսանցքները ազդեցություն չունեն ներկառուցված տարրերի վրա: Բացասական արժեքները թույլատրվում են: Գույքը ժառանգված չէ:

Եթե ​​տրված է երեք արժեք, օրինակ ՝ div (լուսանցք ՝ 10px 20px 30px;), ապա դրանք կբաշխվեն հետևյալ հաջորդականությամբ. Առաջին արժեքը վերին լուսանցքն է, երկրորդը ՝ աջ և ձախ լուսանցքը, և երրորդը `ստորին լուսանցքն է:
Եթե ​​տրվում է երկու արժեք, օրինակ ՝ div (լուսանցք ՝ 10px 20px;), ապա առաջինը սահմանում է վերին և ստորին լուսանցքները, երկրորդը ՝ աջ և ձախ:
Div- ի (լուսանցք ՝ 10px;) նման մի արժեք սահմանում է նույն լուսանցքը տարրի բոլոր կողմերում:

(լուսանցքը `0 ավտոմատ;) կաշխատի միայն այն դեպքում, երբ տարրի լայնությունը հստակ սահմանված է:

Բրինձ 3. լուսանցք `ավտո; բացարձակապես տեղադրված տարրի համար

Շարահյուսություն

Div (լուսանցք ՝ 5px 10px 2px 5px;)

5.1. Լուսանցք տարրի մի կողմում

Մարժա-վերև, լուսանցք աջ, լուսանցք ներքև, լուսանցք ձախ հատկությունները վերահսկում են տարրի յուրաքանչյուր կողմի համապատասխան լուսանցքները, օրինակ.

P (լուսանցք-ձախ ՝ 10px;)

6. Լայնության և բարձրության սահմանափակում

CSS- ն նաև աջակցում է մի քանի այլ հատկությունների ՝ կապված վեբ էջի տարրերի բարձրությունն ու լայնությունը սահմանելուն ՝ min-height, min-width, max-height և max-width: Այս հատկությունները թույլ են տալիս սահմանել նվազագույն և առավելագույն արժեքներ տարրի լայնության կամ բարձրության համար ՝ տարրին տալով հնարավորություն լրացնել առկա տարածքը: Հատկությունները հաճախ օգտագործվում են արձագանքող վեբ էջերի ձևավորման համար: Կիրառվում է բոլոր տարրերի վրա, բացառությամբ ներկառուցված և աղյուսակի տարրերի: Նրանք միշտ հետևում են հիմնական կանոնին, այսինքն. տարրին բարձրություն կամ լայնություն տալուց հետո: Inherառանգական չէ:

Դուք կարող եք կանոնավոր չափեր սահմանել ՝ օգտագործելով որոշ չափման միավորներ, և չափերի սահմանափակումներ ՝ օգտագործելով այլ միավորներ, օրինակ ՝

Div (լայնությունը ՝ 400px; առավելագույն լայնությունը ՝ 50%;)

Տարրը կունենա 400px լայնություն միայն այն դեպքում, եթե այդ արժեքը չգերազանցի տարայի բլոկի լայնության 50% -ը, հակառակ դեպքում դրա լայնությունը կկրճատվի:

Այս հոդվածում մենք կանդրադառնանք, թե ինչպես կարող եք բլոկի բարձրությունը սահմանել որպես CSS- ում դրա լայնության տոկոս: Եկեք նայենք այս տեխնոլոգիայի կիրառմանը ՝ օգտագործելով տարբեր չափերի պատկերներից Bootstrap կարուսել (սահիկ):

Բլոկի ստեղծում բարձրությամբ, որն ունի իր լայնության որոշակի տոկոս

1. Ստեղծեք HTML կառուցվածք 2 բլոկներից.
   Առաջին բլոկն ունի 2 դաս: Օգտագործելով տարրերին արձագանքող դասը, մենք կկարգավորենք բլոկի հարաբերական դիրքը: Դա պետք է արվի այնպես, որ 2 բլոկը (որը կունենա բացարձակ դիրքավորում) տեղակայված լինի դրա համեմատ: Բացի այդ, այս դասը օգտագործվում է նաև ՝ մինչեւ կեղծ տարրը ՝ համապատասխան տարրերի բովանդակությունից առաջ (կետին արձագանքող) ավելացնելու համար: Այս տարրը սահմանելու է տուփի ցանկալի բարձրությունը ՝ համեմատած դրա լայնության հետ ՝ օգտագործելով լցոնման վերևում գտնվող CSS հատկությունը: Այս մեթոդի հնարքն այն է, որ եթե լիցքավորման հատկությունը սահմանվում է ոչ թե պիքսելներով, այլ տոկոսներով, ապա այն կհաշվարկվի բրաուզերի կողմից իր լայնության համեմատ... Այսպիսով, հնարավոր է ձեռք բերել անհրաժեշտ բարձրությամբ բլոկ: Հաջորդ քայլը 2 -րդ բլոկին տալ բացարձակ դիրքավորում և այն հավասարեցնել առաջին բլոկին:
2. Էջին ավելացրեք հետևյալ CSS- ը. / * բովանդակության կեղծ-տարր * / լայնություն ՝ 100%; / * տարրի լայնություն * /) .tim-16by9 (լիցքաթափում ՝ վերև ՝ 56.25%; / * (9:16) * 100% * /): տարրին արձագանքող> .բովանդակություն (դիրքը ՝ բացարձակ; / * տարրի բացարձակ դիրքը * / / * տարրի դիրքը * / վերև ՝ 0; ձախ ՝ 0; աջ ՝ 0; ներքև ՝ 0;) դասեր) * / .item -4by3 (լիցք-վերև ՝ 75%; / * (3: 4) * 100% * /): տարր-2by1 (լիցք-վերև ՝ 50%; / * (1: 2) * 100 % * /) .itim -1by1 (լիցք -վերև ՝ 100%; / * (1: 1) * 100% * /)

Կիրառելով վերը նշված տեխնոլոգիան ՝ Bootstrap կարուսել ստեղծելու համար

Եթե ​​դուք ծանոթ չեք Bootstrap- ին և ցանկանում եք իմանալ, թե ինչ է դա, կարող եք ծանոթանալ Bootstrap- ի մեր ներածությանը:

Եկեք նայենք մի օրինակ, որտեղ վերը նշված HTML կառուցվածքը և CSS ծածկագիրը կօգտագործվեն Bootstrap կարուսելի սլայդները ցուցադրելու համար:

Որպես պատկեր ՝ մենք կօգտագործենք հետևյալ ֆայլերը.

• carousel_1.jpg (լայնություն = 736px, բարձրություն = 552px, տեսքի հարաբերություն (բարձրություն լայնություն) = 1.33);
• carousel_2.jpg (լայնություն = 1155px, բարձրություն = 1280px, տեսքի հարաբերակցություն (բարձրություն դեպի լայնություն) = 0.9);
• carousel_3.jpg (լայնություն = 1846px, բարձրություն = 1028px, տեսքի հարաբերակցություն (բարձրություն լայնություն) = 1.8);
• carousel_4.jpg (լայնություն = 1140px, բարձրություն = 550px, տեսքի հարաբերակցություն (բարձրություն լայնություն) = 2.07);
• carousel_5.jpg (լայնություն = 800px, բարձրություն = 600px, չափի հարաբերություն (բարձրություն լայնություն) = 1.33);

Մենք պատկերները կդնենք որպես ֆոն: Սա թույլ կտա Bootstrap 3 կարուսելում տարբեր չափերի հարաբերակցություն ունեցող պատկերներ օգտագործել:

Կարուսելի HTML նշագրում.

Կարուսել CSS կոդ:

Նյութին արձագանքող (դիրքը ՝ հարաբերական; / * հարաբերական դիրքավորումը * /): տարրը ՝ նախապես (ցուցադրել ՝ արգելափակում; / * տարրը մատուցել որպես բլոկ * / բովանդակություն ՝ ""; / * կեղծ տարրի բովանդակություն * / լայնություն `100 %; / * տարրի լայնություն * /) .tim-16by9 (լիցք-վերև ՝ 56.25%; / * (9:16) * 100% * /): նյութին արձագանքող> .բովանդակություն (դիրքը ՝ բացարձակ; / * բացարձակ դիրք տարրի * / / * տարրի դիրքը * / վերև ՝ 0; ձախ ՝ 0; աջ ՝ 0; ներքև ՝ 0; ֆոնային չափ ՝ կազմ! կարևոր;)

Լռելյայն, բլոկի տարրերի համար օգտագործվում է autowidth- ը: Սա նշանակում է, որ տարրը հորիզոնականորեն կձգվի ճիշտ այնքան, որքան կա ազատ տարածք: Բլոկի տարրերի կանխադրված բարձրությունը ինքնաբերաբար սահմանվում է, այսինքն. դիտարկիչը ուղղահայաց ձգում է բովանդակության տարածքը `ամբողջ բովանդակությունը ցուցադրելու համար: Տարրի բովանդակության տարածքի համար անհատական ​​չափեր սահմանելու համար կարող եք օգտագործել լայնության և բարձրության հատկությունները:

Լայնության CSS հատկությունը թույլ է տալիս սահմանել տարրի բովանդակության տարածքի լայնությունը, իսկ բարձրության հատկությունը ՝ բովանդակության տարածքի բարձրությունը.

Նկատի ունեցեք, որ լայնության և բարձրության հատկությունները որոշում են միայն բովանդակության տարածքի չափը. Բլոկի տարրի ընդհանուր լայնությունը հաշվարկելու համար ավելացրեք բովանդակության տարածքի, ձախ և աջ ծածկույթի լայնությունը և ձախ և աջ եզրագծի լայնությունը: Նույնը վերաբերում է տարրի ընդհանուր բարձրությանը, միայն բոլոր արժեքները հաշվարկվում են ուղղահայաց.

Այս պարբերության համար մենք միայն լայնություն և բարձրություն ենք սահմանում:

Այս պարբերությունը, բացի լայնությունից և բարձրությունից, պարունակում է նաև լիցք, եզր և ծածկ:

Փորձիր "

Օրինակն ակնհայտորեն ցույց է տալիս, որ երկրորդ տարրը ավելի շատ տեղ է զբաղեցնում, քան առաջինը: Եթե ​​հաշվարկեք ըստ մեր բանաձևի, ապա առաջին պարբերության չափերն են 150x100 պիքսել, իսկ երկրորդ պարբերության չափերն են.

Ընդհանուր բարձրություն:	5 պիքսել	+	10 պիքսել	+	100 պիքսել	+	10 պիքսել	+	5 պիքսել	= 130 պիքսել
	վերին շրջանակ		վերին նահանջ		բարձրությունը		ավելի ցածր նահանջ		ներքև շրջանակ

այսինքն ՝ 180x130 պիքսել:

Տարրերի արտահոսք

Տարրի լայնությունը և բարձրությունը սահմանելուց հետո արժե ուշադրություն դարձնել մեկ կարևոր կետի `տարրի ներսում տեղակայված բովանդակությունը կարող է գերազանցել նշված բլոկի չափը: Այս դեպքում բովանդակության մի մասը դուրս կգա տարրի սահմաններից, այս տհաճ պահից խուսափելու համար կարող եք օգտագործել CSS- ի արտահոսքի հատկությունը: Overflow հատկությունը զննարկիչին ասում է, թե ինչ անել, եթե բլոկի բովանդակությունը գերազանցի իր չափը: Այս հատկությունը կարող է վերցնել չորս արժեքներից մեկը.

• տեսանելի է դիտարկիչի օգտագործած կանխադրված արժեքը: Այս արժեքը սահմանելը կունենա նույն ազդեցությունը, ինչ չի սահմանում արտահոսքի հատկությունը:
• ոլորել - տարրին ավելացնում է ուղղահայաց և հորիզոնական ոլորման տողեր:
• ավտոմատ - ըստ անհրաժեշտության ավելացնում է ոլորման տողերը:
• թաքնված - թաքցնում է բովանդակության մի մասը, որը դուրս է գալիս բլոկի տարրի սահմաններից:

Նկարագրություն

Սահմանում է բլոկի կամ փոխարինելի տարրերի բարձրությունը (օրինակ ՝ պիտակը) ): Բարձրությունը չի ներառում տարրի շուրջ սահմանների հաստությունը, լցոնման և լուսանցքների արժեքը:

Եթե ​​բլոկի պարունակությունը գերազանցում է նշված բարձրությունը, ապա տարրի բարձրությունը կմնա անփոփոխ, և բովանդակությունը կցուցադրվի դրա վերևում: Այս հատկությունը կարող է առաջացնել տարրերի բովանդակության համընկնում, երբ HTML կոդի տարրերը հաջորդական են: Դա կանխելու համար տարրի ոճին ավելացրեք overflow: auto:

Շարահյուսություն

բարձրությունը `արժեքը | տոկոս | մեքենա | ժառանգել

Արժեքները

CSS- ում ընդունված երկարության ցանկացած միավոր ընդունվում են որպես արժեքներ, օրինակ ՝ պիքսելներ (px), դյույմներ (in), միավորներ (pt) և այլն: ծնող տարրի: Եթե ​​ծնողը հստակ նշված չէ, ապա դիտարկիչի պատուհանը օգտագործվում է որպես դրա ծնող: ավտոմատ սահմանում է բարձրությունը ՝ ելնելով տարրի բովանդակությունից

HTML5 CSS2.1 IE Cr Op Sa Fx

Այս օրինակի արդյունքը ներկայացված է Նկ. 1.

Բրինձ 1. Բարձրության հատկության կիրառում

Օբյեկտի մոդել

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

Ննարկիչներ

Internet Explorer 6-ը սխալ է սահմանում բարձրությունը որպես նվազագույն բարձրություն:

Շշուկի ռեժիմում Internet Explorer- ը մինչև 8.0 -ը ներառյալ սխալ է հաշվարկում տարրի բարձրությունը ՝ առանց դրան ավելացնելով ծածկույթ, լուսանցք և եզրագծեր:

Internet Explorer- ը մինչև 7.0 տարբերակը ներառյալ չի ապահովում ժառանգական արժեքը:

The բարձրությունը CSS հատկությունը սահմանում է տարրի բարձրությունը: Լռելյայն, հատկությունը սահմանում է բովանդակության տարածքի բարձրությունը: Եթե ​​տուփի չափսերը սահմանվում են սահման-տուփ, այն փոխարենը որոշում է սահմանային գոտու բարձրությունը:

Այս ինտերակտիվ օրինակի աղբյուրը պահվում է GitHub պահոցում: Եթե ​​կցանկանայիք ներդրում ունենալ ինտերակտիվ օրինակների նախագծում, խնդրում ենք կլոնավորել https://github.com/mdn/interactive-example- ները և մեզ ուղարկել քաշման հարցում:

Min-height և max-height հատկությունները գերազանցում են բարձրությունը:

Շարահյուսություն

/ * Հիմնաբառի արժեքը * / բարձրությունը ՝ ավտո; / * արժեքներ* / բարձրություն ՝ 120px; բարձրությունը `10em; / * Արժեք * / բարձրություն `75%; / * Գլոբալ արժեքներ * / բարձրություն ՝ ժառանգել; բարձրությունը `սկզբնական; բարձրություն `չկարգավորված;

Արժեքներ

CSS տվյալների տեսակը ներկայացնում է հեռավորության արժեքը: Երկարությունները կարող են օգտագործվել բազմաթիվ CSS հատկությունների մեջ, ինչպիսիք են լայնությունը, բարձրությունը, լուսանցքը, ծածկույթը, եզրագծի լայնությունը, տառաչափը և տեքստի ստվերը »: Բարձրությունը սահմանում է որպես բացարձակ արժեք: CSS տվյալների տեսակը ներկայացնում է տոկոսային արժեք: Այն հաճախ օգտագործվում է չափը որոշելու համար ՝ տարրի ծնող օբյեկտի համեմատ: Բազմաթիվ հատկություններ կարող են օգտագործել տոկոսներ, ինչպիսիք են լայնության բարձրության լուսանցքի ծածկույթը և տառաչափը:> Բարձրությունը սահմանում է որպես պարունակող բլոկի բարձրության տոկոս: Ավտոմատ Theննարկիչը կհաշվարկի և կընտրի նշված տարրի բարձրությունը: Առավելագույն բովանդակություն Ներքին նախընտրած բարձրությունը: Նվազագույն բովանդակություն Ներքին նվազագույն բարձրությունը: Պիտանի բովանդակություն (CSS տվյալներ տեսակը ներկայացնում է մի արժեք, որը կարող է լինել կամ a կամ ա ."> ) Օգտագործում է համապատասխան բովանդակության բանաձևը `առկա տարածքով փոխարինված նշված փաստարկով, այսինքն. րոպե (առավելագույն բովանդակություն, առավելագույն (նվազագույն բովանդակություն,)):

Ֆորմալ շարահյուսություն

CSS տվյալների տեսակը ներկայացնում է տոկոսային արժեք: Այն հաճախ օգտագործվում է չափը որոշելու համար ՝ տարրի ծնող օբյեկտի համեմատ: Բազմաթիվ հատկություններ կարող են օգտագործել տոկոսներ, ինչպիսիք են լայնության բարձրության լուսանցքի ծածկույթը և տառաչափը:> սահման-տուփի բովանդակություն-տուփ հասանելի է նվազագույն բովանդակություն max-content տեղավորել-բովանդակություն ավտոմատ

Օրինակ

Html

Ես 50 պիքսել բարձրություն ունեմ:

Ես 25 պիքսել բարձրություն ունեմ:

Ես ծնողիս հասակի կեսն եմ:

CSS

div (լայնությունը ՝ 250px; լուսանցքը ՝ ներքև ՝ 5px; եզրագիծը ՝ 2px ամուր կապույտ;) #ավելի բարձր (բարձրությունը ՝ 50px;) #կարճ (բարձրությունը ՝ 25px;) լայնությունը `75%;)

Արդյունք

Մատչելիության մտահոգություններ

Համոզվեք, որ բարձրությամբ սահմանված տարրերը կտրված չեն և / կամ չեն ծածկում այլ բովանդակություն, երբ էջը մեծացնելու համար տեքստի չափը մեծացնելու է:

Տեխնիկական պայմաններ

Տեխնիկական պայմաններ	Կարգավիճակը	Մեկնաբանություն
CSS Ներքին և Արտաքին Չափերի Մոդուլ Մակարդակ 4	Խմբագրի նախագիծը
CSS Ներքին և Արտաքին Չափերի Մոդուլ Մակարդակ 3 Այդ բնութագրում «բարձրության» սահմանումը:	Աշխատանքային նախագիծ	Ավելացվել է առավելագույն բովանդակություն, նվազագույն բովանդակություն, համապատասխան բովանդակություն հիմնաբառեր:
CSS անցումներ Այդ բնութագրում «բարձրության» սահմանումը:	Աշխատանքային նախագիծ	Բարձրությունը թվարկում է որպես անիմացիոն:
CSS մակարդակ 2 (վերանայում 1) Այդ բնութագրում «բարձրության» սահմանումը:	Առաջարկություն	Ավելացնում է CSS տվյալների տիպի աջակցություն, որը ներկայացնում է հեռավորության արժեքը: Երկարությունները կարող են օգտագործվել բազմաթիվ CSS հատկությունների մեջ, ինչպիսիք են լայնությունը, բարձրությունը, լուսանցքը, ծածկույթը, եզրագծի լայնությունը, տառաչափը և տեքստի ստվերը »: արժեքներ և ճշգրիտ, թե որ տարրի վրա է այն կիրառվում:
CSS մակարդակ 1 Այդ բնութագրում «բարձրության» սահմանումը:	Առաջարկություն	Նախնական սահմանում:

Նախնական արժեքը	մեքենա
Վերաբերում է	բոլոր տարրերը, բայց չփոխարինված ներկառուցված տարրերը, աղյուսակի սյունակները և սյունակների խմբերը
Ժառանգվել է	ոչ
Տոկոսներ	Տոկոսը հաշվարկվում է գեներացվող տուփի պարունակող բլոկի բարձրության նկատմամբ: Եթե պարունակող բլոկի բարձրությունը հստակ նշված չէ (այսինքն ՝ դա կախված է բովանդակության բարձրությունից), և այս տարրը բացարձակ տեղավորված չէ, արժեքը հաշվարկվում է դեպի ավտոմատ: Արմատային տարրի վրա բարձրության տոկոսը հարաբերական է սկզբնական պարունակող բլոկի հետ:
Մեդիա	տեսողական
Հաշվարկված արժեք	տոկոս կամ ավտոմատ կամ բացարձակ երկարություն
Շարժապատկերների տեսակը	CSS- ի տվյալների տեսակը տեղադրված է որպես իրական, լողացող կետերի թվեր: "> երկարությունը, CSS- ի տվյալների տիպը տեղադրված են որպես իրական, լողացող կետերի թվեր:"> տոկոս կամ հաշվարկ ();
Կանոնական կարգ	ձևական քերականությամբ սահմանված եզակի ոչ երկիմաստ կարգը

Brննարկչի համատեղելիություն

Այս էջի համատեղելիության աղյուսակը ստեղծվում է կառուցվածքային տվյալների հիման վրա: Եթե ​​ցանկանում եք նպաստել տվյալներին, խնդրում ենք այցելել https://github.com/mdn/browser-compat-data և ուղարկել մեզ քաշման հարցում:

Թարմացրեք համատեղելիության տվյալները GitHub- ում

	Աշխատասեղան						Բջջային
	Chrome	Եզր	Firefox	Internet Explorer	Օպերա	Սաֆարի	Android վեբ դիտում	Chrome- ը Android- ի համար	Firefox- ը Android- ի համար	Օպերա Android- ի համար	Safari- ը iOS- ում	Samsung ինտերնետ
բարձրությունը	Chrome- ի ամբողջական աջակցություն 1	Edge Ամբողջական աջակցություն 12	Firefox- ի ամբողջական աջակցություն 1	IE Լրիվ աջակցություն 4	Օպերայի ամբողջական աջակցություն 7	Safari- ի ամբողջական աջակցություն 1	WebView Android- ի ամբողջական աջակցություն 1	Chrome Android- ի ամբողջական աջակցություն 18	Firefox Android- ի ամբողջական աջակցություն 4	Opera Android Լրիվ աջակցություն 10.1	Safari iOS Ամբողջական աջակցություն 1	Samsung Internet Android Լրիվ աջակցություն 1.0
տեղավորվող-բովանդակային	Chrome Ամբողջական աջակցություն 46	Edge No support No.	Firefox Ոչ աջակցություն Ոչ	IE Ոչ աջակցություն Ոչ	Օպերայի ամբողջական աջակցություն 33	Safari Ամբողջական աջակցություն 11 Ամբողջական աջակցություն 11 Լրիվ աջակցություն 9 Նախածանց Նախածանց				Օպերա Android?	Safari iOS Ամբողջական աջակցություն 11 Ամբողջական աջակցություն 11 Ամբողջական աջակցություն 9 Նախածանց Նախածանց Իրականացվում է վաճառողի նախածանցով ՝ -webkit-
առավելագույն բովանդակություն	Chrome Ամբողջական աջակցություն 46	Edge No support No.	Նախածանց Նախածանց	IE Ոչ աջակցություն Ոչ	Օպերայի ամբողջական աջակցություն 44	Safari Լրիվ աջակցություն 11	WebView Android- ի ամբողջական աջակցություն 46	Chrome Android Լրիվ աջակցություն 46	Նախածանց Նախածանց Իրականացվում է վաճառողի նախածանցով ՝ -moz-			Samsung Internet Android Լրիվ աջակցություն 5.0
նվազ բովանդակություն	Chrome Ամբողջական աջակցություն 46	Edge No support No.	Firefox Լիարժեք աջակցություն 66 Լիարժեք աջակցություն 66 Լիարժեք աջակցություն 3 Նախածանց Նախածանց Իրականացվում է վաճառողի նախածանցով ՝ -moz-	IE Ոչ աջակցություն Ոչ	Օպերայի ամբողջական աջակցություն 44	Safari Լրիվ աջակցություն 11	WebView Android- ի ամբողջական աջակցություն 46	Chrome Android Լրիվ աջակցություն 46	Firefox Android- ի ամբողջական աջակցություն 66 Ամբողջական աջակցություն 66 Լրիվ աջակցություն 4 Նախածանց Նախածանց Իրականացվում է վաճառողի նախածանցով ՝ -moz-	Օպերա Android- ի ամբողջական աջակցություն 43	Safari iOS Ամբողջական աջակցություն 11	Samsung Internet Android Լրիվ աջակցություն 5.0
ձգվել	Chrome- ի ամբողջական աջակցություն 28 Webkit- լրացնել-մատչելի"> Այլընտրանքային անուն Ամբողջական աջակցություն 28 Webkit- լրացնել-մատչելի"> Այլընտրանքային անուն Webkit- լրացնել-մատչելի"> Այլընտրանքային անուն	Edge No support No.	Firefox Ոչ աջակցություն Ոչ	IE Ոչ աջակցություն Ոչ	Օպերայի ամբողջական աջակցություն 15 Webkit- լրացնել-մատչելի"> Այլընտրանքային անուն Ամբողջական աջակցություն 15 Webkit- լրացնել-մատչելի"> Այլընտրանքային անուն Webkit- լրացնել-մատչելի"> Այլընտրանքային անուն Օգտագործում է ոչ ստանդարտ անունը. -Webkit-fill-available	Safari Լրիվ աջակցություն 9 Webkit- լրացնել-մատչելի"> Այլընտրանքային անուն Լրիվ աջակցություն 9 Webkit- լրացնել-մատչելի"> Այլընտրանքային անուն Webkit- լրացնել-մատչելի"> Այլընտրանքային անուն Օգտագործում է ոչ ստանդարտ անունը. -Webkit-fill-available	WebView Android Լրիվ աջակցություն 4.4 Webkit- լրացնել-մատչելի"> Այլընտրանքային անուն Ամբողջական աջակցություն 4.4 Webkit- լրացնել-մատչելի"> Այլընտրանքային անուն Webkit- լրացնել-մատչելի"> Այլընտրանքային անուն Օգտագործում է ոչ ստանդարտ անունը. -Webkit-fill-available	Chrome Android- ի ամբողջական աջակցություն 28 Webkit- լրացնել-մատչելի"> Այլընտրանքային անուն Ամբողջական աջակցություն 28 Webkit- լրացնել-մատչելի"> Այլընտրանքային անուն Webkit- լրացնել-մատչելի"> Այլընտրանքային անուն Օգտագործում է ոչ ստանդարտ անունը. -Webkit-fill-available	Firefox Android Ոչ աջակցություն Ոչ	Օպերա Android?	Safari iOS Ամբողջական աջակցություն 9 Webkit- լրացնել-մատչելի"> Այլընտրանքային անուն Լրիվ աջակցություն 9 Webkit- լրացնել-մատչելի"> Այլընտրանքային անուն Webkit- լրացնել-մատչելի"> Այլընտրանքային անուն Օգտագործում է ոչ ստանդարտ անունը. -Webkit-fill-available	Samsung Internet Android Լրիվ աջակցություն 5.0 Webkit- լրացնել-մատչելի"> Այլընտրանքային անուն Լրիվ աջակցություն 5.0 Webkit- լրացնել-մատչելի"> Այլընտրանքային անուն Webkit- լրացնել-մատչելի"> Այլընտրանքային անուն Օգտագործում է ոչ ստանդարտ անունը. -Webkit-fill-available

Լեգենդ

Լրիվ աջակցությունԼրիվ աջակցություն Ոչ մի աջակցությունՈչ մի աջակցություն Համատեղելիությունն անհայտ էԱնհամատեղելիություն անհայտ Օգտագործում է ոչ ստանդարտ անուն: Օգտագործում է ոչ ստանդարտ անուն: Օգտագործման համար պահանջվում է վաճառողի նախածանց կամ այլ անուն: Օգտագործման համար պահանջվում է վաճառողի նախածանց կամ այլ անուն: