CSS Mastery摘要(5)--Content Layout
out of the flow of the page. On the flipside, this is what makes positioning an important part of CSS.
As a quick recap from Chapter3:
•Elements are initially positioned as static, meaning that block-level elements stack
up vertically.
•We can give elements relative positioning , allowing us to nudge them around relative
to their original position without altering the flow of elements around them. Doing
so also creates a new positioning context for descendant elements. That last fact
is what makes relative positioning really useful. Historically, the ability to nudge
elements around was an important ingredient in many old-school layout hacks, but
these days we can often get by without them.
•Absolute positioning allows us to give an element an exact position with regard to
the nearest positioning context, which is either an ancestor with a positioning other
than static, or the html element. In this model, elements are lifted out of the page
flow, and put back relative to their positioning context. By default, they end up where
they originally should have ended up were they static, but without affecting the
surrounding elements. We can then choose to change their position, relative to the
positioning context.
•Fixed positioning is basically the same as absolute, but the positioning context is
automatically set to the browser viewport.
Negative margins are completely valid in CSS, and have some interesting behaviors:
•A negative margin to the left or top will pull the element in that direction,
overlapping any elements next to it.
•A negative right or bottom margin will pull in any adjacent elements so that they
overlap the element with the negative margin.
•On a floated element, a negative margin opposite the float direction will decrease
the float area, causing adjacent elements to overlap the floated element. A negative
margin in the direction of the float will pull the floated element in that direction.
•Finally, the behavior of negative margins to the sides is slightly moderated when
used on a nonfloating element without a defined width. In that case, negative
margins to the left and right sides both pull the element in that direction. This
expandsthe element, potentially overlapping any adjacent elements.
Any element that has an explicit z-indexdeclaration set to a positive value is higher in the stack than an
element without one. Elements with negative values are shown behind elements without az-index.
But the z-index is not the only thing controlling how elements are stacked. We also have the concept of
a stacking context. Stretching the deck-of-cards analogy a bit, each card can also be its own deck, and cards
can only be sorted in relation to the current deck level. There’s always a root stacking context to begin with,
and positioned elements with a z-index other thanautoare sorted inside that. As other contexts are formed,
they create a hierarchy of stacks.
Specific properties and values create these new stacking contexts. For example, an element with
position: absolute and az-indexdeclaration set to anything butautowill form a stacking context for
descendant elements inside it.
From inside a stacking context, it doesn’t matter how large or small the z-indexvalue is: you can’t
reorder something in relation to another stacking context
The rules for how the baseline of line boxes is decided, and how it affects inline and inline-block
elements, are rather complicated. If you want to dive deep, we recommend Christopher Aue’s article “VerticalAlign: All You Need To Know” (http://christopheraue.net/2014/03/05/vertical-align/). For the purpose
of using inline block display as a layout tool, there are two important takeaways in terms of vertical alignment:
• To make inline blocks align to the top (much like floats do),
set vertical-align: top.
• To vertically center contents with regard to each other, make sure they are all inline
blocks, and then use vertical-align: middle.
Unlike regular blocks, tables without a set width have a “shrink to fit” width unless the contents of the
cells push them out to fill their parent container.
There are two algorithms for how the width of each column in a table row is calculated. By default, the
browser will use the “auto” algorithm. It is somewhat undefined, standards-wise, but it basically allows the
table to adapt the width of the columns based on the cell contents of the table as a whole.
The other algorithm is the “fixed” table layout. Using table-layout: fixed, column widths are
determined based on the first row of the table. Any declared widths on the first row encountered “win,” and
if subsequent rows have wider content, that content will wrap into multiple lines inside the cells, or overflow.
While setting the table-layout tofixed is not technically necessary in this example, it’s common to
use it when using table display modes as a layout tool, to avoid any surprises from the automatic mode.
When using the table display modes for layout purposes, you should be aware that other quirks of table
rendering apply as well. For example, it’s not possible to apply margins to an element rendered as a table
cell, and the behavior of positioning as applied to table cells is shaky at best.
When considering floats, inline blocks, and table display modes as tools for horizontal layout as well as
vertical alignment, how do we determine which one to use? There are pros and cons for each method:
• Floats are able to wrap onto multiple lines, as are inline blocks. Floats also “shrinkwrap” down to a size based on their contents, which can be a useful behavior. On the
negative side, floats may give you grief when it comes to containing or clearing them,
and when floated items get stuck on taller preceding floats. On the other hand, floats
are somewhat source order independent, as you can float some elements on a row
right and the others left.
• Inline blocks have whitespace issues, but those are solvable, albeit with some hacky
solutions. On the positive side, inline blocks can also wrap onto multiple lines, they
give you some control over vertical alignment, and they have the same “shrink-wrap”
sizing behavior as floats.
• Using table display modesfor horizontal layout also works great, but only for
nonwrapping rows of content. They have the same quirks as tables, meaning,
for example, that they are unaffected by margins, and the items inside cannot be
reordered. They also allow simple vertical centering of their contents.
flexbox alignment solves the vertical alignment problem with very little code.