css技巧与经验

         之前写了几个项目，css也遇到了几个问题，在这里，我还是希望回顾和思考我以前遇到的问题。一下是我的总结

         1.div高度崩塌问题高度无法自适应，即当div内部元素使用浮动时，父类div的高度为0；

        解决：

         (1)为父类设置固定高度，但这样会使父类失去自适应高度的功能。

         (2)为父类也设置浮动。

         (3)为父类css增加overflow;auto;

       2.文字与图片对齐问题，文字和图片不在同一高度。

       解决：

      对文字和图片设置vertical-align:top;或是vertical-align：middle。

      3.网页边距留有空白问题

        解决：对所有HTML标签进行重置，即设置css

         body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, table, th, td, embed, object {
          padding: 0; margin: 0; 
            }

      4.清除浮动

         解决：
          (1）对浮动元素的下一个兄弟元素css设置为clear:both;

          (2)   对浮动元素的父元素设置css：display:block;zoom:1;overflow:hidden;

        (3)   对浮动父元素设置

      #test{zoom:1;}
      #test:after{display:block;clear:both;visibility:hidden;height:0;content:'';}

    5.对连续的字符串进行自动换行

    解决：对元素进行设置css：word-wrap:break-word;

    6. 对溢出的字符串进行转化省略号

    解决：对元素设置css：

             width:150px;

            white-space:nowrap;//使文本溢出边界不换行强制在一行内显示

            overflow:hidden;//对溢出的文本进行截断隐藏

           text-overflow:ellipsis;//文本显示为省略号

    7. 对鼠标箭头设置成手型 

     解决：对元素设置css：cursor:pointer;

    8. 对文本文字进行垂直居中

     解决：对文字设置行高：line-height;

    9.对内联元素的宽高进行设置

     解决：只需对内联元素设置成块状元素。如设置：display：block；或float 或position等

             今天暂时到这，明天继续。。