笔试题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; i5、利用 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>Documenttitle>
<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>Documenttitle>
<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>Documenttitle>
<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>Documenttitle>
<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>Documenttitle>
<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>Documenttitle>
<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 { //![]()
的容器设置如下
display:table-cell;
text-align:center;
vertical-align:middle;
}
如何实现双飞翼（圣杯）布局
1、利用定位实现两侧固定中间自适应
1.1）父盒子设置左右 padding 值
1.2）给左右盒子的 width 设置父盒子的 padding 值,然后分别定位到 padding 处.
1.3）中间盒子自适应
具体 CSS 代码
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 ;
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;
html 结构
<div class="father">
<div class="left">div>
<div class="right">div>
<div class="center">div>
div>