Chapter 7 - Page Layout Basics

List which position values that remove elements from the normal flow.

fixed, absolute, and sticky

What are two important things you should do when defining floated elements?

1) Specify a width for a floated element unless the element already has an implicit width—such as an img element. 2) Other elements and web page content will flow around the floated element, so floated elements should always be coded before the elements that will display alongside them.

position property

A CSS property that defines how objects should be placed on the page. Values include: static (default): renders elements in normal document flow; not affected by top, right, bottom, or left properties. relative: positioned relative to its normal position; Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element. fixed: positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element. A fixed element does not leave a gap in the page where it would normally have been located. absolute: positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed). However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling. Note: Absolute positioned elements are removed from the normal flow, and can overlap elements. sticky: is positioned based on the user's scroll position. A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed). NOTE: This property is not supported by Internet Explorer.

pseudo-class selector

A selector is used in CSS that selects part of a document based on characteristics. The most commonly known pseudo-selectors are those used on links. Example: a:link, a:hover, a:focus, a:active, a:visited

clear vs overflow property

Although the clear property is widely used, in this example, it is more efficient to apply the overflow property to the container element such as a div element. This will clear the float, avoid adding an extra line break tag, and ensure that the container element expands to enclose the entire floated element.

box-sizing

Defines how the width and height of an element are calculated. There are two main values: content-box (default): box sizing model that does not include the width of padding or borders; this is the default way that browsers render. border-box: declaration to configure the browser to also include the values of the border and padding when calculating the width and height properties of an element. You should use box-sizing: border-box as follows: * { box-sizing: border-box; }

normal flow

Process by which browsers display the elements on the page line by line in the order they appear in the web page source code.

list-style-type property

Specifies the type of list-item marker. When set to none, there is no list-item marker.

display property

The CSS property that specifies how browsers should display an element. Commonly used values include: inline: Displays an element as an inline element (like <span>). Any height and width properties will have no effect block: Displays an element as a block element (like <p>). It starts on a new line, and takes up the whole width

float property

The CSS property used to float elements on a specified margin. The browser renders these elements using normal flow and then shifts them to either the right or left as far as possible within their container (usually either the browser viewport or a div element). float:right; - float element to the right side of the container float:left; - gloat element to the left side of the container

navigation list

list-style-type: none; combined with display: inline; is commonly used to create web page navigation. Example: nav ul { list-style-type: none; } nav li { display: inline; } The nav and ul retain their normal display behavior (display: block). In order to link up pages, the link tab (<a>...</a>) is used. To remove the default link underlining, add the following to the CSS file: nav a { text-decoration: none;}

overflow property

often used to clear a float, although its intended purpose is to configure how content should display if it is too large for the area allocated

clear property

used to terminate, or clear, a float

CSS Sprites

using CSS to configure the small graphics combined in the sprite as background images for various web page elements