Css-ի բլոկ մոդելը
Էլեմենտների բլոկ մոդելը
Բլոկ մոդելը բրաուզերի համար էլեմենտները պատկերելու միջոց է, որոնք մշակում է որպես ուղղանկյուն բլոկներ: Դրանք հանդիսանում են կոնտեյներներ և ունեն որոշակի պարունակություն՝ տեքստ, նկար, այլ դուստր էլեմենտներ և այլն։
margin– էլեմենտի արտաքին սահմանն է։ Դատարկ տարածք է, որը հեռացնում է մեկ էլեմենտը մյուսից, կամ՝ բրաուզերի պատուհանի եզրերից։ Արտաքին սահմանի տարածքը թափանցիկ է՝ չունի իր սեփական գույնը կամ այլ էֆֆեկտ։
border – էլեմենտի շրջանակն է՝ նրա կողմերի սահմանագիծը։ Հնարավոր է սահմանել բոլոր չորս կամ մեկ կողմի համար սահմանագիծ։
padding – էլեմենտի ներքին լիցքն է, որը դատարկ տարածք է էլեմենտի պարունակության և շրջանակի միջև։ Այս տարածքը նույնպես թափանցիկ է և չունի իր սեփական գույնը կամ այլ էֆֆեկտ։
պարունակությունը – էլեմենտների մեծամասնությունն ունի պարունակության համար նախատեսված տարածք, որտեղ տեղադրվում է տեքստ, նկար, այլ դուստր էլեմենտներ և այլն։
Օրինակ՝
p {
color: orange;
border: 2px solid red;
}
img {
margin: 20px;
border: 5px solid red;
padding: 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hayti</title>
<link rel="stylesheet" href="style.css">
<style>
</style>
</head>
<body>
<p>Hello World!!</p> <!-- <p> էլեմենտը զբաղեցնում է ամբողջ տողը:
-->
<img src= "html.png" >
</body>
</html>
Բրաուզերներն ունեն ծրագրավորողների համար նախատեսված պատուհան, որը կարելի է բացել՝ սեղմելով « f12 » ստեղնը, կամ հետևելով օրինակին՝
Ներքին և արտաքին սահմաններ
Ներքին սահման(լիցք) – դատարկ տարածություն էլեմենտի պարունակության և շրջանակի միջև։ Էլեմենտի բոլոր չորս կողմերին ներքին լիցք սահմանելու համար օգտագործվում է padding հատկությունը։
Արտաքին սահման – դատարկ տարածություն, որն էլեմենտն հեռացնում է այլ էլեմենտից, կամ բրաուզերի պատուհանի եզրերից։ Էլեմենտի բոլոր չորս կողմերին արտաքին սահման սահմանելու համար օգտագործվում է margin հատկությունը։
Padding և margin հատկությունները կարող են ընդունել մեկից չորս արժեքներ՝
Padding: 10px 15px 22px 18px;
Margin: 10px 15px 22px 18px;
Արժեքները սահմանվում են ժամսլաքի ուղղությամբ՝ սկսելով վերևից՝
Արժեքները 4-ն են, բայց երբ փոխվում է քանակը, փոխվում է նաև հերթականությունը՝
| Արժեքների քանակը | Արդյունքը |
|---|---|
|
Բոլոր 4 արժեքները |
Արժեքները սահմանվում են ժամսլաքի ուղղությամբ՝ վերևի, աջ, ներքևի և ձախ կողմերին։ |
|
3 արժեքի դեպքում |
Առաջին վերաբերում է վերևի կողմին, երկրորդը միաժամանակ ձախ և աջ կողմերին, երրորդը՝ ներքևին։ |
|
2 արժեքի դեպքում |
Առաջին արժեքը վերևի և ներքևի կողմերի համար, երկրորդը՝ ձախ և աջ կողմերի։ |
|
Մեկ արժեքի դեպքում |
Միաժամանակ սահմանում է բոլոր չորս կողմերի համար։ |
Բրաուզերին կանխադրված է(default, по умолчанию) էլեմենտներն իր պատուհանի եզրերից որոշակի չափով հեռացնել։
Առանց որևէ արտաքին սահմանի օգտագործման կլինի հետևյալ տեսքը՝
Արտաքին և ներքին սահման օգտագործելիս կլինի հետևյալը՝
p {
border: 3px solid blue;
background-color: orange;
color: white;
padding: 15px; /* ներքին լիցք բոլոր չորս կողմերի համար */
margin: 25px; /* արտաքին սահման բոլոր չորս կողմերի համար */
}
<body>
<p>Hello World!!</p>
</body>
Armenian 
Russian