前端开发常见问题

在前端日常开发中,经常会遇到各种各样的兼容性问题,或者各种各样的奇葩问题,无论是css,html还是js都会有一些小的问题所在,特记录下平常可能遇到的问题和一些解决方法.

p标签解析问题

当一个元素指定多个 class 时，class 的优先级与指定顺序无关，而是和 class 的定义顺序有关。后声明的优先级高。

<style>
.red { color: red }
.blue { color: blue }
</style>
<div class="red blue">这是什么颜色</div>  // blue
<div class="blue red">这是什么颜色</div>  // blue

隐藏元素的方法异同

Display：non e；隐藏盒子，并且不占位置
Overflow：hidden；隐藏超出部分
Visibility：hidden；隐藏盒子，占位置
Opacity：0；隐藏盒子，占位置
Position-left/top：-999em；隐藏盒子，测试不占位置

BFC(Block formatting context) 块级格式化上下文

决定元素的内容如何渲染及与其他元素的关系的交互

BFC的规则

BCF具有隔离作用，内部元素不会受到外部元素的影响
BFC内的内容不会与外面的浮动元素重叠
BFC内的元素按正常流排列，元素之间的间隙由元素的外边距控制

哪些元素或属性会生成BFC

1. 根元素   html
2. float属性不为none 浮动框
3. position为absolute或fixed
4. display为inline-block, table-cell, table-caption, flex, inline-flex 非块框的块容器
5. overflow不为visible的块级元素

BFC 作用

解决清除浮动问题 BFC包含浮动元素,BFC会根据子元素的情况自动适应高度
解决margin 合并问题
BFC可以阻止元素被浮动元素覆盖(解决文字环绕)

屏蔽右键菜单

<body oncontextmenu="return false" ondragstart="return false" onselectstart="return false"></body>

常用正则整理

var reg = {
  chinese : /^[\u4e00-\u9fa5]{1,6}$/g,
  trim    : /^\s+|\s$/g,
  email   : /\w+@[a-z0-9]+(\.[a-z]+){1,3}/g,
  url: /[a-zA-Z]+:\/\/[^\s]*/g,
  qq      : /[1-9][0-9]{4,9}/g,
  postcode: /[1-9]\d{5}/g,
  card    : /[1-9]\d{14}|[1-9]\d{17}|[1-9]\d{16}x/g,
  tel     : /^1[3456789]\d{9}$/g
}

calc使用问题

在使用calc(100% - 20px + 5px*2))
.elm {
  width: calc(expression);
}
// 使用“+”、“-”、“*” 和 “/”四则运算；
//可以使用百分比、px、em、rem等单位；
可以混合使用各种单位进行计算；
表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的；
表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。

a标签点击事件与href中代码执行顺序问题

<ul onclick="javascript:console.log('ul-click')">
  <li onclick="javascript:console.log('li-click')">
    <a id="test" href="javascript:console.log('a-href')">a点击事件</a>
  </li>
</ul>
test.onclick = function(){ console.log('a-click') }
//a-click   li-click    ul-click   a-href
//先执行a标签的onclick事件,然后冒泡执行父级的click事件，在执行自身的href里的js代码

some() 不会对空数组进行检测，不会改变原始数组。对于空数组上的任何条件，此方法返回false。
every() 不会对空数组进行检测，不会改变原始数组。对于空数组上的任何条件，此方法返回true。
switch case 的条件判断是全等于即===
test.toFixed(2) 返回值类型的是字符串 test必须是数字类型不能是字符串
ios不支持2018-09-09这类时间格式
字体颜色渐变 ios 存在标签兼容问题 android正常
移动端 border-radius 小于6像素设置正园时变形问题采用transform:scale(0.5)进行缩放缩放会占位采用margin负值调整即可

禁用的input框在ios和android下表现不一致

input:disabled, input[disabled]{
  background-color : #fff;   //修改默认灰色样式
  color: #666;
  -webkit-text-fill-color:#666; //字体颜色安卓与IOS适配
  -webkit-opacity:1;   // 不透明级别安卓与IOS适配
  opacity:1; // ios默认的不透明级别为0.3
}

URL 全称是 Uniform Resource Locator ，中文译名为“统一资源定位符”，用于完整地描述 Internet 上某一处资源的地址。一般称之为 URL 地址，或者 Web 地址，俗称“网址”
URI 全称是 Uniform Resource Identifier ，中文译名为“统一资源标识符”，用来唯一地标识一个资源。而URL是一种具体的URI，我们可以简单地 URI和URL 看作同一个东西
var val = tel.replace(/[^\d]/g, '') //只能输入数字
scrollTop在有些机型获取不是整数的问题数值为小数
解决CSS position:fixed 抖动问题, fixed元素设置 -webkit-transform: translateZ(0);
QQ 分享问题不是QQ好友分享有问题

页面上的图片没有找到使用类似404图片

<script type="text/javascript">
function nofind(){
  var img=event.srcElement;
  img.src="images/logoError.png";
  img.onerror = null; // 控制不要一直跳动
}
</script>
<img src="images/logo.png" onerror="nofind()" />

美化表单元素
1. 禁用select默认箭头，::-ms-expand修改表单控件下拉箭头，设置隐藏并使用背景图片来修饰
  select::-ms-expand { display:none; }
2. 禁用radio和checkbox默认样式，::-ms-check修改表单复选框或单选框默认图标，设置隐藏并使用背景图片来修饰
  input[type=radio]::-ms-check,input[type=checkbox]::-ms-check { display:none; }
