CSS ձեռնարկ — Դաս 4 — display հատկություն. div-ի և span-ի տարբերությունը

Առաջին դասերում մենք միացրինք CSS ֆայլը և գրել մի փոքր CSS կոդ, որպեսզի տեսնենք, թե ինչպես է այն աշխատում։ Այս դասում կընկրկենք display հատկությունը։ display-ն կարգավորում է, թե ինչպես է HTML-ն ցուցադրվելու՝ արդյոք որպես տողի մեջ տեղավորված տարր (inline), թե որպես անկախ կետ (block), որը ունի իր լայնությունն ու բարձրությունը։ Այսպիսով, սկսենք ամենապարզից. ըստ ստանդարտի <div>-ը ցուցադրվում է որպես բլոկ, իսկ <span>-ը՝ տողի մեջ։

display: inline

<span> տեգը ըստ ստանդարտի ցուցադրվում է տողի մեջ, ինչպես սովորական տեքստը։ Այս դեպքում span-ը չունի ինքնուրույն լայնություն կամ բարձրություն. դրանք չենք կարող задасти, քանի որ տեքստի չափերը կարգավորվում են այլ հատկություններով՝ шрифт, գրատեսակ, գույն, տառերի, տողերի միջև տվածք և այլն։ Եթե ցանկանում եք տարրին տալ լայնություն, բարձրություն կամ ռեժիմային տևողություններ, պետք է փոխեք display-ը block կամ inline-block։

display: block

<div> տեգը ըստ ստանդարտի block է. այս ռեժիմն թույլ է տալիս կարգավորել լայնություն, բարձրություն և արտաքին/մտածքային մակերեսներ (margin/padding)։ Դուք կարող եք ստեղծել մեկ մեծ տարածք, ներսում տեղադրել տեքստ, պատկեր կամ բլոկային այլ տարրեր։ Կարելի է նաևկատարել այսպիսի span, որն ունի block՝ այսպիսի

<span class="block">text</span>

Block արժեքի ևս մեկ առանձնահատկություն՝ տարրը՝ որպես block, ըստ ստանդարտի զբաղեցնում է 100% լայնություն, սակայն cannot задавать height:100%՝ ամբողջ էկրանին ծավալվելու համար. բացի որևէ կոնկրետ թվային արժեք տալուց (օր. 800px): էկրանով բարձրություն տարածելու համար օգտագործվում են այլ տեխնիկաներ, որոնք կքննարկվեն հետագա հոդվածներում։

display: inline-block

Երբ անհրաժեշտ է, որ տարրը ունենա block-ի լայնություն և բարձրություն, սակայն շարունակի տեղավորվել տողի մեջ՝ կողք կողքի ուրիշ տարրերի հետ, օգտագործեք inline-block։ Այս ռեժիմը համատեղում է block-ի և inline-ի առավելությունները։

display: table

Ըստ ստանդարտի <table> տեգը ունի display: table. նման տարրը կարող եք նաև 100% բարձրություն տալ, սակայն ժամանակակից վեբ-ստանդարտներն առաջարկում են օգտագործել block-մոդելի դասավորություն, իսկ <table>-ը միայն տվյալների ցուցադրման համար․ ոչ ընդհանուր դասավորության համար։

display: list-item

Այս արժեքը, used by <li> ըստ ստանդարտի, ավելացնում է ցուցակի նշագոյ (բուլետ կամ թվանշան) այդ տարրի կողքին։

display: none

Եթե տարրին կամ նրա դասին տալ display: none, այն ամբողջովին կթաքցվի՝ որպես չկայացած տարր։ Զգույշ օգտագործեք՝ հեշտ է մոռանալ, թե ինչու չի երևում տարրը։ Սակայն հաճախորդի խնդրանքով վերացնելիս կարող եք կարճ լուծում ստանալ CSS-ով՝

.rss {
  display: none;
}

Լավ պրակտիկան դա տարրերն ուղղակի վերացնելն է HTML-ից կամ վեբ-թեմպլեյթից, բայց CSS-ով կարելի է արագ թաքցնել վերև նետված տարրերը առանց հավելյալ աշխատանքային կոդի։