css布局面试题,css 田字布局，子元素之间，子元素和父元素之间间距10，自适应

css布局面试题,css 田字布局，子元素之间，子元素和父元素之间间距10，自适应详细介绍

本文目录一览： 字节跳动最爱考的前端面试题：CSS 基础

参考链接： juejin.im/post/5e8d52…
animation、transition、transform、translate 这几个属性要搞清楚：
水平居中：
垂直居中
BFC 是块级格式上下文，IFC 是行内格式上下文：
不会，因为 BFC 是页面中一个独立的隔离容器，其内部的元素不会与外部的元素相互影响，比如两个 div，上面的 div 设置了 float，那么如果下面的元素不是 BFC，也没有设置 float，会形成对上面的元素进行包裹内容的情况，如果设置了下面元素为 overflow：hidden；属性那么就能够实现经典的两列布局，左边内容固定宽度，右边因为是 BFC 所以会进行自适应。
box-sizing 属性可以被用来调整这些表现:
BFC（Block Formatting Context）格式化上下文，是 Web 页面中盒模型布局的 CSS 渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。
五种：
BFC 的特性：
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括： 外边距（margin） 、 边框（border） 、 内边距（padding） 、 实际内容（content） 四个属性。 CSS盒模型： 标准模型 + IE模型
标准盒子模型：宽度=内容的宽度（content）+ border + padding
低版本IE盒子模型：宽度=内容宽度（content+border+padding），如何设置成 IE 盒子模型:
static：无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。 relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。 absolute：对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。 fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。 sticky：具体是类似 relative 和 fixed，在 viewport 视口滚动到阈值之前应用 relative，滚动到阈值之后应用 fixed 布局，由 top 决定。
问：为什么会有这种现象？你能解释一下吗
是由块级格式上下文决定的，BFC，元素在 BFC 中会进行上下排列，然后垂直距离由 margin 决定，并且会发生重叠，具体表现为同正取最大的，同负取绝对值最大的，一正一负，相加
BFC 是页面中一个独立的隔离容器，内部的子元素不会影响到外部的元素。
不清楚浮动会发生高度塌陷：浮动元素父元素高度自适应（父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷）
了解更多加入我们前端学习圈

WEB前端面试题

第二章 面试题基础篇

2.1 HTML面试题

面试题：行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

面试题：页面导入样式时，使用link和@import有什么区别？

面试题：title与h1的区别、b与strong的区别、i与em的区别？

面试题：img标签的title和alt有什么区别？

面试题：png、jpg、gif 这些图片格式解释一下，分别什么时候用？

2.2 CSS面试题

面试题：css背景纹路

面试题：介绍一下CSS的盒子模型

面试题：CSS选择符有哪些？哪些属性可以继承？

面试题：CSS优先级算法如何计算？

面试题：用CSS画一个三角形

面试题：一个盒子不给宽度和高度如何水平垂直居中？

面试题：display有哪些值？说明他们的作用。

面试题：对BFC规范(块级格式化上下文：block formatting context)的理解？

面试题：清除浮动有哪些方式？

面试题：在网页中的应该使用奇数还是偶数的字体？为什么呢？

面试题：写一个左中右布局占满屏幕，其中左、右俩块固定宽200，中间自适应宽，要求先加载中间块，请写出结构及样式。

面试题：什么是CSS reset？

面试题：css sprite是什么,有什么优缺点

面试题：display: none;与visibility: hidden;的区别

面试题：position有哪些值?有什么作用? 【特别多公司问】

面试题：line-height和height有什么区别？

面试题：opacity 和 rgba区别

2.3 JavaScript基础面试题

面试题：延迟加载JS有哪些方式？

面试题：JS数据类型有哪些？

面试题：null和undefined的区别

面试题：JS数据类型考题

面试题：==和===有什么不同

面试题：JS微任务和宏任务

面试题：JS作用域考题

面试题：JS对象考题

面试题：JS作用域+this指向+原型 考题

面试题：JS判断变量是不是数组，你能写出哪些方法？

面试题：slice是干嘛的、splice是否会改变原数组

面试题：JS数组去重

面试题：找出多维数组最大值

面试题：给字符串新增方法实现功能

面试题：找出字符串出现最多次数的字符以及次数

2.4 真正移动端 —— H5/C3面试题

面试题：什么是语义化标签

面试题：::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用。

面试题：如何关闭iOS键盘首字母自动大写

