CSS Memory (one)

1, the introduction of CSS methods:

A) Add <link rel= "stylesheet" type= "Text/css" href= "My.css" in the head section, and import the external CSS file.

b) in the Head section, add
<style type= "Text/css" >
DIV{MARGIN:0;PADDING:0;BORDER:1PX red Solid;}
</style>

c) Add <div style= "border:1px red solid" directly to the label on the page. > Test Information </div>

d) @import Import

<style type= "Text/css" >
@import URL (my.css);
</style>

2. Box model

Add the following code to all the pages to tell the compiler to use the standard box box model to interpret the code:

<!doctype HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/ Xhtml1-transitional.dtd ">

3. Positioning:

The content in CSS about positioning is:position:relative | absolute | static | fixed

Staticno special settings, follow the basic positioning rules, cannot passZ-indexhierarchical grading.
Relativewithout leaving the document stream, refer to its own static position throughTop,bottom,left,rightpositioning, and can beZ-indexhierarchical grading.
Absoluteout of the document flow, throughTop,bottom,left,rightpositioning. Selects its nearest parent anchor element when the parentpositionto beStaticwhen theAbsoluteelement will be inBodycoordinates origin, which can be positioned byZ-indexhierarchical grading.
Fixedfixed positioning, where he fixed the pair like a visual window rather than aBodyor a parent element. Available throughZ-indexhierarchical grading.

cascading ratings for positioning in CSS:z-index:auto | number;

Auto follows the positioning of its parent object
number has no unit integer value. Can be a negative number.

The position property is used to set positioning properties:

Relative: Relative positioning (offset only in performance)

Absolute: Absolute positioning (out of document flow)

relative positioning: The element still occupies the original position in the document flow, but relative offsets are generated based on the original position on the " performance " .

Relative positioning diagram:

The dashed portion of the example diagram is the original position of the element and is preserved, with the element offset to the right 30pxfrom its original position anddownward by 20px.

Absolute Positioning : The block element is completely removed from the document flow and the position of the element is determined by the precise positioning of the attribute value. The element's original position in the document flow disappears, and the element is positioned to generate a block-level element box.

This is illustrated below:

After absolutely positioning, the original position of box 2 disappears, Box 1 and box 3 are together. the anchor valuefor box 2 (top and left values) is relative to its positioned ancestor element.

The use and relative positioning of the top elements in absolute positioning are consistent, please refer to the relative positioning article for instructions.

Tips

1. 1. If you use absolute positioning, you must specify At least one of the left, right, top, bottom properties
   2. Using an absolutely positioned element, if there are no positioned ancestor elements, the relative position may be the browser canvas (the browser can display the page) body or HTML element

CSS Memory (one)