Some details that should be paid attention to in the layout of div+css-CSS Tutorial-php.cn

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

炎欲天舞

Release： 2017-08-03 17:16:32

Original

1323 people have browsed it

　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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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效果）

Copy after login

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>

Copy after login

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!