Some details that should be paid attention to in the layout of div+css

　The first point of note: the use of selectors (label, class, id)

Among the three selectors, id (#) has the highest priority, filter based on id name Out the unique element;

Enter as follows:

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

The second is class (.) which has a higher priority and unique ones are filtered out based on the id name Element;

Enter as follows: ##

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

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

Enter as follows:

p{text-align:center; vertical-align:middle; line-height:100px}
<p>微软雅黑</p>

Second note: the use of outer margin, inner margin padding and flow float

The outer margin and inner margin padding are adjusted relative to the border. The four borders are adjusted clockwise by

top, right, bottom, left;

Special use: Margins are generally used in conjunction with the flow float. The flow float specifies a direction for the operated object (left flows to the left, right flows to the right), and the operated object is laid out in this direction.

is as follows (navigation Column production):

.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">首页</p>    　　　　
　　　　<p class="text">产品介绍</p>    　　　　
　　　　<p class="text">产品图片</p>    　　　　
　　　　<p class="text">产品参数</p>    　　　　
　　　　<p class="text">关于服务</p>    　　　　
　　　　<p class="text">联系我们</p>　　
　　</p>

In addition, padding: if padding is added, the element will become larger accordingly, and 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>（这里height由100px调整为80px，加padding效果）

　

The third note: Conditions for using hierarchical z-index

When using hierarchical z-index, you must match the position attribute. Adjustment; if the setting of attribute position is missing, there will be no display effect.

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>

The above is the detailed content of Some details that should be paid attention to in the layout of div+css. For more information, please follow other related articles on the PHP Chinese website!