"CSS Book for Everyone" chapter fourth: Positioning elements

1. Understanding Box Modeleach element will generate a box on the page, as shown in:  A box includes the following sections

• Margin: Sets the distance between the box and adjacent elements

• Border (border): Sets the thickness, style, and color of the border

• Padding (padding): Sets the distance between the contents of the box and the border

• Content: Content display Area

2. FRAME (Border)

Widths (width)	Thin, medium, thick, any length unit (EM, px, percent)
Styles (Style)	None, hidden, dotted, dashed, solid, double, groove, Ridge, inset, outset
Colors (color)	Any color value (RGB, 16 binary, keyword)

There are two ways to specify the style of the border: Specify separately and uniformly specify

/*Specify styles individually*/p.warning{Border-width:4px;}P.warnin{Border-style:Solid;}p.warning{Border-color:#F33;}/*unify a specified style*/p.warning{Border:4px Solid #F33;padding:2px;}/*Specify a public style first*/p.warning{Border:Solid #F33;padding:2px;}/*then specify the width of each edge (top right and bottom left)*/p.warning{Border-width:4px 2px 2px 4px;}

3. Inner margin (Padding)

Shows the difference between a 10px without an inner margin and an inner margin

4, margin (margin)

Shows the browser's default margin and the difference between setting the margin to 0

It is important to note that vertical margins do not add directly, and overlap occurs

/* set the same margin for three paragraphs, where the top margin is 50px and the bottom margin is 30px */ /* When the top and bottom margins meet, they fold each other until one element's margin touches another */  {width:400px;   Height: 50px; border:1px solid #000; margin: 50px 0 30px 0; background-color:#FFF;}

As shown, the original vertical margin should be 80px (the bottom margin of one element is 30 + the top margin of another element 50), but in fact, the vertical margin is 50

5, further understand the size of the box

Just set the width of the box

Set width + inner margin

Set width + inner margin + border

Set width + padding + border + margin

That is, the padding and the border will also increase the distance of the box, for example, we need to keep the total width of a column at 170px, initially, width is set to 170px exactly, but if we add 10px padding, then in order to keep the total width unchanged, Width will be modified to 150px, this is not conducive to maintenance.

The workaround is that we define an external div to specifically set the total width, and then define an inner div to add an inner margin

6. Float and Clear 

clear

left, right, both, None

/* float the image to the left, so the text wraps around the right side of the image */{width:400px; margin:0 ; border:1px solid red; background-color:#FFF;}  {float:left; margin:0 4px 4px 0;}

As long as you float an element with a width set, and there is enough space in the page, the corresponding elements are arranged like columns (when you float an image with built-in width in this way, you do not need to specify its width via CSS).

/*when a floating image and a paragraph with a specified width are in the same time, if the page space is large enough, the text wrapping effect stops and the original text forms a column next to the image*/P{float: Left;width:200px;margin:0;Border:1px solid Red;Background-color:#FFF;}/*since the image originally has a width value, there is no need to set*/img{float: Left;margin:0 4px 4px 0;}

The way to clear floats is simple, we add an invisible element between elements that need to be clearly floated, and then set the clear property to

/* add a new element div between elements */ <div class= "Clearthefloast" ></div><p>.clearthefloast {Clear:both;}

7. Element Positioning

Position

The user determines the reference point where the element box is positioned on the page

Static, relative, absolute, fixed, inherit

Element positioning is usually divided into four situations:

• Static positioning: The default location where elements are located, no special settings are required

• Relative positioning (relative): After setting the relative position value, you can offset the element relative to the default position

• Absolute positioning (absolute): After setting the absolute position value, you can leave the element independent of the document flow and the default position is determined by the top level element (body).

• Fixed positioning: After setting the value of a fixed position, you can leave the element independent of the document flow and its location depends on the window in the browser that displays the page.

/*assuming Div2 inherits from Div1*/Div2{Top:10px; Left:20px;}/*no change, because the default state is static*/Div2{position:Absolute;Top:10px; Left:20px;}/*Div2 will be positioned according to body.*/Div2{position:relative;Top:10px; Left:20px;}/*Div2 will be positioned according to Div1.*/

Position changes after using relative positioning of paragraph

Use absolute positioning and fixed positioning:

When the window is scrolled, the absolute positioning moves with the window (because the body moves according to the movement), but the fixed position remains the same (because the Fixed position Reference window does not change)

"CSS Book for Everyone" chapter fourth: Positioning elements