Asp. NET Dynamic website production (3)--CSS (2)

Preface:The CSS is divided into four classes to finish, the first class content see ASP. NET Dynamic website production (2)--css (1), the next content will be related to positioning, floating, box model (second Class), CSS application (third Class), CSS3 (fourth Class). Today's content is about positioning, floating, and box models in CSS.

content: The core content of CSS is expanded around the div tag.

1. Do static page first to consider the layout of the page, can be used <div></div> to divide the page into different modules, the equivalent of building a house.

2.<div></div> is a block element that corresponds to an inline element.

Block element Features: (1) The block element is displayed by default in the upper-left corner of the parent tag, and (2) The block-level element occupies a full line by default (fills the entire document stream). The commonly used block-level elements are: div,form,h1-h6,menu,ol,ul,table,p.

inline element (inline Element) features: (1) The size of the element in the row is affected by the text area and is not affected by the width and Height properties; (2) The inline element does not occupy a single row. The common inline elements are a,span,img,input,label.

The inline element becomes a block-level element: Display:block; The block-level element becomes an inline element: display:inline; There is also a display:inline-block, both the characteristics of the elements in the line, as well as the characteristics of the block elements, namely: height, width will be affected, But it does not fill a single line.

3. Floating: Float:left (the first element to the left, and the second element immediately after the first element, floating to the left), similarly: Float:right. After setting the float will affect the subsequent elements, so you need to clear the effect of floating, using: Clear:left,clear:right,clear:both.

4. Box Model: Set the model's border, inner spacing, outer spacing, that is, the box model has three elements: Border,padding,margin.

Border usage: border:solid 2px #000; border-top:dashed 2px #FFF;

padding usage: padding:10px; (indicates that both upper and lower left and right inner spacing are 10px)

padding:10px 20px; (indicates that the upper and lower spacing is 10px, the left and right inner space is 20px)

padding:5px 10px 20px (indicates that the inner space above is 5px, the left and right inner spacing is 10px, the inner space below is 20px)

padding:5px 10px 15px 20px (indicates that the inner space above is 5px, the right inner space is 10px, the inner space below is 15px, the left inner space is 20px)

can also be set individually: Padding-top,padding-right,padding-bottom,padding-left

The padding is the distance that the frame will be large and the size of the element will become larger. Padding is supported for inline elements.

Margin usage: Sets the outer spacing between blocks and blocks, with the same regularity as padding. However, margin only supports left and right outer spacing for inline elements, and upper and lower margins are not supported.

5. Positioning: Position:absolute (absolute positioning) and position:relative (relative positioning) and position:fixed (fixed position).

Position:absolute: When set to absolute positioning, the element is detached from the document stream, does not occupy a single line, is not affected by the float, and the element's orientation is affected by the form's upper and lower sides.

Position:relative: When set to relative positioning, the element is not detached from the document stream and is affected by the float, and the element's orientation is the parent tag of the relative element.

Position:fixed: Set fixed position, such as QQ bullet box. This setting is out of the document flow.

PostScript: More practice of the use of elements and attributes, in future applications will be used more.

Asp. NET Dynamic website production (3)--CSS (2)