在前端静态页⾯开发中常遇见的⼀些问题及解决办法
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；
③给图⽚加浮动使其脱离⽂档流
css固定定位④给图⽚设置⼀个固定的宽⾼
4、解决margin⽗元素盒⼦元素粘连的问题
①给⽗元素加上边框
②不使⽤margin，使⽤padding
③给⽗元素加上overflow使其触发BFC
注意：额外说明两兄弟之间的margin塌陷的问题只需要给其中⼀个设置⾜够的margin就可以了。
5、精灵图的使⽤
①设置⼀个特定⼤⼩的盒⼦
②将精灵图设置为背景图⽚
③通过background-position属性调整精灵图的位置，使要求显⽰出来的部分显⽰出来
关于精灵图的优缺点：
优点：提升⽹页加载的性能，减少了图标命名的⿇烦
缺点：若更改其中某⼀个图标，可能会引起所有图标的调整
6、清除浮动的⽅式
①⼀、 额外标签法： 给谁清除浮动，就在其后额外添加⼀个空⽩标签 。不推荐。
优点： 通俗易懂，书写⽅便。
缺点： 添加许多⽆意义的标签，结构化⽐较差。
②⽗级添加overflow⽅法：可以通过触发BFC的⽅式，实现清楚浮动效果。必须定义宽度，但是不能定义height，使⽤overflow:hidden 时，会触发BFC，浏览器会⾃动检查浮动区域的⾼度。
优点：简单、代码少、浏览器兼容性⽐较好
缺点：内容增多时候容易造成不会⾃动换⾏导致内容被隐藏掉，⽆法显⽰需要溢出的元素。
注意使⽤时如果在⾥⾯的⼦元素使⽤定位的话，超除部分会被隐藏
③使⽤after伪元素清除浮动。
优点： 符合闭合浮动思想，结构语义化正确，不容易出问题，许多⼤⼚都在使⽤
缺点： IE6-7不⽀持，兼容性不好

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。