CSS memo (090114 update ing ......)

After setting float outside the margin setting box in the padding setting box, you must set the width and height to be insufficient.
Float: Left: clear: Both; line feed is displayed on one line.

Div pop-up position: absolute; // absolute position (key)Visibility: hidden; // hide

Align text with text input box vertical-align: middle;
When the float attribute is set for a block object, it no longer occupies one row. Float to the left or right

Fixed width = 200px self-adaptive width = 50%
Fixed width center margin: 0px auto; // Div P Center

Block blocks occupy a whole row. Other objects are displayed in the next row.

Inline inline the next row of objects in the same row shows inline no width or height varies with the content
Div DL H1-H6 HR ol ul Li

To use the float attribute, you must define a width for the element, instead of setting the width and height of the floating object.

Clear floating clear: Left clear floating object on the left. If there is floating object on the left, the current element is displayed under the floating object.

A clear definition of an element does not affect the front and back elements, but only affects the position of the element.

The element added with float is automatically converted into a block element (<div>)
. Clear {clear: Both;} Clear class (ie highly adaptive)

Table is used to display and organize data.
Display All images with background

The higher the Z-index value, the higher the stack level.

First, it is a container, which can be div, Li, TD, etc. First, define the width. "white-space: nowrap" is to force all text to be displayed in a row without returning rows.
"Text-overflow: ellipsis" is the key. Text-overflow is a new attribute of css3, which is supported by IE6 or later versions. It can contain two parameters: Clip [not displaying the omitted mark (...), but a simple crop], ellipsis [displays the omitted mark (...) when the text in the object overflows (...)

]. Therefore, this method does not support Firefox. Therefore, we need to add overflow: hidden to hide unnecessary words in ff.

The ellipsis is displayed when the content controlled by CSS exceeds the container width.

Code
Li {} {
width : 50px ;
whitelist : nowrap ;
text-overflow : ellipsis ;
overflow : hidden ;
}

Ul, ol
What does UL and ol respectively mean? UL and ol represent the unordered list and ordered list respectively. In terms of semantics, they are all used to represent the content of a type of parallel relationship,

For example, when we go to the top of the store for shopping, we have a shopping list. What we want to buy above is a parallel relationship, which can be separated by a comma in Chinese.

The difference between them is whether there is order. For example, the shopping list has no order. It doesn't matter what you buy first, however, the list of scenic spots on a travel itinerary is sequential.

Ul is often used in the navigation bar. Because the navigation elements conform to the parallel relationship mentioned above, the tree navigation structure can also be expressed by nested ul. Here, navigation can be our common horizontal or vertical navigation bar, or even map navigation, for example

For example, on map of China, different provinces have different heat zones. If I say that in mainstream browsers, users can see the map of China and click the province hot zone directly. In browsers that do not support CSS, users can see a province with plain text.

The name list uses the same XHTML file, which is fully implemented through CSS or even not dependent on JavaScript. Do you believe this?

In addition, if you want to display a thumbnail of a gallery, these images can also be placed in UL, because these images are also tied. They can be automatically arranged in horizontal lines, and the second row is automatically arranged in full rows. CSS can make them wait in line, while

You don't need to fix the image in a grid like a table. In fact, table is used for layout, just like holding content in jail, locking the content in a grid won't let it run around; the semantic-compliant XHTML is like an open stage

As long as you know how to use CSS rules, the content will naturally find a suitable place to stand.

DL
Have you heard of DL? Because those visualization tools generateCodeIs there ever DL? DL indicates the definition list, that is, the definition list. It contains not li, but DT and DD, that is, definition.

Term and definition description. DL is designed as a dictionary word and interpretation list, for example:
<DL>
<DT> Apple </DT>
<DD> Apple </DD>
<DT> boy </DT>
<DD> boy </DD>
</Dl>

However, if the semantics you need to represent is similar, and a list contains both definitions and explanations, you can also consider using DL.

Div height or width = height + padding or width + padding
Padding controls the distance between content and border.

To wrap two blocks (not in one line), you must set a div with a larger margin distance. A span with a larger margin is the addition of two margin values.
The sub-Div's margin takes the content of the parent block as a reference

If the height and width of the parent block are set, the content element is squeezed by the padding. The distance between the margin control block and the block

Position: the distance between absolute and the page (body) does not belong to the previous layer (Child class does not belong to the parent class)
Position: the definition of relative to the parent block (the content of the parent block is the benchmark and does not include padding). The subclass is still the parent class.
Non-stacked and offset-able
The relative location of the positioning element does not affect the location of other elements.

Define CSS at the beginning

Code
* {} {
Margin : 0 ;
Padding : 0 ;
Border : 0 ;
Font-size : 12px ;
Font-family : Arial, verdana, sans-serif ;
/**/ /*Table-layout: fixed;*/
Word-wrap : Break-word ;   /**/ /*For IE*/
Word-break : Break-all ;



}

Set attributes in JS$ ("Liname"). style. Display = "Block ";
Set in HTML directly<P style = "color: red;"/>
<P class = "A"/> class selector. P
<P id = "A"/> ID Selector# P id can only appear once. class can appear multiple times. ID takes precedence over class.
Simple selector (p) <class selector (. p) <ID selector (# P)
Tag> Document Header> External Application

Margin Boundary
Pad the blank between the boundary and layer content
White space outside the border of the Border border Layer
 
TD. W1 (W1 class name) // No space is allowed
# Nav. Selected // enter a space

A: link styles that have not been accessed
A: style accessed by visited
A: Hover Style
A: The style of the active point and mouse is written in sequence.

The Min-width attribute is used.
Ul. sysset label {Min-width:100px; display: block; float: Left; text-align: Left ;}
/*\*/* HtmlUl. sysset label {width: 100px;}/**/ie bug

All pages are as high
# Pagemain {width: 900px; Min-Height: 360px; Height: auto ;}
* Html # pagemain {Height: 360px;}/* bug */

RPT generation <tr> <TD> </tr>
Datalist generation <Table> <tr> <TD> </tr> </table>
RPT alternate line: Find ul in the background to add attribute code or foreground operations

Code
Protected   Void Rptmy_itemdatabound ( Object Sender, repeateritemeventargs E)
{
Int I = E. Item. itemindex;
If (I %   2   =   0 )
{
Htmlgenericcontrol changetr = (Htmlgenericcontrol) E. Item. findcontrol ( " Changetr " );
If (Changetr ! =   Null )
{
Changetr. Attributes. Add ("Style","Background-color: # ffffcc");
}
}
}

Several element style attributes are the same as P, TD, TR {...}

Define multiple attributes for an element: Li string {...}
Multiple class definitions <Div class = "One Two">
. One {..}
. Two {..}