Użu Box Model fis-CSS- Struttura u Pożizzjonament

Fis-CSS, Box Model huwa kunċett importanti biex jiġi ddeterminat kif element huwa strutturat u pożizzjonat fuq paġna web. Tikkonsisti f'komponenti fundamentali bħal Kontenut, Padding, Border u Margin.

 

Content

Content hija ż-żona li fiha l-kontenut attwali tal-element, bħal test, stampi, jew vidjows.

Biex niddefinixxu d-daqs tal-kontenut, nużaw il- width  u height l-proprjetajiet.

 

Padding

Padding huwa l-ispazju madwar il-kontenut, li joħloq vojt bejn il-kontenut u dak tal-element border.

Biex tispeċifika padding l-valuri, nużaw il- padding-top, padding-right,padding-bottom u  l-proprjetajiet. padding-left

 

Border

Dan Border huwa l-kontorn madwar l-element, li joħloq fruntiera ċara bejn il-kontenut u ż-żona tal-madwar.

Biex tifformattja l- border, nużaw il- border-width, border-style u border-color  l-proprjetajiet.

 

Margin

Margin huwa l-ispazju barra l-element border, li joħloq vojt bejn elementi oħra.

Biex niddefinixxu margin l-valuri, nużaw il- margin-top, margin-right, u l-proprjetajiet. margin-bottom margin-left

 

Billi nużaw is- Box Model CSS, nistgħu nippersonalizzaw id-daqs u l-pożizzjoni ta 'element billi nimodifikaw il-valuri tal-komponenti tiegħu.

Eżempju:

.box {  
  width: 200px;  
  height: 100px;  
  padding: 20px;
  border: 1px solid black;
  margin: 10px;  
}  

Fl-eżempju ta 'hawn fuq, l-element bil-klassi .box għandu wisa' ta '200px u għoli ta' 100px. Għandu 20px padding, iswed border bi ħxuna ta '1px, u 10px margin.

 

Billi taġġusta dawn il-valuri, tista 'toħloq elementi b'daqsijiet u spazji differenti fuq il-paġna web tiegħek. Permezz tal-użu tal- Box Model, għandek kontroll fuq il-pożizzjonament, id-daqs u l-ispazjar tal-elementi fl-interface tiegħek.