面试题：怎么让Chrome支持小于12px 的文字？

面试题：rem和em有什么样区别

面试题：ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉

面试题：webkit表单输入框placeholder的颜色值能改变吗？

面试题：禁止ios 长按时不触发系统的菜单，禁止ios&android长按时下载图片

面试题：禁止ios和android用户选中文字

面试题：自适应 [淘宝无线适配]

面试题：响应式

第三章 面试题进阶篇

3.1 JavaScript进阶面试题

面试题：new操作符具体做了什么

面试题：闭包 【必须会】

面试题：原型链 【必须会】

面试题： JS继承有哪些方式

面试题：说一下call、apply、bind区别

面试题：sort背后原理是什么？

面试题：深拷贝和浅拷贝

面试题：localstorage、sessionstorage、cookie的区别

3.2 ES6面试题

面试题：var、let、const区别

面试题：作用域考题

面试题：将下列对象进行合并

面试题：箭头函数和普通函数有什么区别？

面试题：Promise有几种状态

面试题：find和filter的区别 【大厂】

面试题：some和every的区别 【大厂】

3.3 webpack面试题

面试题：webpack插件

3.4 Git面试题

面试题：git常用命令

面试题：解决冲突

面试题：GitFlow

第四章 面试题框架篇

4.1 区分初中高级的 —— Vue面试题

面试题：Vue2.x 生命周期有哪些？

1.系统自带八个

2.当一旦进入到某个组件会执行哪些生命周期

3.$el和$data在哪个阶段有

4.如果使用keep-alive会多俩个生命周期

5.如果加入keep-alive第一次进入组件会执行哪些生命周期

6.如果加入keep-alive第二次或者第N进入该组件会执行哪些生命周期

面试题：谈谈你对keep-alive的了解

面试题：v-if和v-show区别

面试题：v-if和v-for优先级 2.x

面试题：ref是什么？

面试题：nextTick是什么？

面试题：Vue中如何做样式穿透

面试题：scoped原理

面试题：Vuex是单向数据流还是双向数据流？

面试题：讲一下MVVM

面试题：双向绑定原理

面试题：什么是虚拟DOM

面试题：key是干什么？

面试题：diff算法

面试题：Vue组件传值

面试题：props和data优先级谁高？

面试题：computed、methods、watch有什么区别？

面试题：Vuex

面试题：Vue路由

面试题：Vue项目打包后出现空白页

4.2 微信小程序面试题

面试题：如何自定义头部？

面试题：如何自定义底部？

4.3 uni-app面试题

面试题：生命周期

面试题：条件编译

第五章 面试题性能优化篇

有一个前端面试题，多人项目中你将如何规划css文件,样式命名？

马克一记，等大神来回答，学习学习。。。
我的话可能会用文档定义css样式的作用和命名，然后所有成员都按文档写。。。
如果有成员需要加入或者修改css样式，就需要修改文档，同时通知所有成员。。。
　　.class1 .class2{xxxxxxxxx} class1下面的 class2 样式 .class2.red{xxxxxx} 同时具有 class2 和 red 的样式
一般通用样式放一个CSS文件，不同页面对应不同CSS文件，主要还是要根据项目结构而定了。
命名最好用英文，不行拼音也行，常用的有驼峰法或下划线命名法。
可以采用业界 BEM 的命名规范。

css 田字布局，子元素之间，子元素和父元素之间间距10，自适应

前几天去猿辅导面试的css面试题，当时太紧张了，就想着怎么按百分比或者是位移搞，但是冷静下来，css复杂的定位就给元素包爸爸，几乎能解决一大票问题。
细致的描述问题：
一个父元素里面有四个子元素，按田字排列，子元素之间间距10px,和父元素之间的间距也是10px，父元素缩放时子元素要自适应。
解决思路就是父元素里面再包一层，来解决父元素和子元素间距10 的问题。
四个子元素分别再包一层b,b就负责宽高占父元素的50%，里面的b-inner，负责子元素之间的间距。用position absolute相对b进行定位，搞出间距，注意平分公共间距一个子元素应该位移的是5px。

《前端面试题》- CSS - 画一根0.5px的线

题目：如何利用css实现一个0.5px的线
答：利用transform的scale（scaleY）属性
实践：

code：

前端经典面试题(包含JS、CSS、React、浏览器等)

