CSS: Pokaż różnice

Question

Jaka jest różnica między display: block i display: inline

Answer 1

elementy blokowe zwykle sterta pionowo natomiast elementy inline będą wyrównane w poziomie.

Dwa DIV będą układać się jeden na drugim, ale jeśli ustawisz je tak, aby wyświetlały: w linii, będą znajdować się obok siebie poziomo. Odwrotnie z tagami span.

Answer 2

wyświetlacz: blok
spowoduje, że obiekt zmusi inne obiekty w kontenerze do nowej linii.

display: inline
próbuje wyświetlić obiekt w tym samym wierszu, co inne obiekty.

ekran: blok

 
Item 1 
Item 2 
Item 3 

display: inline

 
Item 1 Item 2 Item 3 

Answer 3

ekran: blok oznacza, że ​​element jest wyświetlany w postaci bloku, a ust i nagłówki zawsze. Blok ma kilka spacji powyżej i poniżej i nie toleruje żadnych elementów HTML obok niego, z wyjątkiem sytuacji, gdy jest inaczej (poprzez dodanie deklaracji zmiennoprzecinkowej do innego elementu, na przykład). display: inline oznacza, że ​​element jest wyświetlany w linii, wewnątrz bieżącego bloku w tej samej linii. Dopiero gdy znajduje się pomiędzy dwoma blokami, element tworzy "blok anonimowy", jednak ma on najmniejszą możliwą szerokość.

Answer 4

Blok używa pełnej dostępnej szerokości, z nową linią przed i po. Inline używa tylko wymaganej szerokości bez wymuszania nowych linii.

Answer 5

tak,

display: block sprawia, że ​​element zachowuje się jak blok np: <p>

display: inline zrobić i układ elementów inline.

można je zastosować do elementów, które domyślnie są ustawione na przeciwny typ wyświetlania.

Możliwe wartości

* none - no display at all. 
* inline - An inline box. 
* block - A block box. 
* inline-block - effectively a block box inside an inline box. Not supported by Mozilla at time of writing. IE will only apply inline-block to elements that are traditionally inline such as span or a but not p or div. Loopy. 
* run-in - Either an inline or block box depending on the context. If a block box follows the run-in box, the run-in box becomes the first inline box of that block box, otherwise it becomes a block box itself. Crazy. Not supported by IE/Win or Mozilla at the time of writing. 
* list-item - the equivalent of the default styling of the HTML li element. 
* table - a block-level table - the equivalent of the default styling of the HTML table element. Not supported by IE. 
* inline-table - an inline-level table. Not supported by IE. 
* table-row-group - the equivalent of the default styling of the HTML tbody element. Not supported by IE. 
* table-header-group - the equivalent of the default styling of the HTML thead element. Not supported by IE. 
* table-footer-group - the equivalent of the default styling of the HTML tfoot element. Not supported by IE. 
* table-row - the equivalent of the default styling of the HTML tr element. Not supported by IE. 
* table-column-group - the equivalent of the default styling of the HTML colgroup element. Not supported by IE. 
* table-column - the equivalent of the default styling of the HTML col element. Not supported by IE. 
* table-cell - the equivalent of the default styling of the HTML td or th elements. Not supported by IE. 
* table-caption - the equivalent of the default styling of the HTML caption element. Not supported by IE. 

* source

Answer 6

Istnieją dwa główne rodzaje rysunku kontekst w CSS, które mogą być przypisane do elementów. Jeden, display: block, tworzy nadające się do pozycjonowania pudełka. Drugi, display: inline przepływa treść jako szereg linii w ramce.

Domyślnie blok zajmuje całą przestrzeń poziomą, więc seria bloków będzie wyświetlana jedna pod drugą, ułożona pionowo. Gdy elementy śródliniowe wpływają do linii, są renderowane poziomo, jako jedno słowo po drugim.

Zasadniczo używa się bloku do układania strony, natomiast tekst inline jest zarezerwowany dla treści tekstowych znajdujących się w częściach tekstu, na przykład w linkach.

Istnieją również inne rodzaje kontekstów rysowania, na przykład display: table, jednak są one rzadziej używane ze względu na ich wyspecjalizowany charakter i/lub brak obsługi przeglądarki.

Więcej szczegółów jest dostępnych w the CSS 2.1 specification.

Answer 7

Należy pamiętać, że elementom śródliniowym nie można przypisać własnej szerokości, wysokości ani pionowych spacji (margines/dopełnienie u góry/u dołu).

Jeśli chcesz, aby elementy blokowe zachowywały się jak elementy śródliniowe (tam, gdzie układają się obok siebie), powinieneś używać float. Pływaki będą układać się obok innych pływaków w tym samym kierunku. Również każdy wstawiony element, który zostanie podany jako float, stanie się blokiem.

Answer 8

Dokument HTML uważany jest za przepływ, myślę o stosie elementów HTML ułożonych w stos na górze.

Blok definiowany jest w przepływie jako ramka (domyślnie jest tak duży, jak strona) i jest popychany jak najwięcej do góry bez nakładania się na inny blok. Przykłady: div, p, table.

Element śródliniowy nie definiuje ramki (dlatego nie można ustawić jej szerokości i wysokości), zostanie dołączony do innych elementów śródliniowych w bieżącym bloku. Przykłady: zakres, kod, a.

Answer 9

display: block 

Element zajmie cały kontener swojego rodzica. Zwykle rozpoczyna się w nowej linii.

display: inline-block 

Spowoduje to utworzenie elementu śródliniowego, który zajmie tylko tyle miejsca, ile potrzeba. Można rozpocząć w dowolnym miejscu w linii.

Przykładowe użycie: podczas tworzenia paska menu na górze strony (opakowanie menu jest często przypisywane)