Some details that DIV+CSS should pay attention to in typesetting layout

　　 First Note: The use of selectors (tag, class, id)

The ID (#) in three selectors has the highest priority, and the unique element is filtered according to the ID name;

Enter as follows:

#menu {width:1200px; height:45px; background: #90F}<p id= "menu" ></p>

Second, Class (.) has a higher priority, filtering out the unique element based on the ID name;

Enter as follows:

. text{width:200px; height:45px; text-align:center; line-height:45px; vertical-align:middle}<p class= "Text" > </p>

The label has the worst priority and the element is selected according to the tag name;

Enter as follows:

P{text-align:center vertical-align:middle line-height:100px}<p> Microsoft Black </p>

　　Second note: The use of margin margins, padding padding, and flow float

Margins margin and the use of the inner margin padding is relative to the border adjustment, four borders on the right and left clockwise adjustment;

Special use: The margin margin is generally used in conjunction with flow float, flow float to the operation of the object specified a direction (left to Zoo, right flow), the object is operated by this direction to layout

The following (the creation of the navigation bar):

. text{        width:200px;     height:45px;     Float:left;     Text-align:center;     line-height:45px;     Vertical-align:middle   }. text:hover{             background-color: #000;        Color: #F00;       Cursor:pointer      } <p id= "menu" > <p class= "text" > Home </p>    <p class= "text" > Product introduction &L　　　　　　　　t;/p>    <p class= "text" > Product images </p>    <p class= "text" > Product parameters </p>    <p class= "text" > About services </p>    <p class= "text" > Contact us </p> </p>

In addition, the inner margin padding: If the inner margin is added, the element will be correspondingly larger, then it needs to be adjusted in the corresponding height attribute;

Enter as follows:

<p style= "width:100px; height:80px; Background-color: #90C; Float:left; padding:20px 0px 0px 0px "></p> (here height is adjusted to 80px by 100px, plus padding effect)

　Third note: Use Conditions for layered z-index

When using layered z-index, adjust with the Position property, or if the setting for the property location is missing, the effect is not displayed.

Enter as follows:

<p style= "width:300px; height:300px; Background-color: #0F0; position:relative; z-index:5px "></p><p style=" width:300px; height:300px; Background-color: #009; position:relative; z-index:2px; margin:-50px 0px 0px 50px "></p>