CSS样式问题集锦

这里记录一些我在网页制作过程中曾经遇到的问题，把它帐在这里，希望对大家有所帮助。

1. iframe不同时出现滚动条
   iframe的属性中设置：scrolling:no，在iframe引用的页面中加上以下样式：
   html,body{
     overflow-x:none;
   }  
   
2. 滚动条样式
   SCROLLBAR-FACE-COLOR: #2A024D;
    SCROLLBAR-HIGHLIGHT-COLOR: #0042FF;
    SCROLLBAR-SHADOW-COLOR: #000000;
    SCROLLBAR-3DLIGHT-COLOR:#FDFDFD;
    SCROLLBAR-TRACK-COLOR: #000000;
    SCROLLBAR-ARROW-COLOR: #0042FF;
    SCROLLBAR-DARKSHADOW-COLOR: #000000;（颜色当然还是换自己喜欢的了...^^） 
   

   一、滚动条的轨迹，记作：scrollbar-track。所谓“轨迹”，指滚动条的滑动块运行时所必经的路线。
   二、滚动条的滑动块，即在它上面按下鼠标左键不放可上下或左右移动的滑动块以及滚动条两头的小方块，记作：scrollbar-face。face即滚动条的“脸”，注意它有三张“脸”：滑动条和两头的小方块。
   三、滚动条亮边框部分，记作：scrollbar-highlight。这个亮边框，和表格的亮边框概念是一样的，即左边和上边部分，滚动条的亮边框部分是指滚动条的“脸”（即滑动块和两头小方块）的亮边框。
   四、滚动条亮边框部分的外围还有一个立体修饰部分，记作scrollbar-3dlight。3d即立体的意思，它将包围在滚动条亮边框部分的外边。
   五、滚动条阴影部分，指主滑块和两头方块的阴影，位于左边和左下，记作：scrollbar-shadow。
   六、滚动条阴影部分还有一个强阴影部分，记作scrollbar-darkshadow，它包围在阴影部分的外边。
   七、滚动条两头方志标志箭头，记作：scrollbar-arrow，箭头方向为向下、向上、向左、向右。

3. 在xhtml中，使用body无法控制滚动条样式问题
   使用body,html{}

4. input元素与文字的垂直居中问题
   <p>过长内容自动显示省略号
   .dd{
     width:20px;
     text-overflow:  ellipsis; /*有的浏览器不这样写，具体请上网查一下。*/
     overflow:hidden;
     white-space:nowrap;}
   <div class="dd">这是个很长很长很长很长很长的文本</div>
   不知大家有没有想过，对于a也是一样的，只是多个设置display:block
   <input type="text" name="author" id="author" style="vertical-align:middle" />
   <label for="author"><small>呢称</small></label>
   </p>

   就是给Input加上vertical-align:middle属性。
   将支持valign 特性的对象的内容与对象中部对齐

5. img元素与文字的垂直居中问题
   img元素有个属性valign是控制其后面的元素与之的对齐方式，使用middle即可

6.  div内部文字垂直居中
   <div style="height:22px; line-height:22px;">大家好。</div>
   也就是说设置height与line-height一致即可。这种方法对单行文字有效。

7. 表格宽度固定，不受内容影响 
   table{table-layout:fixed}
   这样的好处是：据说速度会比较
8. 高度为1px的单元格或div，一般用来做分隔线
   以div为例：关键的内容要放一个空格的转义符
   .o{height:1px;line-height:1px;height:1px}
   <div class="o">&nbsp;</div>
   这样很巧妙，就不用放一个1宽、高都是的图片了。
9. 过长内容自动显示省略号
   .dd{
     width:20px;
     text-overflow:  ellipsis; /*有的浏览器不这样写，具体请上网查一下。*/
     overflow:hidden;
     white-space:nowrap;}
   <div class="dd">这是个很长很长很长很长很长的文本</div>
   不知大家有没有想过，对于a也是一样的，只是多个设置display:block
10. 使用子选择器、并列等方式减少代码数量
    如：div.m表示类为m的div元素
    　　.m a表示类为m的元素中的a；#m a就表示ID为m的元素中的a
    　　a,b表示a及b
    灵活的使用这些技巧，可以极大的减少css代码的数量，而且便于维护
11. 如何控制table、div等元素高度为100%，也即占满整个窗口
    html,body{height:100%}
    然后，再对table、div等元素设置高度为100%就可以了。