笔试题http请求方式 状态码 布局 多标签通信 前端性能优化
企业 前端面试题
- QA
- 页面从输入 URL 到加载显示完成,过程发生什么
- 前端性能优化
- 1、加载优化
- 2、 图片优化
- 3、css优化
- 4、js优化
- 5、渲染优化
- 6、首屏优化
- 7、打包优化(主要是webpack优化)
- 8、webpack长缓存优化
- 9、vue优化
- 10、 react优化
- 11、 SEO优化
- 如何实现浏览器内多个标签页通信
- Localstorage、sessionStorage、cookie 的区别
- HTTP 请求方式有几种
- HTTP 状态码以及代表的意义
- 5 种常见的 HTTP 状态码以及代表的意义
- 更多状态码
- var、let、const 之间的区别
- json字符串转为json对象的方法 及 区别
- jQuery 中的选择器和 css 中的选择器的区别
- JavaScript 垃圾(内存)回收机制
- JavaScript 数据类型有?如何判断?
- CSS 中 link 和@import 的区别
- JS数组去重
- jQuery 中 $ .get() 提交和 $.post() 提交 的区别
- transition属性 的四个子属性分别是
- background 中,C3新增属性有什么
- hsla 分别是
- 如何使一个盒子水平垂直居中
- 如何垂直居中一个 img
- 如何实现双飞翼(圣杯)布局
QA
页面从输入 URL 到加载显示完成,过程发生什么
1、浏览器查找域名对应的 IP 地址(DNS 查询:浏览器缓存->系统缓存->路由器缓存->ISP
DNS 缓存->根域名服务器)
2、浏览器向 Web 服务器发送一个 HTTP 请求(TCP 三次握手)
3、服务器 301 重定向(从 HTTP://example.com 重定向到 HTTP://www.example.com)
4、浏览器跟踪重定向地址,请求另一个带 www 的网址
5、服务器处理请求(通过路由读取资源)
6、服务器返回一个 HTTP 响应(报头中把 Content-type 设置为 ‘text/html’)
7、浏览器进 DOM 树构建
8、浏览器发送请求获取嵌在 HTML 中的资源(如图片、音频、视频、CSS、JS 等)
9、浏览器显示完成页面
10、浏览器发送异步请求
前端性能优化
Web 性能优化辅助工具
Lighthouse 详细的内容,可以去参考git:https://github.com/GoogleChrome/lighthouse测试网站
https://www.webpagetest.org/
具体优化内容有:
1、加载优化
- 加载优化
- 压缩合并
- 代码分割(code spliting),可以基于路由或动态加载
- 第三方模块放在CDN
- 大模块异步加载,例如: Echarts,可以使用require.ensure,在加载成功后,在显示对应图表
- 小模块适度合并,将一些零散的小模块合并一起加载,速度较快
- 可以使用pefetch预加载,在分步场景中非常适合
2、 图片优化
- 小图使用雪碧图,iconFont,base64内联
- 图片使用懒加载
- webp代替其他格式
- 图片一定要压缩
- 可以使用的img的srcset,根据不同分辨率显示不同尺寸图片,这样既保证显示效果,又能节省带提高加载速度
3、css优化
- css写在头部
- 避免css表达式
- 移除空置的css规则
- 避免行内style样式
4、js优化
- js写在body底部
- js用defer放在头部,提前加载时间,又不阻塞dom解析
- script标签添加crossorigin,方便错误收集
5、渲染优化
- 尽量减少reflow和repaint
涉及到样式,尺寸,节点增减的操作,都会触发reflow和repaint。 - 用变量缓存dom样式,不要频繁读取
- 通过DocumentFragment或innerHTML批量操作dom
- dom隐藏,或复制到内存中,类似virtual dom,进行修改,完成后再替换回去
- 动画元素一定要absolute,脱离文档流,不影响其他元素。动画不要用left,top等操作,要使用transform和opacity,同时开启渲染层(will-change或translate3d(0,0,0))
- 动画尽量用requestAnimationFrame,不要用定时器
- 移动端硬件加速,触发GPU渲染,还是translate3d(0,0,0)
6、首屏优化
原则:显示快,滚动流畅,懒加载,懒执行,渐进展现
- 代码分离,将首屏不需要的代码分离出去
- 服务端渲染或预渲染,加载完html直接渲染,减少白屏时间
- DNS prefetch,使用dns-prefetch减少dns查询时间,PC端域名发散,移动端域名收敛
- 减少关键路径css,可以将关键的css内联,这样可以减少加载和渲染时间
7、打包优化(主要是webpack优化)
- 拆包 externals dllPlugin
- 提取公共包 commonChunkPlugin或splitChunks
- 缩小范围 各种loader配置include和exclude,noParse跳过文件
- 开启缓存 各种loader开启cache
- 多线程加速 happypack或thead-loader
- tree-shaking ES模块分析,移除死代码
- Scope Hoisting ES6模块分析,将多个模块合并到一个函数里,减少内存占用,减小体积,提示运行速度
8、webpack长缓存优化
- js文件使用chunkhash,不使用hash
- css文件使用contenthash,不使用chunkhash,不受js变化影响
- 提取vendor,公共库不受业务模块变化影响
- 内联webpack runtime到页面,chunkId变化不影响vendor
- 保证module Id稳定,不使用数字作为模块id,改用文件内容的hash值,使用HashedModuleIdsPlugin,模块的新增或删除,会导致其后面的所有模块id重新排序,为避免这个问题
- 保证chunkhash稳定,使用webpack-chunk-hash,替代webpack自己的hash算法。webpack自己的hash算法,对于同一个文件,在不同开发环境下,会计算出不用的hash值,不能满足跨平台需求。
9、vue优化
- 路由懒加载组件
- keep-alive缓存组件,保持原显示状态
- 列表项添加key,保证唯一
- 列表项绑定事件,使用事件代理(v-for)
- v-if和v-for不要用在一个标签上,它会在每个项上进行v-if判断
10、 react优化
- 路由组件懒加载,使用react-loadable
- 类组件添加shouldComponent或PureComponent
- 函数组件添加React.memo
- 列表项添加key,保证唯一
- 函数组件使用hook优化,useMemo,useCallback
11、 SEO优化
- 添加各种meta信息
- 预渲染
- 服务端渲染
如何实现浏览器内多个标签页通信
websocket、SharedWorker
也可以调用 localstorge、cookies 等本地存储方式;
localstorge 另一个浏览上下文里被添加、修改或删除时,它都会触发一个事件;
我们通过监听事件,控制它的值来进行页面信息通信;
注意 quirks:Safari 在无痕模式下设置 localstorge 值时会抛出 QuotaExceededError 的异常。
Localstorage、sessionStorage、cookie 的区别
共同点:都是保存在浏览器端、且同源的
区别:
1、cookie 数据始终在同源的 http 请求中携带(即使不需要),即 cookie 在浏览器和服务器
间来回传递,而 sessionStorage 和 localStorage 不会自动把数据发送给服务器,仅在本地保存。
cookie 数据还有路径(path)的概念,可以限制 cookie 只属于某个路径下;
2、存储大小限制也不同,cookie 数据不能超过 4K,同时因为每次 http 请求都会携带 cookie、
所以 cookie 只适合保存很小的数据,如会话标识。sessionStorage 和 localStorage 虽然也有存储大小的限制,但比 cookie 大得多,可以达到 5M 或更大;
3、数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭之前有效;localStorage:始
终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie:只在设置的 cookie 过期时间之前有效,即使窗口关闭或浏览器关闭;
4、作用域不同,sessionStorage 不在不同的浏览器窗口中共享,即使是同一个页面;localstorage在所有同源窗口中都是共享的;cookie 也是在所有同源窗口中都是共享的;
5、web Storage 支持事件通知机制,可以将数据更新的通知发送给监听者;
6、web Storage 的 api 接口使用更方便
HTTP 请求方式有几种
1、GET 请求指定的页面信息,并返回实体主体。
2、HEAD 类似于 get 请求,只不过返回的响应中没有具体的内容,用于获取报头
3、POST 向指定资源提交数据进行处理请求(例如提交表单或者上传文件)。数据被
包含在请求体中。POST 请求可能会导致新的资源的建立和/或已有资源的修改。
4、PUT 从客户端向服务器传送的数据取代指定的文档的内容。
5、DELETE 请求服务器删除指定的页面。
6、CONNECT HTTP/1.1 协议中预留给能够将连接改为管道方式的代理服务器。
7、OPTIONS 允许客户端查看服务器的性能。
8、TRACE 回显服务器收到的请求,主要用于测试或诊断。
9、PATCH 实体中包含一个表,表中说明与该 URI 所表示的原内容的区别。
10、MOVE 请求服务器将指定的页面移至另一个网络地址。
11、COPY 请求服务器将指定的页面拷贝至另一个网络地址。
12、LINK 请求服务器建立链接关系。
13、UNLINK 断开链接关系。
14、WRAPPED 允许客户端发送经过封装的请求。
15、LOCK 允许用户锁定资源,比如可以再编辑某个资源时将其锁定,以防别人同时对
其进行编辑。
16、MKCOL 允许用户创建资源
17、Extension-mothed 在不改动协议的前提下,可增加另外的方法。
HTTP 状态码以及代表的意义
5 种常见的 HTTP 状态码以及代表的意义
200( OK):请求已成功,请求所希望的响应头或数据体将随此响应返回。
303( See Other):告知客户端使用另一个 URL 来获取资源。
400( Bad Request):请求格式错误。1)语义有误,当前请求无法被服务器理解。除非进行修改,否则客户端不应该重复提交这个请求;2)请求参数有误。
404( Not Found):请求失败,请求所希望得到的资源未被在服务器上发现。
500( Internal Server Error):服务器遇到了一个未曾预料的状况,导致了它无法完成对请求的处理。
更多状态码
100 => 正在初始化(一般是看不到的)
101 => 正在切换协议(websocket 浏览器提供的)
202 => 表示接受
301 => 永久重定向/永久转移
302 => 临时重定向/临时转移(一般用来做服务器负载均衡)
304 => 本次获取的内容是读取缓存中的数据,会每次去服务器校验
401 => 未认证,没有登录网站
403 => 禁止访问,没有权限
503 => 服务器超负荷(假设一台服务器只能承受 10000 人,当第 10001 人访问的时候,如果服务器没有做负载均衡,那么这个人的网络状态码就是 503)
var、let、const 之间的区别
var 声明变量可以重复声明,而 let 不可以重复声明;
var 是不受限于块级的,而 let 是受限于块级;
var 会与 window 相映射(会挂一个属性),而 let 不与 window 相映射
var 可以在声明的上面访问变量,而 let 有暂存死区,在声明的上面访问变量会报错;
const 声明之后必须赋值,否则会报错;
const 定义不可变的量,改变了就会报错;
const 和 let 一样不会与 window 相映射、支持块级作用域、在声明的上面访问变量会报错。
json字符串转为json对象的方法 及 区别
json对象转为 json字符串的方法
1、字符串转对象
第一种方式:eval();
var data=’{“student”:[{“name”:“张三”,“age”:“11”},{“name”:“李四”,“age”:“11”},{“name”:“王
五”,“age”:“11”}]}’;
eval(’(“+data+”)’); 第二种方式:JSON.parse();
var data=’{“student”:[{“name”:“张三”,“age”:“11”},{“name”:“李四”,“age”:“11”},{“name”:“王
五”,“age”:“11”}]}’;
JSON.parse(data);
与 eval()区别
eval()方法不会去检查给的字符串时候符合 json 的格式~同时如果给的字符串中存在 js 代
码 eval()也会一并执行~比如:
var data=’{“student”:[{“name”:“张三”,“age”:“11”},{“name”:"李四
",“age”:“alert(11)”},{“name”:“王五”,“age”:“11”}]}’;
此时执行 eval 方法后会先弹出一个提示框输出 11 的字符串; 这时候使用 JSON.parse()就会报错,显示错误信息为当前字符串不符合 json 格式;即
JSON.parse()方法会检查需要转换的字符串是否符合 json 格式
相比而言 eval()方法是很不安全,特别是当涉及到第三方时我们需要确保传给 eval()的
参数是我们可以控制的,不然里面插入比如window.location~指向一个恶意的连接总的来说,
还是推荐使用 JSON.parse()来实现 json 格式字符串的解析
2、对象转字符串
JSON.stringify(json)
jQuery 中的选择器和 css 中的选择器的区别
jQuery 选择器支持 CSS 里的选择器,jQuery 选择器可用来添加样式和添加相应的行为 CSS 中的选择器是只能添加相应的样式。
JavaScript 垃圾(内存)回收机制
1、标记清除(mark and sweep)
这是 JavaScript 最常见的垃圾回收方式,当变量进入执行环境的时候,比如函数中声明一个变量,垃圾回收器将其标记为“进入环境”,当变量离开环境的时候(函数执行结束)将其标记为“离开环境” 垃圾回收器会在运行的时候给存储在内存中的所有变量加上标记,然后去掉环境中的变量以及被环境中变量所引用的变量(闭包),在这些完成之后仍存在标记的就是要删除的变量了。
2、引用计数(reference counting)
在低版本 IE 中经常会出现内存泄露,很多时候就是因为其采用引用计数方式进行垃圾回收。 引用计数的策略是跟踪记录每个值被使用的次数,当声明了一个 变量并将一个引用类型赋值给该变量的时候这个值的引用次数就加 1,如果该变量的值变成了另外一个,则这个值得引用次数减1,当这个值的引用次数变为 0 的时 候,说明没有变量在使用,这个值没法被访问了,因此可以
将其占用的空间回收,这样垃圾回收器会在运行的时候清理掉引用次数为 0 的值占用的空间。
在 IE 中虽然 JavaScript 对象通过标记清除的方式进行垃圾回收,但 BOM 与 DOM 对象却是通过引用计数回收垃圾的,也就是说只要涉及 BOM 及 DOM 就会出现循环引用问题。
JavaScript 数据类型有?如何判断?
JS数据类型一共有 7 种:
Undefined、Null、Boolean、String、Symbol、Number、Object;
除了 Object 之外的 6 种属于原始数据类型。有时,我们还会细分 Object 的类型,比如 Array,Function,Date,RegExp 等;
- typeof
typeof 可以用来区分除了 Null 类型以外的原始数据类型,对象类型的可以从普通对象里面识别出函数:
typeof undefined // "undefined"
typeof null // "object"
typeof 1 // "number"
typeof "1" // "string"
typeof Symbol() // "symbol"
typeof function() {} // "function"
typeof {} // "object"
- instanceof
instanceof 不能用于判断原始数据类型的数据:
3 instanceof Number // false
'3' instanceof String // false
true instanceof Boolean // false
instanceof 可以用来判断对象的类型:
var date = new Date()
date instanceof Date // true var number = new Number()
number instanceof Number // true var string = new String()
string instanceof String // true
需要注意的是,instanceof 的结果并不一定是可靠的,因为在 ECMAScript7 规范中可以通过自定义 Symbol.hasInstance 方法来覆盖默认行为。
- Array.isArray
**Array.isArray(value)**可以用来判断 value 是否是数组:
Array.isArray([]) // true
Array.isArray({}) // false
(function () {console.log(Array.isArray(arguments))}()) // false
CSS 中 link 和@import 的区别
适用范围不同 :@import 可以在网页页面中使用,也可以在 CSS 文件中使用,用来将多个 CSS 文件引入到一个 CSS 文件中;而 link 只能将 CSS 文件引入到网页页面中;
功能范围不同 :link 属于 XHTML 标签,而@import 是 CSS 提供的一种方式,link 标签除了可以加载 CSS 外,还可以定义 RSS,定义 rel 连接属性等,@import 就只能加载 CSS;
加载顺序不同 :当一个页面被加载的时候,link 引用的 CSS 会同时被加载,而@import 引用的 CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import 加载 CSS 的页面时开始会没有样式(就是闪烁),网速慢的时候还挺明显;
兼容性: 由于@import 是 css2.1 提出的,所以老的浏览器不支持,@import 只有在 IE5
以上的才能识别,而 link 标签无此问题
控制样式时的差别 使用 link 方式可以让用户切换 CSS 样式.现代浏览器如
Firefox,Opera,Safari 都支持 rel=”alternate stylesheet”属性(即可在浏览器上选择不同 的风格), 当然你还可以使用 Javascript 使得 IE 也支持用户更换样式
权重区别: link 引入的样式权重大于@import 引入的样式
JS数组去重
1、使用 es6 set 方法
[...new Set(arr)] let arr = [1,2,3,4,3,2,3,4,6,7,6]; let unique = (arr)=>
[...new Set(arr)]; unique(arr); // [1, 2, 3, 4, 6, 7]
2、利用新数组 indexOf 查找:
indexOf() 方法可返回某个指定的元素在数组中首次出现的位置。
如果没有就返回-1。
3、for 双重循环:通过判断第二层循环,去重的数组中是否含有该元素,如果有就退出第二层循环,如果没有 j==result.length 就相等,然后把对应的元素添加到最后的数组 里面。
let arr = [1,2,3,4,3,2,3,4,6,7,6];
let result = [];
for(var i = 0 ; i < arr.length; i++) {for(var j = 0 ; j < result.length ; j++) {if( arr[i] === result[j]){break;};};if(j == result.length){result.push(arr[i]);};
};
console.log(result);
4、利用 for 嵌套 for,然后 splice 去重:
functionunique(arr){ for(vari=0; i<arr.length;i++){ for(varj=i+1; j<arr.length; j++){ if(arr[i]==arr[j]){ //第一个等同于第二个,splice 方法删除第二个 arr.splice(j,1); j--; }} } return arr;}
5、利用 filter :
let arr = [1,2,3,4,3,2,3,4,6,7,6];
let unique = (arr) => {return arr.filter((item,index) => {return arr.indexOf(item) === index;})
};
unique(arr);
6、
let arr = [1,2,3,4,3,2,3,4,6,7,6];
let unique = (arr) => {return arr.filter((item,index) => {return arr.indexOf(item) === index;})
};
unique(arr);
7、利用 Map 数据结构去重:
let arr = [1,2,3,4,3,2,3,4,6,7,6]; let unique = (arr)=> {let seen = new Map();return arr.filter((item) => {return !seen.has(item) && seen.set(item,1);});
}; unique(arr);
jQuery 中 $ .get() 提交和 $.post() 提交 的区别
同:都是异步请求的方式来获取服务端的数据;
异:
1、请求方式不同:
$ . get() 方法使用 GET 方法来进行异步请求;
$. post() 方法使用 POST 方法来进行异步请求。
2、参数传递方式不同:get 请求会将参数跟在 URL 后进行传递,而 POST 请求则是作为 HTTP 消息的实体内容发送给 Web 服务器的,这种传递是对用户不可见的。
3、数据传输大小不同:get 方式传输的数据大小不能超过 2KB 而 POST 要大的多。
4、安全问题:GET 方式请求的数据会被浏览器缓存起来,因此有安全问题
transition属性 的四个子属性分别是
background 中,C3新增属性有什么
background-size、background-origin 、background-clip
- background-size 规定背景图像的尺寸
默认值 | auto |
---|---|
继承性: | no |
版本: | CSS3 |
JavaScript语法: | object.style.backgroundSize=“60px 80px” |
background-size: length|percentage|cover|contain;
值 | 描述 |
---|---|
length | 设置背景图像的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 “auto”。 |
percentage | 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 “auto”。 |
cover | 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。 |
contain | 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。 |
- background-origin 相对于内容框来定位背景图像,background-origin 属性规定 background-position 属性相对于什么位置来定位。
注释:如果背景图像的 background-attachment 属性为 “fixed”,则该属性没有效果。
默认值: | padding-box |
---|---|
继承者: | no |
版本: | CSS3 |
JavaScript 语法: | object.style.backgroundOrigin=“content-box” |
background-origin: padding-box|border-box|content-box;
值 | 描述 |
---|---|
padding-box | 背景图像相对于内边距框来定位。 |
border-box | 背景图像相对于边框盒来定位。 |
content-box | 背景图像相对于内容框来定位。 |
- background-clip 属性规定背景的绘制区域:
默认值: | padding-box |
---|---|
继承者: | no |
版本: | CSS3 |
JavaScript 语法: | object.style.backgroundClip=“content-box” |
background-clip: border-box|padding-box|content-box;
值 | 描述 |
---|---|
border-box | 背景被裁剪到边框盒。 |
padding-box | 背景被裁剪到内边距框。 |
content-box | 背景被裁剪到内容框。 |
hsla 分别是
hsla() 函数使用色相、饱和度、亮度、透明度来定义颜色。
HSLA 即色相、饱和度、亮度、透明度(英:Hue, Saturation, Lightness, Alpha )。
色相(H)是色彩的基本属性,就是平常所说的颜色名称,如红色、黄色等。
饱和度(S)是指色彩的纯度,越高色彩越纯,低则逐渐变灰,取 0-100% 的数值。
亮度(L) 取 0-100%,增加亮度,颜色会向白色变化;减少亮度,颜色会向黑色变化。
透明度(A) 取值 0~1 之间, 代表透明度。
如何使一个盒子水平垂直居中
方法一:利用定位(常用方法,推荐)
<!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>.parent { width: 500px;height: 500px;border: 1px solid #000;position: relative;}.child { width: 100px;height: 100px;border: 1px solid #999;position: absolute;top: 50%;left: 50%; margin-top: -50px; margin-left: -50px;}
</style>
</head>
<body><div class="parent"><div class="child">我是子元素</div></div>
</body>
</html>
方法二:利用 margin:auto;
<!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>.parent { width: 500px;height: 500px;border: 1px solid #000;position: relative;}.child { width: 100px;height: 100px;border: 1px solid #999;position: absolute; margin: auto;top: 0;left: 0;right: 0;bottom: 0;}
</style>
</head>
<body><div class="parent"><div class="child">我是子元素</div></div>
</body>
</html>
方法三:利用 display:table-cell
<!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>.parent {width: 500px;height: 500px;border: 1px solid #000;display: table-cell;vertical-align: middle;text-align: center;}.child { width: 100px;height: 100px;border: 1px solid #999;display: inline-block;}
</style>
</head>
<body><div class="parent"><div class="child">我是子元素</div></div>
</body>
</html>
方法四:利用 **display:flex;**设置垂直水平都居中
<!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>.parent {width: 500px;height: 500px;border: 1px solid #000;display: flex;justify-content: center;align-items: center;}.child { width: 100px;height: 100px;border: 1px solid #999;}
</style>
</head>
<body><div class="parent"><div class="child">我是子元素</div></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>.parent { width: 500px;height: 500px;border: 1px solid #000;}.child { width: 100px;height: 100px;border: 1px solid #999; margin-top: 200px; margin-left: 200px;}
</style>
</head>
<body><div class="parent"><div class="child">我是子元素</div></div>
</body>
</html>
方法六:利用 transform
<!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>.parent { width: 500px;height: 500px;border: 1px solid #000;position: relative;}.child { width: 100px;height: 100px;border: 1px solid #999;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
</style>
</head>
<body><div class="parent"><div class="child">我是子元素</div></div>
</body>
</html>
如何垂直居中一个 img
#container { //<img>的容器设置如下display:table-cell;text-align:center;vertical-align:middle;
}
如何实现双飞翼(圣杯)布局
1、利用定位实现两侧固定中间自适应
1.1)父盒子设置左右 padding 值
1.2)给左右盒子的 width 设置父盒子的 padding 值,然后分别定位到 padding 处.
1.3)中间盒子自适应
具体 CSS 代码
<style>.father {height: 400px;background-color: pink;position: relative;padding: 0 200px;}.left,.right {width: 200px;height: 300px;background-color: yellow;position: absolute;top: 0;}.left {left: 0;}.right {right: 0;}.center {background-color: blue;height: 350px;}
</style>
html 结构
<div class="father"><div class="left"></div><div class="center"></div><div class="right"></div>
</div>
2、利用 flex 布局实现两侧固定中间自适应
2.1)父盒子设置 display:flex;
2.2)左右盒子设置固定宽高
2.3)中间盒子设置 flex:1 ;
<style>.father {height: 400px;background-color: pink;display: flex;}.left {width: 200px;height: 300px;background-color: yellow;}.right {width: 200px;height: 300px;background-color: yellow;}.center {flex: 1;background-color: blue;}
</style>
html 结构
<div class="father"><div class="left"></div><div class="center"></div><div class="right"></div>
</div>
3、利用 bfc 块级格式化上下文 , 实现两侧固定中间自适应
3.1)左右 固定宽高,进行浮动
3.2)中间 overflow: hidden;
<style>.father {height: 500px;background-color: pink;}.left {float: left; width: 200px;height: 400px;background-color: blue;}.right {float: right; width: 200px;height: 400px;background-color: blue;}.center {height: 450px;background-color: green;overflow: hidden;}
</style>
html 结构
<!-- 注意:left 和 right 必须放在 center 前面 -->
<div class="father"><div class="left"></div><div class="right"></div><div class="center"></div>
</div>
笔试题http请求方式 状态码 布局 多标签通信 前端性能优化相关推荐
- Http请求头+请求方式+状态码
列举Http请求中常见的请求方式? http请求中的8种请求方法 1.opions 返回服务器针对特定资源所支持的HTML请求方法 或web服务器发送*测试服务器功能(允许客户端查看服务器性能) 2. ...
- ajax请求提示html状态码302,快速解决ajax请求出错状态码为0的问题
今天在使用 ajax 向后台请求数据时出现错误,提示状态码为 0 ,后台采用的是 spring mvc 架构. 状态码为0是什么意思呢?查找了下,原来它意味着 (未初始化)即没有调用到send()方法 ...
- CEF3:https 请求返回状态码canceled
CEF3:https 请求返回状态码canceled 客户端项目中浏览器内核用的cef3,最近在测试的时候 服务器配置的为https但是使用IP访问的.像如果 https服务器并没有完全安装正规的配置 ...
- put请求400状态码
put请求400状态码 后台检查数据类型是否匹配与前台传过来的是否对应 private String phone; private String verifyCode; 查看接收参数是使用@Reque ...
- http/https请求响应状态码大全
http/https请求响应状态码大全 一.http和https协议是什么? 二.状态码大全 总结 一.http和https协议是什么? HTTP协议:全称是HyperText Transfer Pr ...
- HTTP请求返回状态码意义(详)
所有HTTP请求返回状态码意义 100 Continue 继续.客户端应继续其请求 101 Switching Protocols 切换协议.服务器根据客户端的请求切换协议.只能切换到更高级的协议,例 ...
- ajax返回状态码为零,ajax - HTTP请求返回状态码0时的含义是什么?
ajax - HTTP请求返回状态码0时的含义是什么? JavaScript网络调用(例如fetch或XMLHttpRequest)或任何其他类型的HTTP网络请求在HTTP状态代码为0时失败意味着什 ...
- CSS3与页面布局学习总结(八)——浏览器兼容与前端性能优化
一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
- CSS3与页面布局学习笔记(八)——浏览器兼容性问题与前端性能优化方案
一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
最新文章
- 高斯过程回归(GPR)—— 数学推导
- python性能优化之函数执行时间分析_python性能优化之函数执行时间分析
- 40. Combination Sum II 组合总和 II
- 使用共享网口方式访问BMC管理控制器
- min里所有的参数都不存在_高中生物所有的考点难点,其实都在你不仔细看的课本里,必修1-3超强记忆手册!...
- Linux 命令之 locate -- 文件查找工具(查找文件/搜索文件)
- 前端学习(2363):发送get请求
- c语言中entern int x y,关于extern和int main()的结构有关问题
- matlab单点弦截法求解,弦截法求根c语言
- 创意电子学-小知识:晶体管
- 第6章 歌手详情页开发
- 2018 新浪校招 PHP实习生 电话面试总结
- js判断浏览器是否打开了控制台
- ERP系统有哪些品牌?哪个品牌值得推荐?
- 深度学习 英文 训练阶段_深度学习英语单词才是王道丨6步就搞定!
- 【教学】深度学习小项目汇总_含源代码包运行
- 2019京东618活动提报要求一览
- AndroidPN环境建立
- 数仓工具—Hive实战之滑动/滚动时间窗口计算(19)
- LoadRunner 11压测时碰到错误Error: missing newline in E:\xx\RCV.dat
热门文章
- 计算机玩游戏用什么系统好,大神处置玩游戏装win7系统好还是win10的使用评价
- 仿超级课程表的课程界面设计
- 基于Hadoop部署实践对网站日志分析(大数据分析案例)
- Few-shot learning 少样本学习
- 指令 adb devices 输出多出设备“emulator-5554 device”
- PhysX 4.0 项目生成和编译
- MC-BE基岩版服务器搭建与日常维护
- 73、RecyclerView的横向滑动刷新和加载更多
- 【语言-C++】Excel “SYLK (符号链接) *.slk”或剪切板CF_SYLK格式解析
- 天载配资简述指数看维稳,轮动行情