Display Types
Inline elements flow within the confines of their container, and they can contain only text and other inline elements. When you set a new inline element, it will not start a new line. The inline element type does not stretch beyond itself. It is only as wide as the amount of content in it. Generally, another element contains inline content. For example, in a paragraph, the text inside the paragraph is inline content. Common Inline elements include:
- images(img)
- break(br)
- anchor(a - link tags)
- buttons
- span
- bold (b)
- strong
- italics(i)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sagittis orci convalli metus ultrices, vel sodales est pretium.
This span has a background color and padding. Nulla tempor dui nisl, sed sultricies purus pharetra placerat. Proin varius pretium sodales. Phasellus consequat efficitur luctus.
The Block element type has two major default behaviors. Block elements automatically start on their own line, and they take up the entire line. Block elements can have specified heights and widths, but if those aren't indicated, they will occupy the entire line by default.
- horizontal rule (hr)
- paragraph(pr)
- h1 - h6
- table (The table is a unique case in the block-element classification. It does start a new line, and it will potentially occupy an entire line. However, if there's not enough content inside it, it will occupy only as much space as is needed.)
- section
- div
- order and unordered lists
- blockquote
Inline Elements
- These elements sit next to each other on the same line.
- They do not start on a new line.
- They only take up as much width as their content.
Inline 1
Inline 2
Inline 3
Block Elements
- These elements start on a new line.
- They take up the full width available (unless a specific width is set).
Block 1
Block 2
Block 3
Inline-Block Elements
- These elements sit next to each other on the same line (like inline elements).
- However, they can have a width and height set (like block elements).
- They maintain block-level features but do not force a new line.
Inline-Block 1
Inline-Block 2
Inline-Block 3
display: none; visibility: hidden; position: absolute
These types of hidden displays are often used in conjunction with JavaScript to apply a behavior in which something changes from a hidden to a visible state when an action is performed. (An example is this interactive question. The button disappears when clicked, and the question answer becomes visible!)
Paragraph 1
Hidden Paragraph 2
Paragraph 3
Hidden paragraph 4
Paragraph 5
Hidden Paragraph 6
display as a: table / table-caption / colgroup / col / thead / tfoot / tr / td
POSITIONING
Relative Positioning
moved
Absolute Positioning
moved
Fixed Positioning
We're going to make this Poop emoji follow you around, no matter where you go, you will never escape!
Abosuletely, Relatively speaking
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sagittis orci convallis metus ultrices, vel sodales est pretium. Quisque leo lacus, pellentesque pellentesque auctor ac, hendrerit a felis. Nulla tempor dui nisl, sed ultricies purus pharetra placerat. Proin varius pretium sodales. Phasellus consequat efficitur luctus.
Nullam est orci, elementum a volutpat pharetra, maximus eu purus. Praesent tellus sem, consequat commodo vestibulum ut, convallis vitae felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris cursus, sem at fringilla lacinia, turpis odio laoreet diam, at tincidunt nisi velit sed enim.
FLOATS
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin vel dolor a massa
dignissim egestas. Mauris ac nisl at ipsum
consectetur porttitor vel quis nibh. Vestibulum
rhoncus sagittis lectus quis dignissim.
Nullam quis tempor tellus, non laoreet risus. Phasellus
sed neque dignissim tortor luctus pellentesque. Curabitur vitae
dolor et ipsum rhoncus lobortis eget vitae ligula. Morbi
pellentesque tincidunt interdum.
In vehicula tortor sollicitudin mollis pellentesque.
Aenean euismod sapien laoreet, cursus ante eget, ultricies dui.
Etiam malesuada vel eros at condimentum. Praesent dapibus augue
metus, sed mattis neque blandit in. Phasellus in dictum eros.
Maecenas metus urna, accumsan mattis ante molestie, pulvinar
accumsan sapien. Proin fringilla quam quis purus semper
iaculis.
Flowing Elements
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Proin vel dolor a massa dignissim egestas. Mauris ac
nisl at ipsum consectetur porttitor vel quis nibh. Vestibulum
rhoncus sagittis lectus quis dignissim.
Clearing a float
Nullam quis tempor tellus, non laoreet risus. Phasellus sed neque dignissim tortor luctus pellentesque. Curabitur vitae dolor et ipsum rhoncus lobortis eget vitae ligula. Morbi pellentesque tincidunt interdum..
In vehicula tortor sollicitudin mollis pellentesque. Aenean euismod sapien laoreet, cursus ante eget, ultricies dui. Etiam malesuada vel eros at condimentum. Praesent dapibus augue metus, sed mattis neque blandit in. Phasellus in dictum eros.
When you have a floating element dipping down out of its container, you have two options. One tried and true trick is to place an empty div as the last item in a container and to add the "clear:both;" property to it. This technique ensures that any float rules will be closed by the end of the container; therefore, the container's height will stretch down to contain all the elements within it, even the floating ones.
The same thing can be accomplished using a property called overflow. This property controls what happens to content that goes beyond the boundaries of a container's dimensions. Adding a property of "overflow:auto;" to a container will make it automatically adjust its size to fit all the content inside it. As you can see in the example below, you get the same result with either approach. It's up to you which way you'd prefer to handle it.
Z-index (layer depth)
This default order won't always work for our layout plans, especially as ideas and designs get more detailed and complicated. When we need added control over which elements appear in front of others, we can use the z-index property. This property can be applied to a positioned element, whether relative, absolute or fixed. However, it will not have any effect on a static element.
