flexbox
-allows us to have a much more generalized (and thus reusable) style of creating columns
Describe the differences between relative and absolute positioning
...
What is normal flow in the context of CSS?
...
Describe how block-level elements are different from inline elements. Be sure to describe the two different types of inline elements
...
In CSS, what does floating an element do? How do you float an element?
...
In CSS positioning, the concept of a positioning context is important. What is it and how does it affect positioning? Provide an example of how positioning context might affect the positioning of an element
...
Briefly describe the three ways to construct multicolumn layouts in CSS. Be sure to discuss the relative advantages and disadvantages of each approach
...
Write the CSS and HTML to create a two-column layout using positioning, floating, and flexbox approaches
...
What is responsive design? Why is it important?
...
What are the advantages and disadvantages of using a CSS framework
...
Explain the role of CSS preprocessors in the web development workflow
...
What advantages do a CSS naming convention provide?
...
How are transitions different from animations?
...
normal flow
-to understand CSS positioning and layout, it is essential that we understand this distinction as well as the idea of
normal flow
-how the browser will normally display block-level elements and inline elements from left to right and from top to bottom
block-level elements
-<p>, <div>, <h2>, <ul>, and <table>
-each are contained on their own line
inline elements
-do not form their own blocks but instead are displayed within lines
-once a line is filled with content, the next line will receive the remaining content, and so on
-if the browser window resizes, then inline content will be "reflowed" based on the new w
positioning elements: absolute
-the element is removed from normal flow and positioned in relation to its nearest positioned ancestor
-problems: elements are taken completely out of normal flow, meaning that the positioned element may overlap subsequent content
positioning elements: fixed
-the element is fixed in a specific position in the window even when the document is scrolled
positioning elements: relative
-the element is moved relative to where it would be in the normal flow
positioning elements: static
-the element is positioned according to the normal flow
-default
z-index
-property named for the z-axis
-can overlap a figure either over or under the text
float property
-can displace an element out of its position in the normal flow
-an element can be floated to the left or right
-it is moved all the way to the far left or far right of its containing block and the rest of the content is "reflowed" around the floated elem
clear property
-stops elements form flowing around a floated element
-left, right, both, none
containing floats
-another problem that can occur with floats is when an element is floated within a containing block that contains only floated content = containing block disappears
positioning context
-places 2 elements on top of each other, or selectively hides and displays elements
-relative positioning creates
positioning context
for a subsequent absolute positioning move
-position:
relative
;
using display
-
display
: none = hides the overlayed image
-the preferred way to hide; by adding this additional class to the element, this makes it clear in the markup that the element is not visible
-display: auto
-visibility: hidden