CSS3 Beginner Chapter _6 (layout/browser default style reset)

CSS Layout
When it comes to layouts, you have to mention the core <div> tag of the layout, which, like other labels, is an XHTML-supported label specifically for the layout design of the container label. In CSS layout, div is the core object of this layout, our page layout is no longer dependent on the table, only from the use of Div, to make a simple layout only need two things: div and CSS. So we call this layout the div + CSS layout.

Semantic elements

<FIGURE>: Tags stipulate separate flow content (images, charts, photos, code, and so on), the content of elements should be related to the main content, but if deleted, it should not affect the flow of the document.
<FIGCAPTION>: Label definition <figure> The title of the element, placed in the position of the first or last child element of the "figure" element.

 <  figure  >  <  img  src  = "url"   Alt  = "Picture"   = "width"   height  = "height"  >  <  figcaption  >  this is the title </ figcaption  >  </ figure  >  

1.display (element display mode)
syntax : display:block | none | inline | Inline-block
description : Used to set how elements are displayed.

Block: Blocks object refers to the element is displayed as a block, the default display state will occupy the entire row, the other elements can only be displayed on a separate line.
Inline: The Row object is the opposite of block, which allows other elements to be displayed on the same line.
None: Hide Objects

Div {Display:block}

2.float (floating of elements)
syntax : float:none | Left | Right
description : Used to control whether the element is floating, the element's display property changes to "inline element". The purpose of the float is to break the default display rules for the flow of documents, sometimes to make the elements appear as we wish, using the Float property.
Attention:
1. Any element declared as float is automatically set to a "block-level element".
2. Floating elements in the standard browser are out of the flow of the document, so the elements behind the floating elements occupy the position where the floating elements should be.
3. If there is not enough space in the horizontal direction to accommodate the floating element, move to the next line.
4. Text content surrounds the floating element.
5. Floating elements can only float to the left or right.

Div { float:left;}

3.clear (clear float)
syntax : clear:none | Left | Right | Both
Note : Since there is floating, naturally there is clear floating, it has the same meaning and floating, all for the page layout.

None: Default value. Allowed to have floating objects on both sides
Left: does not allow floating objects
Right: Do not allow floating objects
Both: Floating objects are not allowed

{ Clear:both;}

4.position (positioning of the element)
syntax : position:static | Absolute | Fixed | Relative

Static: No positioning, default value
Absolute: Absolute Positioning
Relative: Relative positioning
Fixed: Stationary positioning

Absolute Description:
Out of the document flow.
Positioning by Top,bottom,left,right.
If the parent element position is static, it is positioned with the body coordinate origin.
If the parent element is position as relative, it is positioned with the parent element.

{ position:absolute; Left:100px; top:100px

Elative Description:
Relative positioning (relative to its original position)
Do not detach from document flow
Refer to its own static position through top,bottom,left,right positioning.

{ position: relative; Left:100px; top:100px;}

Fixed Description:
Fixed positioning is really just a special form of absolute positioning;
Fixed positioned elements are fixed relative to the browser window, not relative to their containing elements;
Even if the page scrolls, they will still be in the same place as the original in the browser window.

{ position: fixed; Right:0; Bottom:0;}

5.z-index (cascading relationships of elements):
syntax : Z-index:auto | Number
description : When elements overlap, the order in which they cascade can be set through the Z-index property. Objects of a larger number value are overwritten by objects with smaller number values. The default value is 0.

{ Z-index:1}

CSS Reset

In the HTML tag in the browser has a default style, such as the P tag has a bottom margin, the strong label has a font bold style, the EM tag has a font tilt style. There will be differences between the default styles of different browsers, such as the UL default with indentation style, under IE, its indentation is achieved through margin, and Firefox, its indentation is implemented by padding. When switching pages, the browser's default style often brings us trouble and affects development efficiency. So the solution is to remove the browser's default style from the beginning, or more precisely by redefining the label style. Overrides the CSS default property of the browser. The simplest way to say this is to overwrite the default style provided by the browser! This is CSS reset.

The simplest reset:

* {margin:0; padding:0;}

Note : The general CSS Reset does not need to write their own, you can go to use the online big god Open source CSS files, http://cssreset.com/

CSS3 Beginner Chapter _6 (layout/browser default style reset)