Всеки елемент на уеб страница е правоъгълно поле. Свойството display в CSS определя как точно се държи това правоъгълно поле. Има само няколко стойности, които често се използват:
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 */ )
Стойността по подразбиране за всички елементи е вградена. Повечето „Таблици със стилове на потребителски агент“ (стиловете по подразбиране, които браузърът прилага за всички сайтове) нулират много елементи, за да „блокират“. Нека да преминем през всяка от тях и след това да обхванем някои от другите по-рядко срещани ценности.
В редица
Стойността по подразбиране за елементи. Помислете за елементи като , или и как обвиването на текст в тези елементи в низ от текст не нарушава потока на текста.
Най елемент има 1px червена рамка. Забележете, че той се намира точно в реда с останалата част от текста.
Вграденият елемент ще приеме полета и подплънки, но елементът все още е вграден, както може да се очаква. Маржът и подложката ще отблъснат други елементи само хоризонтално, а не вертикално.
Вграден елемент няма да приеме heightи width. Просто ще го игнорира.
Вграден блок
Елементът, зададен на, inline-blockе много подобен на вградения, тъй като той ще бъде вграден с естествения поток на текст (на „основната линия“). Разликата е, че сте в състояние да зададете widthи, heightкоето ще бъде спазено.
Блок
Редица елементи са зададени blockот таблицата със стилове на браузъра. Те обикновено са контейнерни елементи, като , и
. Също така текст „блокира“ като
и
. Елементите на ниво блок не стоят вградени, а се пробиват покрай тях. По подразбиране (без задаване на ширина) те заемат колкото се може повече хоризонтално пространство.
Двата елемента с червените граници са
s, които са елементи на ниво блок. Най елемент между тях не седи инлайн защото блоковете разграждат по-долу вградени елементи.
Тичам в
Първо, това свойство не работи във Firefox. Говори се, че спецификациите за него не са достатъчно добре дефинирани. За да започнете да го разбирате обаче, все едно искате елемент на заглавката да стои на една линия с текста под него. Плаващото му няма да работи, както и нищо друго, тъй като не искате заглавката да бъде дъщерна на текстовия елемент под него, вие искате той да бъде свой собствен независим елемент. В „поддържащите“ браузъри е така:
Не разчитайте обаче.
Flexbox
В displayимота се използва също и за нови методи новоизлюпена оформление като Flexbox.
.header ( display: flex; )
Има някои по-стари версии на синтаксиса на flexbox, така че моля, консултирайте се с тази статия за синтаксиса при използването на flexbox с най-добрата поддръжка на браузъра. Не забравяйте да видите това пълно ръководство за Flexbox.
Flow-Root
В flow-rootстойността на дисплея създава нов "блок форматиране контекст", но иначе е като block. Нов BFC помага за неща като изчистване на плувки, премахвайки необходимостта от хакове за това.
.group ( display: flow-root; )
Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.
работен плот
Chrome
Firefox
IE
Ръб, край
Сафари
58
53
Не
79
13
Мобилен / таблет
Android Chrome
Android Firefox
Android
iOS Safari
88
85
81
13,0-13,1
Решетка
Оформлението на мрежата също ще бъде първоначално зададено от свойството display.
body ( display: grid; )
Ето нашето ръководство за оформление на мрежата, което включва диаграма за поддръжка на браузъра.
Нито един
Изцяло премахва елемента от страницата. Имайте предвид, че докато елементът все още е в DOM, той се премахва визуално и по всякакъв друг възможен начин (не можете да поставяте раздели към него или неговите деца, той се игнорира от екранните четци и т.н.).
Стойности на таблицата
Има цял набор от стойности на дисплея, които принуждават елементите извън таблицата да се държат като елементи на таблицата, ако имате нужда това да се случи. Това е рядко, но понякога ви позволява да бъдете „по-семантични“ с кода си, като същевременно използвате уникалните възможности за позициониране на таблици.
