前端常见问题

骑猪看日落 2022-05-08 08:36 234阅读 0赞

1. div里包含img底部必定多出空白的解决办法

解决方案：

1、设置div\{ font-size: 0\}

2、设置img\{ display: block\}

3、设置img\{ vertical-align:top;\}

推荐第二种方法，让img对象成为块级元素。

2．绘制圆形图片

height: 26px;

width: 26px;

border-radius: 50%;

3. background-size的cover特定值会保持图像本身的宽高比例，将图片缩放到正好完全覆盖定义背景的区域

4.换行：

word-break: break-all;

word-wrap: break-word;

5.过渡transition

transition: all .3s ease;

5.边框灰线：

border-bottom: 1px solid \#eee;

6. href=”javascript:void(0);”与href=”\#"的区别

<a href="javascript:void(0)">点击</a>点击链接后不会回到网页顶部 <a href="\#">点击</a> 点击后会回到网面顶部

"＃"其实是包含了位置信息，例如默认的锚点是＃top 也就是网页的上端

而javascript:void(0) 仅仅表示一个死链接这就是为什么有的时候页面很长浏览链接明明是＃可是跳动到了页首

而javascript:void(0) 则不是如此所以调用脚本的时候最好用void(0)

使用javascript的方法

<a href="\#" οnclick="javascript:方法;return false;">文字</a>

<a href="javascript:void(0)" οnclick="javascript:方法;return false;">文字</a>

补充 <a href="javascript:hanshu();"这样点击a标签就可以执行hanshu()函数了。

7. a标签中onclick与href之间的问题

click和href根据浏览器解析不同来确定谁先执行，又或者两者都执行。有些浏览器即使加入了href="javascript:void(0);"，也不一定会有效，所明白点，就是href本身包含了点击事件。因此click成了多余。这种需求建议舍弃a标签，用其他标签来代替，通过增加样式来达到同样的视觉效果

8.三角![70][]

<i></i>

.list\_bd ul li .btn .go i \{

position: absolute;

width: 0;

height: 0;

border-width: 4px;

border-color: transparent  transparent  transparent  \#c5181e;

border-style: dashed dashed dashed solid;

right: 4px;

top: 12px;

\}

9.

text-rendering: auto;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

transform: translate(0, 0);

10. Chrome浏览器下小于12号字的解决方案

font-size: 12px;

\-webkit-transform: scale(0.8);

transform: scale(0.8);

11.    z-index: 999;

如果2个或2个以上通过绝对或者相对定位的层有重叠的时候，这个时候'z-index' 的值谁的大就那个层显示在最上面！直接设置个999或者是比999更大的数值的目的也就是为了保证该层能一直显示在最上！

[70]: /images/20220508/6a00012a5396433faa58f2621f149616.png

发表评论取消回复

表情：

评论列表（有 0 条评论，234人围观）

还没有评论，来说两句吧...

相关阅读

相关 Web前端面试常见问题

Web前端面试常见问题箭头函数箭头函数的this指向的是父级作用域的this，是通过查找作用域链来确定 this 的值也就是说，看的是上下文的thi

落日映苍穹つ/ 2023年07月24日 11:35/ 0 赞/ 35 阅读

相关前端常见问题一定要搞懂

前端常见问题一定要搞懂： CSS 1. 盒模型是什么？ 2. 盒模型及如何转换？ 3. BFC是什么？ 4. 水平垂直居中有哪些方法？

迈不过友情╰/ 2022年09月16日 00:21/ 0 赞/ 265 阅读

相关 bootstrap-table前端常见问题

1.js文件中，jquery发送ajax请求，浏览器报405的错误，原因：ajax中提交的是post请求，springmvc的controller中注解中用的是get接收的，因

Bertha 。/ 2022年06月17日 11:40/ 0 赞/ 216 阅读

相关前端面试中常见的算法问题

> 虽说我们很多时候前端很少有机会接触到算法。大多都交互性的操作，然而从各大公司面试来看，算法依旧是考察的一方面。实际上学习数据结构与算法对于工程师去理解和分析问题都是有帮助的

ゞ浴缸里的玫瑰/ 2022年06月15日 00:00/ 0 赞/ 247 阅读

相关 Web前端面试常见问题

备注: [Rebecca Murphey][] 的 [Baseline For Front-End Developers][] 是你在准备面试前应该阅读的绝佳资源。记住：

曾经终败给现在/ 2022年06月10日 01:30/ 0 赞/ 287 阅读

相关前端面试常见问题——字符串反转

这道题呢，来源于一篇文章，[《如何准备一次技术面试》][Link 1]，它以作为面试官的角度讲了一些技术面试的小技巧。大家应该也都知道技术面试中对于基础知识的考察，总是从

ゝ一纸荒年。/ 2022年06月06日 03:50/ 0 赞/ 260 阅读

相关前端常见概括性问题

1. 常使用的库有哪些？常用的前端开发工具？开发过什么应用或组件？使用率较高的框架有jQuery、YUI、Prototype、Dojo、Ext.js、Mooto

梦里梦外;/ 2022年05月19日 09:50/ 0 赞/ 185 阅读

相关前端常见问题

1. div里包含img底部必定多出空白的解决办法解决方案： 1、设置div\{ font-size: 0\} 2、设置img\{ display: block\}

骑猪看日落/ 2022年05月08日 08:36/ 0 赞/ 235 阅读

相关 WeX5前端开发常见问题

官网文档：[http://docs.wex5.com/wex5-ui-question-list/][http_docs.wex5.com_wex5-ui-question-l

ゞ浴缸里的玫瑰/ 2022年03月08日 19:17/ 0 赞/ 245 阅读

相关常见问题收集——前端篇

一、iframe 父级框架使用$(function()\{\}) 加载时，无法获取子级的内容问题：在父框架加载完成后需要获取到子级框架中内容，使用`$(docume

r囧r小猫/ 2021年11月09日 07:18/ 0 赞/ 338 阅读