Back

ⓘ CSS box model




CSS box model
                                     

ⓘ CSS box model

У веб дизајну, CSS box model односи се на композицију веб странице или HTML документа од блокова или кутија коришћењем CSS-a. Конкретно, модел кутије описује како је величина сваког таквог блока и његов садржај одређена стилским инструкцијама. Смернице и правила везана за модел кутије описани су од стране World Wide Web Конзорцијума W3C.

                                     

1. Box model модел кутије

Садржај сваке кутије одређен је са 4 параметра:

  • border срп. граница представља оквир за изабрани елемент. Користи подешавања за величину, стил линије и боју.
  • margin срп. маргина је размак између елемената. То је простор између ивице елемената коју ниједан други елемент не сме додиривати или прелазити преко њега.
  • height/width срп. висина/ширина дефинишу димензије "стварног" садржаја кутије
  • padding срп. растојање/удаљеност дефинише интерну удаљеност између садржаја елемента и његових ивица
                                     

1.1. Box model модел кутије Padding

Да бисте подесили удаљеност од ивица, потребно је да се износи горњег, доњег, левог и десног растојања одвојено програмирају у виду издвојених декларација:

или у поједниначној декларацији:

                                     

1.2. Box model модел кутије Border

Додавање ивица оквира је једноставно и нуди поделе између делова веб странице које су уочљиве и лаке за препознавање. Ивице оквира могу да се дефинишу на глобалном нивоу, или да се свака дефинише појединачно. Комбинација је, јасно, безброј.

Нека CSS својства:

  • border-color подешава боју ивице. Јасно, свакој од ивица се може приступити на аналогни начин као код својства width.
  • border-width подешава дебљину ивичне линије оквира у пикселима. Могуће је и дефиницати сваку од ивица посебно и то border-top-width горњу, border-right-width десну, border-left-width леву, border-bottom-width доњу.
  • border-radius подешава полупречник заобљења око ивице угла изабраног елемента у пикселима.
  • border-style дефинише стил линије која ће оивичавати кутију. Постоје разне могућности као нпр.: dotted истачкана, solid неиспрекидана, dashed испрекидана.

Такође, постоји могућност да уместо линије, оквир кутије буде слика.



                                     

1.3. Box model модел кутије Margin

Маргине, као и растојање и многа друга својства CSS-а могу да се подесе одвојено или заједно у једној декларацију. Подешавају се у пикселима или се претраживачу оставља да сам одреди маргине опцијом auto.

На тај начин, укупна ширина садржаја кутије је ширина садржаја плус left- и right- padding срп. растојање плус left- и right- border срп. ивица плус left- и right- margin срп. маргина. Слично, укупна висина кутије једнака је висини садржаја плус top- и bottom- padding плус top- и bottom- border плус top- и bottom- margin.

                                     

2. Пример кода

На пример, дати CSS код:

ће дефинисати модел кутије где ће сви елементи блокови наведени унутар њега бити смештени у оквиру Класа. Наиме, ова кутија има укупну висину 160px и ширину 260px што представља суму садржаја, маргина, граница и одстојања.

                                     

3. Bugs срп. Багови

Док W3C препоруке дефинишу модел кутије на прецизан и недвосмислен начин, неке старије верзије прегледача нису у могућности. Из тог разлога могуће је да неће приказати димензије кутије са веб стране исправно. Најуочљивије грешке код исправног приказивања модела кутије јављају се код старијих верзија Internet Explorerа, и познати су као Internet Explorer box model bug.

                                     
  • подршку за Linux и Solaris, Интегрисане контроле и распореди, Skinnable СSS контроле, Интегрисане график додатке, Компоненте улаз излаз, маскирање разлике

Users also searched:

...
...
...