防抖
节流
误区：我们经常说get请求参数的大小存在限制，而post请求的参数大小是无限制的。
实际上HTTP 协议从未规定 GET/POST 的请求长度限制是多少。对get请求参数的限制是来源与浏览器或web服务器，浏览器或web服务器限制了url的长度。为了明确这个概念，我们必须再次强调下面几点:
补充补充一个get和post在缓存方面的区别：
可从IIFE、AMD、CMD、CommonJS、UMD、webpack(require.ensure)、ES Module、
vue和react都是采用diff算法来对比新旧虚拟节点，从而更新节点。在vue的diff函数中（建议先了解一下diff算法过程）。在交叉对比中，当新节点跟旧节点 头尾交叉对比 没有结果时，会根据新节点的key去对比旧节点数组中的key，从而找到相应旧节点（这里对应的是一个key => index 的map映射）。如果没找到就认为是一个新增节点。而如果没有key，那么就会采用遍历查找的方式去找到对应的旧节点。一种一个map映射，另一种是遍历查找。相比而言。map映射的速度更快。vue部分源码如下：
创建map函数
遍历寻找
在React中， 如果是由React引发的事件处理（比如通过onClick引发的事件处理），调用setState不会同步更新this.state，除此之外的setState调用会同步执行this.state 。所谓“除此之外”，指的是绕过React通过addEventListener直接添加的事件处理函数，还有通过setTimeout/setInterval产生的异步调用。
**原因：**在React的setState函数实现中，会根据一个变量isBatchingUpdates判断是直接更新this.state还是放到队列中回头再说，而isBatchingUpdates默认是false，也就表示setState会同步更新this.state，但是， 有一个函数batchedUpdates，这个函数会把isBatchingUpdates修改为true，而当React在调用事件处理函数之前就会调用这个batchedUpdates，造成的后果，就是由React控制的事件处理过程setState不会同步更新this.state 。
虚拟dom相当于在js和真实dom中间加了一个缓存，利用dom diff算法避免了没有必要的dom操作，从而提高性能。
具体实现步骤如下：
用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中
当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异
把2所记录的差异应用到步骤1所构建的真正的DOM树上，视图就更新了。
结构：display:none: 会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击， visibility: hidden:不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击 opacity: 0: 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击
继承：display: none：是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。visibility: hidden：是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式。
性能：displaynone : 修改元素会造成文档回流,读屏器不会读取display: none元素内容，性能消耗较大 visibility:hidden: 修改元素只会造成本元素的重绘,性能消耗较少读屏器读取visibility: hidden元素内容 opacity: 0 ：修改元素会造成重绘，性能消耗较少
联系：它们都能让元素不可见
常用的一般为三种 .clearfix , clear:both , overflow:hidden ;
比较好是 .clearfix ,伪元素万金油版本,后两者有局限性.
clear:both :若是用在同一个容器内相邻元素上,那是贼好的,有时候在容器外就有些问题了, 比如相邻容器的包裹层元素塌陷
overflow:hidden :这种若是用在同个容器内,可以形成 BFC 避免浮动造成的元素塌陷
概念：将多个小图片拼接到一个图片中。通过 background-position 和元素尺寸调节需要显示的背景图案。
优点：
缺点：
block 元素特点：
1.处于常规流中时，如果 width 没有设置，会自动填充满父容器 2.可以应用 margin/padding 3.在没有设置高度的情况下会扩展高度以包含常规流中的子元素 4.处于常规流中时布局时在前后元素位置之间（独占一个水平空间） 5.忽略 vertical-align
inline 元素特点
1.水平方向上根据 direction 依次布局
2.不会在元素前后进行换行
3.受 white-space 控制
4. margin/padding 在竖直方向上无效，水平方向上有效
5. width/height 属性对非替换行内元素无效，宽度由元素内容决定
6.非替换行内元素的行框高由 line-height 确定，替换行内元素的行框高由 height , margin , padding , border 决定 7.浮动或绝对定位时会转换为 block 8. vertical-align 属性生效
GIF :
JPEG ：
PNG ：
七种数据类型
(ES6之前)其中5种为基本类型: string , number , boolean , null , undefined ,
ES6出来的 Symbol 也是原始数据类型 ，表示独一无二的值
Object 为引用类型(范围挺大),也包括数组、函数,
输出结果是：
工厂模式
简单的工厂模式可以理解为解决多个相似的问题;
单例模式
只能被实例化(构造函数给实例添加属性与方法)一次
沙箱模式
将一些函数放到自执行函数里面,但要用闭包暴露接口,用变量接收暴露的接口,再调用里面的值,否则无法使用里面的值
发布者订阅模式
就例如如我们关注了某一个公众号,然后他对应的有新的消息就会给你推送,
代码实现逻辑是用数组存贮订阅者, 发布者回调函数里面通知的方式是遍历订阅者数组,并将发布者内容传入订阅者数组
1.字面量
2.Object构造函数创建
3.使用工厂模式创建对象
4.使用构造函数创建对象
HTML中与javascript交互是通过事件驱动来实现的，例如鼠标点击事件onclick、页面的滚动事件onscroll等等，可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的，就需要了解一下“事件流”的概念。
什么是事件流：事件流描述的是从页面中接收事件的顺序,DOM2级事件流包括下面几个阶段。
addEventListener ： addEventListener 是DOM2 级事件新增的指定事件处理程序的操作，这个方法接收3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。
IE只支持事件冒泡 。
获取一个对象的原型，在chrome中可以通过__proto__的形式，或者在ES6中可以通过Object.getPrototypeOf的形式。
那么Function.proto是什么么？也就是说Function由什么对象继承而来，我们来做如下判别。
我们发现Function的原型也是Function。
我们用图可以来明确这个关系：
这里来举个栗子，以 Object 为例，我们常用的 Object 便是一个构造函数，因此我们可以通过它构建实例。
则此时， 实例为instance , 构造函数为Object ，我们知道，构造函数拥有一个 prototype 的属性指向原型，因此原型为:
这里我们可以来看出三者的关系:
在 JS 中，继承通常指的便是 原型链继承 ，也就是通过指定原型，并可以通过原型链继承原型上的属性或者方法。
在函数式编程中，函数是一等公民。那么函数柯里化是怎样的呢？
函数柯里化指的是将能够接收多个参数的函数转化为接收单一参数的函数，并且返回接收余下参数且返回结果的新函数的技术。
函数柯里化的主要作用和特点就是参数复用、提前返回和延迟执行。
在一个函数中，首先填充几个参数，然后再返回一个新的函数的技术，称为函数的柯里化。通常可用于在不侵入函数的前提下，为函数 预置通用参数 ，供多次重复调用。
call 和 apply 都是为了解决改变 this 的指向。作用都是相同的，只是传参的方式不同。
除了第一个参数外， call 可以接收一个参数列表， apply 只接受一个参数数组。
bind 和其他两个方法作用也是一致的，只是该方法会返回一个函数。并且我们可以通过 bind 实现柯里化。
如何实现一个 bind 函数
对于实现以下几个函数，可以从几个方面思考
如何实现一个call函数
如何实现一个apply函数
箭头函数其实是没有 this 的，这个函数中的 this 只取决于他外面的第一个不是箭头函数的函数的 this 。在这个例子中，因为调用 a 符合前面代码中的第一个情况，所以 this 是 window 。并且 this 一旦绑定了上下文，就不会被任何代码改变。
在函数中，我们首先使用 var 关键字声明了 name 变量。这意味着变量在创建阶段会被提升（ JavaScript 会在创建变量创建阶段为其分配内存空间），默认值为 undefined ，直到我们实际执行到使用该变量的行。我们还没有为 name 变量赋值，所以它仍然保持 undefined 的值。
使用 let 关键字（和 const ）声明的变量也会存在变量提升，但与 var 不同，初始化没有被提升。在我们声明（初始化）它们之前，它们是不可访问的。这被称为“暂时死区”。当我们在声明变量之前尝试访问变量时， JavaScript 会抛出一个 ReferenceError 。
关于 let 的是否存在变量提升，我们何以用下面的例子来验证：
let 变量如果不存在变量提升， console.log(name) 就会输出 ConardLi ，结果却抛出了 ReferenceError ，那么这很好的说明了， let 也存在变量提升，但是它存在一个“暂时死区”，在变量未初始化或赋值前不允许访问。
变量的赋值可以分为三个阶段：
关于 let 、 var 和 function ：
依次输出：undefined -> 10 -> 20
答案: D
colorChange 方法是静态的。静态方法仅在创建它们的构造函数中存在，并且不能传递给任何子级。由于 freddie 是一个子级对象，函数不会传递，所以在 freddie 实例上不存在 freddie 方法：抛出 TypeError 。
1.使用第一次push，obj对象的push方法设置 obj[2]=1;obj.length+=1 2.使用第二次push，obj对象的push方法设置 obj[3]=2;obj.length+=1 3.使用console.log输出的时候，因为obj具有 length 属性和 splice 方法，故将其作为数组进行打印 4.打印时因为数组未设置下标为 0 1 处的值，故打印为empty，主动 obj[0] 获取为 undefined
undefined {n:2}
首先，a和b同时引用了{n:2}对象，接着执行到a.x = a = {n：2}语句，尽管赋值是从右到左的没错，但是.的优先级比=要高，所以这里首先执行a.x，相当于为a（或者b）所指向的{n:1}对象新增了一个属性x，即此时对象将变为{n:1;x:undefined}。之后按正常情况，从右到左进行赋值，此时执行a ={n:2}的时候，a的引用改变，指向了新对象{n：2},而b依然指向的是旧对象。之后执行a.x = {n：2}的时候，并不会重新解析一遍a，而是沿用最初解析a.x时候的a，也即旧对象，故此时旧对象的x的值为{n：2}，旧对象为 {n:1;x:{n：2}}，它被b引用着。后面输出a.x的时候，又要解析a了，此时的a是指向新对象的a，而这个新对象是没有x属性的，故访问时输出undefined；而访问b.x的时候，将输出旧对象的x的值，即{n:2}。
在比较相等性，原始类型通过它们的值进行比较，而对象通过它们的引用进行比较。 JavaScript 检查对象是否具有对内存中相同位置的引用。
我们作为参数传递的对象和我们用于检查相等性的对象在内存中位于不同位置，所以它们的引用是不同的。
这就是为什么 { age: 18 } === { age: 18 } 和 { age: 18 } == { age: 18 } 返回 false 的原因。
所有对象键（不包括 Symbols ）都会被存储为字符串，即使你没有给定字符串类型的键。这就是为什么 obj.hasOwnProperty（'1'） 也返回 true 。
上面的说法不适用于 Set 。在我们的 Set 中没有 “1” ： set.has（'1'） 返回 false 。它有数字类型 1 ， set.has（1） 返回 true 。
这题考察的是对象的键名的转换。
catch 块接收参数 x 。当我们传递参数时，这与变量的 x 不同。这个变量 x 是属于 catch 作用域的。
之后，我们将这个块级作用域的变量设置为 1 ，并设置变量 y 的值。现在，我们打印块级作用域的变量 x ，它等于 1 。
在 catch 块之外， x 仍然是 undefined ，而 y 是 2 。当我们想在 catch 块之外的 console.log(x) 时，它返回 undefined ，而 y 返回 2 。