3. 禁用pc端表单输入框默认清除按钮，::-ms-clear修改清除按钮，设置隐藏并使用背景图片来修饰
  input[type=text]::-ms-clear,input[type=tel]::-ms-clear,input[type=number]::-ms-clear { display:none; }

内容多左对齐, 内容少居中对齐

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
  /* 方法一  利用 inline-block 重新创造一个新的盒模型环境 */
  div{ background: red;text-align: center; }
  p{ display:inline-block;text-align: left; }
  /* 方法二 table */
  div{ background: red; }
  p { margin: 0 auto;display: table; }
  /* 方法三 fit-content */
  div{ background: red; }
  p { margin: 0 auto;width:fit-content;}
  </style>
</head>
<body>
<div>
  <p>内容多左对齐, 内容少居中对齐内容多左对齐, 内容少居中对齐内容多左对齐, 内容少居中对齐内容多左对齐, 内容少对齐内容多左对齐, 内容少对齐内容多左对齐, 内容少对齐内容多左对齐, 内容少居中对齐内容多左对齐, 内容少居中对齐内容多左对齐, 内容少居中对齐</p>
</div>
</body>
</html>

实现多行文本上下居中

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 方法一 */
    .method1{
      height: 100px;
      width: 200px;
      font-size: 12px;
      border: 1px solid #000;
      line-height: 100px;
    }
    .method1 span{
      display: inline-block;
      line-height: normal;
      vertical-align: middle;
    }
    /* 方法二 */
    .method2{
      height: 100px;
      width: 200px;
      font-size: 12px;
      border: 1px solid #000;
      vertical-align: middle;
      display: table-cell;
    }
  </style>
</head>
<body>
  <!-- 方法一 利用 inline-block 重新创造一个新的盒模型环境 -->
  <div class="method1">
    <span>多行文本居中多行文本居中多行文本居中多行文本居中多多行</span>
  </div>
  <!-- 方法二  采用 display: table-cell -->
  <div class="method2">
    多行文本居中多行文本居中多行文本居中多行文本居中多多行
  </div>
</body>
</html>

Doctype含义?

Doctype声明不属于HTML标签,它是一条指令,告诉浏览器编写页面所使用的的HTML或XHTML版本

img的alt与title有何异同？ strong与em的异同？

alt(alt text):为图片加载失败无法正常显示时用来指定替换文字
title(tool tip):为元素提供额外说明信息,鼠标移入时显示
strong:粗体强调标签，强调，表示内容的重要性
em:斜体强调标签，更强烈强调，表示内容的强调点

行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？

块级元素(block)特性：总是独占一行宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制
内联元素(inline)特性：和相邻的内联元素在同一行宽度(width)、高度(height)、上下内边距和上下外边距无效
行内块(inline-block): 拥有内在尺寸，可设置高宽，但不会自动换行如<input> 、<img> 、<button> 、<texterea> 、<label>

rgba()和opacity的透明效果有什么不同？

opacity作用于元素，以及元素内的所有内容的透明度，
rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）

display:none与visibility:hidden的区别是什么？

display: 隐藏对应的元素但不保留该元素原来的空间。
visibility: 隐藏对应的元素但保留元素原来的空间。

哪些css属性可以继承？

可继承：font系列 line-height text-align text-indent color list-style cursor visibility等
不可继承：border padding margin width height

link和@import的区别是?

A. Link属于HTML标签,而@import是css提供的
B. 页面被加载时,link会同时被加载,而@import会等到引用的它的css文件加载完再加载
C. Import只在IE以上才能识别,而link是html标签,无兼容性问题
D. Link方式样式的权重高于@import

什么是CSS Hack?

// 1、条件Hack
<!--[if IE]>
  <style>
    .test{color:red;}
  </style>
<![endif]-->
// 2、属性Hack
.test{
  color:#090\9;   /* For IE8+ */
  *color:#f00;    /* For IE7 and earlier */
  _color:#ff0;     /* For IE6 and earlier */
}
// 3、选择符Hack
* html .test{color:#090;}     /* For IE6 and earlier */
* + html .test{color:#ff0;}    /* For IE7 */

CSS样式的优先级?

!important > 内联样式 > id > class > 标签

重排与重绘

重绘: 当在页面上修改了一些不需要改变定位的样式的时候(比如background-color),浏览器只会将新的样式重新绘制给元素
重排: 当页面上的改变影响了文档内容,结构或者元素定位时,就会发生重排(或称重新布局).
重排通常由以下改变触发:
1)Dom操作(元素增,删,改或者改变元素顺序)
2)内容的改变,包括Form表单中文字的变化
3)计算或改变css属性
4)增加或删除一个样式表
5)浏览器窗口的操作(改变大小,滚动窗口)

常见浏览器的内核

IE: trident内核
Firefox：gecko内核
Safari:webkit内核
Opera:以前是presto内核，Opera现已改用Google Chrome的Blink内核
Chrome:Blink(基于webkit，Google与Opera Software共同开发)

对前端工程师这个职位你是怎么样理解的?

a. 前端是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到 100 分，甚至更好
b. 参与项目，快速高质量完成实现效果图，精确到1px；
c. 与团队成员，UI设计，产品经理的沟通；
d. 做好的页面结构，页面重构和用户体验；
e. 处理hack，兼容、写出优美的代码格式；
f. 针对服务器的优化、拥抱最新前端技术。