Having no layout whatsover is almost ok if all you want is one
big column of content. However, if a user makes the browser window really wide,
it gets kind of annoying to read: after each line your eyes have a long
distance to travel right-to-left to the next line. Try resizing your browser to
see what I mean!
Before we fix this
problem, let's make sure we're clear on the very important
display property.
the "display" property
display is CSS's most important property for controlling layout. Every
element has a default display value depending on what type of element it is.
The default for most elements is usually block or inline. A block element is
often called a block-level element. An inline element is always just called an
inline element.
block
<div>
div is the standard block-level element. A block-level element
starts on a new line and stretches out to the left and right as far as it can.
Other common block-level elements are p and form, and new in HTML5 are header, footer, section, and more.
</div>
inline
span is the standard inline element. An inline element can wrap some
text inside a paragraph <span> like this </span> without disrupting the flow of that paragraph. Thea element is the most
common inline element, since you use them for links.
none
Another common display value is
none. Some specialized
elements such as scriptuse this as their default. It is commonly used with JavaScript
to hide and show elements without really deleting and recreating them.
This is different from
visibility. Setting display to none will render the page as though the element does not exist. visibility: hidden; will hide the element, but the element will still take up the
space it would if it was fully visible.
other display values
There are plenty of more exotic display values, such as
list-item and table. Here is an exhaustive list. We'll discuss inline-block and flex later on.
extra credit
As I mentioned, every element has a default display type.
However, you can alwaysoverride
this! Though it wouldn't make sense to make an inline div, you can use this to
customize the display of elements that have particular semantics. A common
example is making inline
li elements for horizontal
menus.
No comments:
Post a Comment