Web前端岗位面试题有哪些

前端面试题汇总，基本上会有四大类问题，具体如下：一、HTML1、Doctype作用？严格模式与混杂模式如何区分？它们有何意义?2、HTML5 为什么只需要写 ？3、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？4、页面导入样式时，使用link和@import有什么区别？5、介绍一下你对浏览器内核的理解？6、常见的浏览器内核有哪些？7、html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？8、简述一下你对HTML语义化的理解？9、HTML5的离线储存怎么使用，工作原理能不能解释一下？10、浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？11、请描述一下 cookies，sessionStorage 和 localStorage 的区别？12、iframe有那些缺点？13、Label的作用是什么？是怎么用的？（加 for 或 包裹）14、HTML5的form如何关闭自动完成功能？15、如何实现浏览器内多个标签页之间的通信? (阿里)16、webSocket如何兼容低浏览器？(阿里)17、页面可见性（Page Visibility）API 可以有哪些用途？18、如何在页面上实现一个圆形的可点击区域？19、实现不使用 border 画出1px高的线，在不同浏览器的Quirksmode和CSSCompat模式下都能保持同一效果。20、网页验证码是干嘛的，是为了解决什么安全问题？21、tite与h1的区别、b与strong的区别、i与em的区别？二、css1、介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？
2、CSS选择符有哪些？哪些属性可以继承？3、CSS优先级算法如何计算？4、CSS3新增伪类有那些？5、如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？6、display有哪些值？说明他们的作用。7、position的值relative和absolute定位原点是？8、CSS3有哪些新特性？9、请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？10、用纯CSS创建一个三角形的原理是什么？
11、一个满屏 品 字布局 如何设计?
三、常见兼容性问题？
1、li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？2、经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？3、为什么要初始化CSS样式。4、absolute的containing block计算方式跟正常流有什么不同？5、CSS里的visibility属性有个collapse属性值是干嘛用的？在不同浏览器下以后什么区别？6、position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？7、对BFC规范(块级格式化上下文：block formatting context)的理解？8、CSS权重优先级是如何计算的？9、请解释一下为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式10、移动端的布局用过媒体查询吗？11、使用 CSS 预处理器吗？喜欢那个？12、CSS优化、提高性能的方法有哪些？13、浏览器是怎样解析CSS选择器的？14、在网页中的应该使用奇数还是偶数的字体？为什么呢？15、margin和padding分别适合什么场景使用？16、抽离样式模块怎么写，说出思路，有无实践经验？[阿里航旅的面试题]17、元素竖向的百分比设定是相对于容器的高度吗？18、全屏滚动的原理是什么？用到了CSS的那些属性？19、什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？20、视差滚动效果，如何给每页做不同的动画？（回到顶部，向下滑动要再次出现，和只出现一次分别怎么做？）21、::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用。22、如何修改chrome记住密码后自动填充表单的黄色背景 ？23、你对line-height是如何理解的？24、设置元素浮动后，该元素的display值是多少？（自动变成display:block）25、怎么让Chrome支持小于12px 的文字？26、让页面里的字体变清晰，变细用CSS怎么做？（-webkit-font-smoothing: antialiased;）27、font-style属性可以让它赋值为“oblique” oblique是什么意思？28、position:fixed;在android下无效怎么处理？29、如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）30、display:inline-block 什么时候会显示间隙？(携程)31、overflow: scroll时不能平滑滚动的问题怎么处理？32、有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。33、png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？34、什么是Cookie 隔离？（或者说：请求资源的时候不要让它带cookie怎么做）35、style标签写在body后与body前有什么区别？四、JavaScript1、介绍JavaScript的基本数据类型。2、说说写JavaScript的基本规范？3、JavaScript原型，原型链 ? 有什么特点？4、JavaScript有几种类型的值？（堆：原始数据类型和 栈：引用数据类型），你能画一下他们的内存图吗？5、Javascript如何实现继承？6、Javascript创建对象的几种方式？7、Javascript作用链域?8、谈谈This对象的理解。9、eval是做什么的？10、什么是window对象? 什么是document对象?11、null，undefined的区别？12、写一个通用的事件侦听器函数(机试题)。13、[“1”, “2”, “3”].map(parseInt) 答案是多少？14、关于事件，IE与火狐的事件机制有什么区别？ 如何阻止冒泡？15、什么是闭包（closure），为什么要用它？16、javascript 代码中的”use strict”;是什么意思 ? 使用它区别是什么？17、如何判断一个对象是否属于某个类？18、new操作符具体干了什么呢?19、用原生JavaScript的实现过什么功能吗？20、Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？21、对JSON的了解？22、[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) }) 能解释一下这段代码的意思吗？23、js延迟加载的方式有哪些？24、Ajax 是什么? 如何创建一个Ajax？25、同步和异步的区别?26、如何解决跨域问题?27、页面编码和被请求的资源编码如果不一致如何处理？28、模块化开发怎么做？29、AMD（Modules/Asynchronous-Definition）、CMD（Common Module
Definition）规范区别？30、requireJS的核心原理是什么？（如何动态加载的？如何避免多次加载的？如何 缓存的？）31、让你自己设计实现一个requireJS，你会怎么做？32、谈一谈你对ECMAScript6的了解？33、ECMAScript6 怎么写class么，为什么会出现class这种东西?34、异步加载的方式有哪些？35、documen.write和 innerHTML的区别?36、DOM操作——怎样添加、移除、移动、复制、创建和查找节点?37、.call() 和 .apply() 的含义和区别？38、数组和对象有哪些原生方法，列举一下？39、JS 怎么实现一个类。怎么实例化这个类40、JavaScript中的作用域与变量声明提升？41、如何编写高性能的Javascript？42、那些操作会造成内存泄漏？43、JQuery的源码看过吗？能不能简单概况一下它的实现原理？44、jQuery.fn的init方法返回的this指的是什么对象？为什么要返回this？45、jquery中如何将数组转化为json字符串，然后再转化回来？46、jQuery 的属性拷贝(extend)的实现原理是什么，如何实现深拷贝？47、jquery.extend 与 jquery.fn.extend的区别？48、jQuery 的队列是如何实现的？队列可以用在哪些地方？49、谈一下Jquery中的bind(),live(),delegate(),on()的区别？50、JQuery一个对象可以同时绑定多个事件，这是如何实现的？51、是否知道自定义事件。jQuery里的fire函数是什么意思，什么时候用？52、jQuery 是通过哪个方法和 Sizzle 选择器结合的？（jQuery.fn.find()进入Sizzle）53、针对 jQuery性能的优化方法？54、Jquery与jQuery UI有啥区别？55、JQuery的源码看过吗？能不能简单说一下它的实现原理？56、jquery 中如何将数组转化为json字符串，然后再转化回来？57、jQuery和Zepto的区别？各自的使用场景？58、针对 jQuery 的优化方法？59、Zepto的点透问题如何解决？60、jQueryUI如何自定义组件?61、需求：实现一个页面操作不会整页刷新的网站，并且能在浏览器前进、后退时正确响应。给出你的技术实现方案？62、如何判断当前脚本运行在浏览器还是node环境中？（阿里）63、移动端最小触控区域是多大？64、jQuery 的 slideUp动画 ，如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行，该如何处理呢?65、把 Script 标签 放在页面的最底部的body封闭之前 和封闭之后有什么区别？浏览器会如何解析它们？66、移动端的点击事件的有延迟，时间是多久，为什么会有？ 怎么解决这个延时？（click 有 300ms 延迟,为了实现safari的双击事件的设计，浏览器要知道你是不是要双击操作。）67、知道各种JS框架(Angular, Backbone, Ember, React, Meteor, Knockout…)么? 能讲出他们各自的优点和缺点么?68、Underscore 对哪些 JS 原生对象进行了扩展以及提供了哪些好用的函数方法？69、解释JavaScript中的作用域与变量声明提升？70、那些操作会造成内存泄漏？71、JQuery一个对象可以同时绑定多个事件，这是如何实现的？72、Node.js的适用场景？(如果会用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么?73、解释一下 Backbone 的 MVC 实现方式？74、什么是“前端路由”?什么时候适合使用“前端路由”? “前端路由”有哪些优点和缺点?75、知道什么是webkit么? 知道怎么用浏览器的各种工具来调试和debug代码么?76、如何测试前端代码么? 知道BDD, TDD, Unit Test么? 知道怎么测试你的前端工程么(mocha, sinon, jasmin, qUnit..)?77、前端templating(Mustache, underscore, handlebars)是干嘛的, 怎么用?78、简述一下 Handlebars 的基本用法？79、简述一下 Handlerbars 的对模板的基本处理流程， 如何编译的？如何缓存的？80、用js实现千位分隔符?(来源：前端农民工，提示：正则+replace)检测浏览器版本版本有哪些方式？81、我们给一个dom同时绑定两个点击事件，一个用捕获，一个用冒泡，你来说下会执行几次事件，然后会先执行冒泡还是捕获

web前端面试题：CSS引入的方式有哪些

外联 内联 和行内
三种方式使用css样式
写在文件里面，使用style标签
写在标签里面。例如

内容

单独写一个文件，
href里面是css文件的路径，根据自己的实际情况进行变化
面试前端，面试官问你怎么解决浏览器相容性问题，你应该怎么回答？

面试前端，面试官问你怎么解决浏览器相容性问题，你应该怎么回答？？ 不同浏览器对HTML标记所具有的内外边距属性具有不同的定义。 因此如果想消除这种差距，应该在相应的CSS部分加入以下CSS程式码： *{margin:0px;padding:0px;} 借于此，所有标记的内外边距被统一起来。 优先顺序问题： 对于同一标记属性所给定的值，有不同的优先顺序。其中优先顺序最高的是内联程式码，其实是页内CSS，接下来是浏览器预设设定，最后才是外部CSS所做的限制。 Margin不一致的问题： 当有多张图片需要排在一行时，我们通常使用“Float：Left”来实现，这样一来，浏览器就存在相容性问题。导致图片与后面的内容存在margin不一致的问题。对此一种解决方法就是给图片新增“Display：inline”项即可。 DIV居中问题： 通常我们会利用“vertical-align:middle”来实现，这对于搜狗浏览器来说，是正常的，但是对于IE浏览器来说，却并没有效果。对此，一种较好的解决方法是：将文字的行高设定与DIV一样时即可解决问题。 内外边框合并问题。通常情况下，对于两个相关DIV块，相邻时采用外边距合并原则，其结果只最两个DIV块中Margin最大值做为两个DIV之间的间距。包含的两个DIV之间的间距也遵行同样的规则。 掌握了这一规则，在利用DIV块进行布局时我们就可以做的更加得心应手。
怎么解决浏览器相容性问题 1.在大多数情况下,IE是常用的浏览器,当然IE6现在用的相对少了,自WIN7以来,IE都更新到IE9,IE9浏览模式,有一个相容性的选项,这样可以解决浏览网站的相容性; 2.再个要解决浏览器的相容性,最好使用谷歌浏览器或是360浏览器,这两个浏览程式 优化做得好,能解决大多数相容问题; 3.解决浏览器的相容性,还要注意浏览器的外挂,很多外挂只能在IE下使用,所以,我们要注意外挂带来的相容性问题;
浏览器相容性问题怎么解决 不同的浏览器有不同的HACK程式码，如IE6采用的是_属性：值，如_margin:10px;表示该样式只有IE6能识别，如果感兴趣，可以上网搜寻一下，不同的浏览器相容方式不一样，如今的浏览器在相容上，你需要先了解所相容浏览器的核心属于什么型别，现在的浏览器分为三大类，即IE一类、火狐一类、以webkit为核心的一类，如搜狗、谷歌等，不同的浏览器，其相容的程式码不一致，因此针对一个样式，你需要些多种不同的相容程式码才能完成相容。
浏览器相容性问题怎么解决啊 如果是外挂崩溃建议换一个浏览器。 不过据你说的原因个人感觉是网速问题。因为视讯网站，例如youku都是将视讯分成若干段储存的。播放的时候一段一段载入。如果网速不好或者是连通率不高也许就会出现载入完事一段之后不能顺利载入第二段。
ie8浏览器相容性问题怎么解决 方法1、简单方法：通过IE8.0浏览器介面中的“相容性检视”按钮，重新开启当前地址网页便可 方法2：通过IE8.0浏览器选单中的“工具”－“相容性检视设定”来设定相容的网站。具体方法为点选“工具”－“相容性检视设定”按钮出现如下图所示的视窗，只要在“新增此网站”中新增要相容开启的网址，然后点选“新增”按钮后，就会在“已新增到相容性检视中的网站”中显示出来网址。新增好后，点选“相容性检视设定”视窗，浏览器便可自动重新整理网页并可以正常显示。

浏览器相容性问题 常见浏览器相容性问题与解决方案（面试题目） 1，浏览器相容问题一：不同浏览器的标签预设的margin和padding不同 问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。 碰到频率:100% 解决方案： 可以使用Normalize来清除预设样式，具体可参考文章：来，让我们谈一谈 Normalize.css 也可以使用如下程式码： body,h1,h2,h3,ul,li,input,div,span,a,form …… { margin:0; padding:0; } 2，浏览器相容问题二：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设定的大 问题症状:常见症状是IE6中后面的一块被顶到下一行 碰到频率：90%（稍微复杂点的页面都会碰到，float布局最常见的浏览器相容问题） 解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性 备注：我们最常用的就是div+CSS布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div float实现的，横向的间距设定如果用margin实现，这就是一个必然会碰到的相容性问题。 3，浏览器相容问题三：设定较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设定高度 问题症状：IE6、7和遨游里这个标签的高度不受控制，超出自己设定的高度 碰到频率：60% 解决方案：给超出高度的标签设定overflow:hidden;或者设定行高line-height 小于你设定的高度。 备注：这种情况一般出现在我们设定小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小预设的行高的高度。即使你的标签是空的，这个标签的高度还是会达到预设的行高。 4，浏览器相容问题四：行内属性标签，设定display:block后采用float布局，又有横行的margin的情况，IE6间距bug 问题症状：IE6里的间距比超过设定的间距 碰到机率：20% 解决方案：在display:block;后面
css浏览器相容性问题怎么解决方案 解决方案： 1.开启360安全浏览器。 2.点选浏览器下栏第二位的浏览器医生按钮，弹出对话方块。 3.点选"重灌IE”，按提示操作，直至成功。
怎么解决CSS网页与浏览器相容性问题? 这个得看你具体想相容什么了，具体相容到IE几 不同的浏览器有不同的写法，IE8的话可以直接去网上搜索相容，具体相容什么属性一般都可以搜寻到