前端面试题(五)

• label 有哪些做用, 并举例说明

  • 首先最经常使用的是 label 与表单的关联

    <label for="hobby">爱好</label>
    <input id="hobby" type="checkbox"  value="0">

  • 方便鼠标点击使用，加强用户操做体验
  • 用来显示文字信息，能够固定也能够从数据库中读出信息绑定。

其实 label 标签有两个属性比较经常使用 一个是 for 一个是accesskey
for 属性:

表示这个label 是为哪一个控件服务的,for 属性绑定的 html 元素的 id 或者 name 属性. 你点击这个标签的时候，所绑定的元素将获取焦点 ，点击label所包裹内容，自动指向for指定的id或name

accesskey 属性:

则定义了访问这个控件的热键( 所设置的快捷键不能与浏览器的快捷键冲突，不然将优先激活浏览器的快捷键 )

---

• 用 css 建立一个三角形, 并说明其原理

  首先咱们先看下实现的代码

  width: 0;
      height: 0;
      margin: 100px auto;
      border-top: 50px solid transparent;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-bottom: 50px solid blue;

  效果以下:
  

  咱们如今来分析一下这个是如何实现的

  这里咱们对 border 可能有一下误解. 一般咱们经常使用的就是作个边框 border: 1px solid 这样相似的.只是给图形一个1px 的边框.咱们会误解为border 就是四边边框.
  可是其实并非.其实元素的 border 是由 三角形组成的.咱们举个例子, 把边框的宽度变大一些

  div {
      width: 50px;
      height: 50px;
      border: 40px solid;
      border-color: orange blue red green;
  }

  效果以下:
  

  因此当咱们把 div 的宽高设为 0 的时候 就彻底用 border 撑起来就是以下样子

  

  这下就很明显了 想要获得四个三角形的哪一个 就把其余边设为透明就能够啦
  这样是否是就很明了了!!!!!!!!

---

• 写一个去除制表符和换行符的方法

  一般这样的方法最简单的是使用正则表达式来筛选

  \f 匹配换页字符。
  \n 匹配换行字符。
  \r 匹配回车符字符。
  \t 匹配制表字符。
  \v 匹配垂直制表符。

  function fn(str) {
    return str.replace(/[\t\n]/g, '')
  }

  正则表达式的东西仍是蛮多的 真正学起来正则能够很深很深.实不相瞒,我对正则就是属于只知其一;不知其二的状态 每次使用都会去查表 毕竟其实实际用到的不多 都是封装一次到方法库里面了.... 尴尬

面试题摘自 Github