前端常见问题讲解教学课件.ppt

单击此处编辑母版标题样式 单击此处编辑母版文本样式 第二级 第三级 第四级 第五级 * LOGO 单击此处编辑母版标题样式 单击此处编辑母版文本样式 第二级 第三级 第四级 第五级 * LOGO 单击此处编辑母版标题样式 单击此处编辑母版文本样式 第二级 第三级 第四级 第五级 单击此处编辑母版标题样式 单击此处编辑母版文本样式 第二级 第三级 第四级 第五级 单击此处编辑母版标题样式 单击此处编辑母版文本样式 第二级 第三级 第四级 第五级 LOGO * 前端常见问题详解 * BUG详解 一、检查HTML元素标签是否有拼写错误、是否忘记结束标记； div标签未关闭，在填写内容，很容易多删或漏删标签引起页面错乱； 二、确定错误发生的位置，假如错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位置； 三、“_”IE6识别；“*+”IE7识别；“!important”IE7、火狐；“-webkit”谷歌；“-moz-”火狐； 四、透明度opacity;下图设置透明度为35；其他浏览器显示正常； Ie7不支持opacity; 正确写法为：filter:alpha(opacity=35); * BUG详解 五、IE7 下overflow hidden 不起作用 在父元素上增加position:relative * BUG详解 六、DIV+CSS网页错位的原因与解决方法 常常我们会遇到我们要设置在一行显示的布局，却因为种种原因造成了错位，看到结果是在一行的最后一个盒子布局错位掉下去了 * BUG详解 一种是宽度计算错误，一种是IE BUG造成，特别是IE6和IE7 1.宽度计算错误解决方法 ?? 宽度计算错误，假如总宽度为500px，有3个盒子，分别CSS宽度为200px、200px、100px，这个没问题会在一排显示不会错位，但如果加入了CSS边框、padding、margin属性时，别忘记这几个属性所占的宽度。特别是padding与边框border占用宽度空间不要忽略了。如果有一个盒子加入左右边框，这个时候有一个盒子中刚合适的宽度条件下减少2px边框占用宽度，否则即会总3个盒子合计宽度大于了总宽度，造成错位。 2.IE BUG 通常我们使用了CSS浮动（CSS float）情况下使用margin（margin-right、margin-left这里特别是这个属性）此属性会产生双倍数值，这个时候我们需要使用css hack解决此问题。让IE6或IE7单独识别特指定margin样式。 * BUG详解 七、浮动会造成页面布局的重叠混乱，这在网页制作中是非常常见的，我们可以利用以下几种方法清楚浮动所带来的影响； 1、出现float影响的根本原因是：父标签没有高度，导致光标上移动。如果给父标签设置固定的高度。可以解决浮动带来的问题 2、给被受浮动影响的标签设置clear both来清除浮动所带来的影响 3、overflow：hidden；设置内容超出部分 * BUG详解 八、margin-top和margin-bottom不能正常显示，如下图：在文字上写margin-top:40px;但是父元素一块向下移动40px;则需要在父元素上加overflow:hidden或设置高度; * BUG详解 九、图片下方出现几像素的空白间隙， 将img定义为display:block,或定义父容器为font-size:0 如果利用img标签把图片放进表格单元里面，并注意到在图片下方有不需要的空间，那么设置它的display属性为block. * BUG详解 十、实现多行文字或者图片垂直居中的方法 方法1 .box1{ ????display: table-cell; ????vertical-align: middle; ????text-align: center;???????? } 方法2 .box1{ ????display: flex; ????justify-content:center; ????align-items:Center; } * BUG详解 十一、IE6/7,有时会遇到css未加载，但是谷歌火狐等浏览器浏览正常 1.先查看顶部声明是否标准以及引入样式link，是否书写标准，在stylesheet,text/css.是否有多余空格； 2.Html是否跟css编码格式一致； * BUG详解 十二、 CSS的文件编码和页面不一致的话，css文件中文会出现乱码情况；统一用gb2312编码格式 * BUG详解 十三、 定位问题 固定定位：position:fixed; 悬浮框靠左侧悬浮 Div{width:?145px;height:?360px; pos