Сваки елемент на веб страници је правоугаони оквир. Својство приказа у ЦСС одређује како ће се понашати тај правоугаони оквир. Постоји само неколико вредности које се обично користе:
div ( display: inline; /* Default of all elements, unless UA stylesheet overrides */ display: inline-block; /* Characteristics of block, but sits on a line */ display: block; /* UA stylesheet makes things like and block */ display: run-in; /* Not particularly well supported or common */ display: none; /* Hide */ )
Подразумевана вредност за све елементе је инлине. Већина „Табела стилова корисничког агента“ (задати стилови које прегледач примењује на све веб локације) ресетују многе елементе на „блокаду“. Прођимо кроз сваку од ових, а затим покријмо неке друге мање уобичајене вредности.
У реду
Подразумевана вредност за елементе. Замислите елементе попут , или и како умотавање текста у те елементе у низ текста не нарушава ток текста.
Елемент има 1пк црвену границу. Приметите да се тачно поравна са остатком текста.
Уграђени елемент прихваћа маргину и додавање, али елемент и даље стоји у реду како бисте могли очекивати. Маргина и додавање само ће одгурнути остале елементе водоравно, а не вертикално.
Уграђени елемент неће прихватити heightи width. Само ће то игнорисати.
Инлине Блоцк
Елемент постављен на inline-blockврло је сличан уметнутом по томе што ће се поставити у складу са природним протоком текста (на „основној линији“). Разлика је у томе што сте у стању да подесите widthи heightкоји ће се поштовати.
Блокирати
Бројни елементи су подешени у blockтабели стилова претраживача УА. Они су обично контејнер елементи, као , и
. Такође текст „блокирајте“ као
и
. Елементи нивоа блока не седе у равни већ се пробијају поред њих. Подразумевано (без подешавања ширине) заузимају што више хоризонталног простора.
Два елемента са црвеним обрубима су
с који су елементи нивоа блока. Елеменат између њих не седе редни јер су блокови разбити испод паралелних елемената.
Налетање
Прво, ово својство не ради у Фирефоку. Реч је да спецификације за то нису довољно добро дефинисане. Да бисте то почели да схватате, то је као да желите да елемент заглавља стоји у реду са текстом испод њега. Плутајући неће радити, као ни било шта друго, јер не желите да заглавље буде подређено елементу текста испод њега, већ желите да буде његов независни елемент. У „подржавајућим“ прегледачима то је овако:
Не рачунајте на то, додуше.
Флекбок
displayИмовина се користи за нове фанглед распореда методама као што је флексибилни оквир.
.header ( display: flex; )
Постоје неке старије верзије флекбок синтаксе, па вас молимо да погледате овај чланак за синтаксу у коришћењу флекбок-а са најбољом подршком за прегледач. Обавезно погледајте овај комплетан водич за Флекбок.
Флов-Роот
flow-rootВредност дисплеј ствара нови "блок форматирање контекст", али је иначе као block. Нови БФЦ помаже у стварима попут чишћења пловака, уклањајући потребу за хаковима да би то учинили.
.group ( display: flow-root; )
Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.
Десктоп
Хром
Фирефок
ИЕ
Ивица
Сафари
58
53
Не
79
13
Мобиле / Таблет
Андроид Цхроме
Андроид Фирефок
Андроид
иОС Сафари
88
85
81
13.0-13.1
Грид
Распоред мреже такође ће у почетку поставити својство приказа.
body ( display: grid; )
Ево нашег водича о распореду мреже, који укључује графикон за подршку прегледача.
Ниједан
У потпуности уклања елемент са странице. Имајте на уму да док је елемент још увек у ДОМ-у, уклања се визуелно и на било који други могући начин (не можете да додате картицу на њега или његову децу, читачи екрана га игноришу, итд.).
Вредности табеле
Постоји читав скуп вредности приказа који приморавају елементе који нису табеле да се понашају као елементи табеле, ако вам је то потребно. То је ретко, али понекад вам омогућава да будете „семантичнији“ са својим кодом, користећи јединствене могућности позиционирања табела.
