在前端静态页面开发中常遇见的一些问题及解决办法

1、如何使用HTML和CSS解决单行文本溢出显示省略号：

       ①为文字所在的盒子设置宽度

         width：**px;

      ②让多行文字不换行显示

         white-space:nowrap;

      ③设置溢出隐藏

         overflow:hidden;

      ④文本多余部分显示省略号

text-overflow:ellipsis;

2、如何触发文档中的BFC（关于BFC是什么请看以前的投稿）

      ①浮动能够触发BFC

      ②绝对定位和固定定位能触发BFC

      ③display的某些属性值也能触发BFC，如inline-block，flex等

      ④overflow除了默认属性值static都能触发BFC

3、在设置图片使出现的图片3像素问题

      ①使用vertical-align属性：vertical-align：top；

      ②将图片变成块级元素：  diaplay：block；

      ③给图片加浮动使其脱离文档流

      ④给图片设置一个固定的宽高

4、解决margin父元素盒子元素粘连的问题

     ①给父元素加上边框

     ②不使用margin，使用padding

     ③给父元素加上overflow使其触发BFC

注意：额外说明两兄弟之间的margin塌陷的问题只需要给其中一个设置足够的margin就可以了。

5、精灵图的使用

    ①设置一个特定大小的盒子

    ②将精灵图设置为背景图片

    ③通过background-position属性调整精灵图的位置，使要求显示出来的部分显示出来

关于精灵图的优缺点：

优点：提升网页加载的性能，减少了图标命名的麻烦

缺点：若更改其中某一个图标，可能会引起所有图标的调整

6、清除浮动的方式

①一、 额外标签法： 给谁清除浮动，就在其后额外添加一个空白标签 。不推荐。
优点： 通俗易懂，书写方便。
缺点： 添加许多无意义的标签，结构化比较差。

②父级添加overflow方法：可以通过触发BFC的方式，实现清楚浮动效果。必须定义宽度，但是不能定义height，使用overflow:hidden时，会触发BFC，浏览器会自动检查浮动区域的高度。 

优点：简单、代码少、浏览器兼容性比较好

缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

注意使用时如果在里面的子元素使用定位的话，超除部分会被隐藏

③使用after伪元素清除浮动。

优点： 符合闭合浮动思想，结构语义化正确，不容易出问题，许多大厂都在使用

缺点： IE6-7不支持，兼容性不好