web前端细节性问题(面试时可能遇到的问题)——div+css(2)

1.position定位属性

四个定位方法，如下：

a.绝对定位absolute  h2{

   top:100px;

   left:50px;

   position:absolute;

}

  b.相对定位 relative  .h2-pos-right{

left:-20px;

        position:relative;     //相对正常范围的向右移动；

}

c.固定定位 p.two{
position:fixed;
top:30px;
right:5px;
}

d.z-index  结合position一起使用 

   代码如下：  

z-index默认值为0；当z-index=-1时，优先级过低；z-index=1时，优先级过高；

img.x{
position:absolute;
left:0px;
top:0px;
z-index:1
}

<h1>这是一个标题</h1>
<img class="x" src="/i/eg_mouse.jpg" /> 
<p>默认的 z-index 是 0。Z-index 1 拥有更高的优先级。</p>

2.阴影区域——shadow

a.文本阴影：text-shadow

b.元素块周边阴影：box-shadow

注意：box-shadow 存在浏览器兼容的问题， 

   //Firefox4.0-

-moz-box-shadow: 投影方式 X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色; 

  //Safariand Google chrome10.0- 

-webkit-box-shadow:投影方式 X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色; 

 
 //Firefox4.0+、 Google chrome 10.0+ 、 Oprea10.5+ and IE9 

box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;

3.文本垂直对齐时，采用两个属性

a.行高：line-height

b.高度：height 

设置对齐时，a和b的值必须保持一致。

 

4.对checkbox复选框的大小设置，采用position定位模式

         代码如下：    input [type="checkbox"]{

top:5px;             

left:0px;

width:18px;

height:18px;

font-size:18px;

position:absolute;   //绝对定位；

}

5.cursor: pointer;

表示鼠标经过button时，会显示出手掌的形式。

6.写代码css时，需要注意将css样式进行简便式样的书写，即需要联合css代码

代码如下：*{

margin:0;

padding:0;

list-style-type:none;

}

7.写样式表时，对于字体大小的设置font-size

一般对于input譬如“checkbox，text，password”，

需要将字体设置为14px，以达到界面的美观度。