浏览器

什么是Bom?

Bom是浏览器对象。
有哪些常用的Bom属性呢？

(1)location对象
location.href-- 返回或设置当前文档的URL
location.search -- 返回URL中的查询字符串部分。 location.hash -- 返回URL#后面的内容，如果没有#，返回空
location.host -- 返回URL中的域名部分，例如www.dreamdu.com
location.hostname -- 返回URL中的主域名部分，例如dreamdu.com
location.pathname -- 返回URL的域名后的部分。例如 www.dreamdu.com/xhtml/ 返回/xhtml/
location.port -- 返回URL中的端口部分。例如 www.dreamdu.com:8080/xhtml/ 返回8080
location.protocol -- 返回URL中的协议部分。例如 www.dreamdu.com:8080/xhtml/ 返回(//)前面的内容http:
location.assign -- 设置当前文档的URL
location.replace() -- 设置当前文档的URL，并且在history对象的地址列表中移除这个URL location.replace(url);
location.reload() -- 重载当前页面

(2)history对象 history.go() -- 前进或后退指定的页面数 history.go(num);
history.back() -- 后退一页
history.forward() -- 前进一页

(3)Navigator对象
navigator.userAgent -- 返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串) navigator.cookieEnabled -- 返回浏览器是否支持(启用)cookie

浏览器存储

Cookie，localStorage，sessionStorage 共同点：都是保存在浏览器端，并且是同源的。

Cookie：cookie数据始终在同源的http请求中携带，即cookie在浏览器和服务器间来回传递。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下,存储的大小只有4K左右。cookie在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭，cookie也是在所有同源窗口中都是共享的。

sessionStorage：仅在当前浏览器窗口关闭前有效，不会自动把数据发给服务器，仅在本地保存；不在不同的浏览器窗口中共享。

localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据，不会自动把数据发给服务器，仅在本地保存，在所有同源窗口中都是共享的。

cookie的作用：保存用户登录状态。跟踪用户行为。

Cookie和session

Cookie和session都可用来存储用户信息，cookie存放于客户端，session存放于服务器端

因为cookie存放于客户端有可能被窃取，所以cookie一般用来存放不敏感的信息，比如用户设置的网站主题，敏感的信息用session存储，比如用户的登陆信息，session可以存放于文件，数据库，内存中都可以，cookie可以服务器端响应的时候设置，也可以客户端通过JS设置cookie会在请求时在http首部发送给客户端，cookie一般在客户端有大小限制，一般为4K，

GET和POST的区别

get参数通过url传递，post放在request body中。
get请求在url中传递的参数是有长度限制的，而post没有。
get比post更不安全，因为参数直接暴露在url中，所以不能用来传递敏感信息。
get请求只能进行url编码，而post支持多种编码方式
get请求参数会被完整保留在浏览历史记录里，而post中的参数不会被保留。
GET和POST本质上是TCP链接，并无差别。但是由于HTTP的规定和浏览器/服务器的限制，导致他们在应用过程中体现出一些不同。
GET产生一个TCP数据包；POST产生两个TCP数据包。

什么是同源策略及限制

如果两个 URL 的协议、域名、端口，都相同的话，则这两个 URL 是同源。
限制从一个源加载的文档或脚本和来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的安全机制。
协议、域名、端口，如果有任何一个部分不同，则源不同，就是跨域了。
这个源的文档没有权利去操作另一个源的文档。这个限制体现在：（要记住）
Cookie、LocalStorage和IndexDB无法获取。
无法获取和操作DOM。
不能发送Ajax请求。Ajax只适合同源的通信。

跨域通信的几种方式

1、通过jsonp跨域
2、 document.domain + iframe跨域
3、跨域资源共享CORS
4、 location.hash + iframe
5、 window.name + iframe跨域
6、 postMessage跨域
7、 nginx代理跨域
8、 nodejs中间件代理跨域
9、 WebSocket协议跨域

jsonp跨域

动态添加一个<script>标签，而script标签的src属性是没有跨域的限制的.
它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况.

<script>
  var script = document.createElement('script');
  script.type = 'text/javascript';

  // src设置请求地址，传参一个回调函数名给后端，后端返回时执行回调函数
  script.src = 'http://www.baidu2.com:8080/login?user=admin&callback=handleCallback';
  document.head.appendChild(script);

  // 数据请求回来触发执行的回调函数
  function handleCallback(res) {
    consoole.log(res);
  }
 </script>

跨域资源共享（CORS）

跨域资源共享，是W3C的标准，使用自定义的HTTP头部允许浏览器和服务器相互了解，从而决定是否通信。目标：客户端（www.hao123.com）向不同域服务端（www.hao123456.com）请求数据。

步骤：

1）在客户端发起 ajax 请求。

$.ajax({      
        url: 'www.hao123456.com/user',
        data:{id:'1001'},
        type:'POST',     
        contentType: "application/json;charset=utf-8",
        success: function(data){
                //处理data数据
        }
});

2）服务端设置HTTP请求头如下

response.addHeader("Access-Control-Allow-Origin", "https://www.hao123.com");//请求域地址，可设置*
response.addHeader("Access-Control-Allow-Methods", "POST");//请求方式
response.addHeader("Access-Control-Allow-Credentials", true);//是否允许发送Cookie，如果不允许，去掉这一行即可
response.addHeader("Access-Control-Allow-Headers", "Content-Type");//请求头设置
response.addHeader("Access-Control-Max-Age", "3600");//过期时间1分钟

发送 Ajax 请求的五个步骤（XMLHttpRequest的工作原理）

（1）创建XMLHttpRequest 对象。
（2）使用open方法设置请求的参数。open(method, url, 是否异步)。
（3）发送请求。
（4）注册事件。注册onreadystatechange事件，状态改变时就会调用。
（5）获取返回的数据，更新UI。

描述一下XSS和CRSF攻击？防御方法？

XSS, 即为（Cross Site Scripting）, 中文名为跨站脚本, 是发生在目标用户的浏览器层面上的，当渲染DOM树的过程成发生了不在预期内执行的JS代码时，就发生了XSS攻击。大多数XSS攻击的主要方式是嵌入一段远程或者第三方域上的JS代码。实际上是在目标网站的作用域下执行了这段js代码。

CSRF（Cross Site Request Forgery，跨站请求伪造），字面理解意思就是在别的站点伪造了一个请求。专业术语来说就是在受害者访问一个网站时，其 Cookie 还没有过期的情况下，攻击者伪造一个链接地址发送受害者并欺骗让其点击，从而形成 CSRF 攻击。

XSS防御的总体思路是：对输入(和URL参数)进行过滤，对输出进行编码。也就是对提交的所有内容进行过滤，对url中的参数进行过滤，过滤掉会导致脚本执行的相关内容；然后对动态输出到页面的内容进行html编码，使脚本无法在浏览器中执行。虽然对输入过滤可以被绕过，但是也还是会拦截很大一部分的XSS攻击。

防御CSRF 攻击主要有三种策略：验证 HTTP Referer 字段；在请求地址中添加 token 并验证；在 HTTP 头中自定义属性并验证。

浏览器缓存机制

缓存分为两种：强缓存和协商缓存，根据响应的header内容来决定。

1）浏览器在加载资源时，先根据这个资源的一些http header判断它是否命中强缓存，强缓存如果命中，浏览器直接从自己的缓存中读取资源，不会发请求到服务器。比如某个css文件，如果浏览器在加载它所在的网页时，这个css文件的缓存配置命中了强缓存，浏览器就直接从缓存中加载这个css，连请求都不会发送到网页所在服务器；

2）当强缓存没有命中的时候，浏览器一定会发送一个请求到服务器，通过服务器端依据资源的另外一些http header验证这个资源是否命中协商缓存，如果协商缓存命中，服务器会将这个请求返回，但是不会返回这个资源的数据，而是告诉客户端可以直接从缓存中加载这个资源，于是浏览器就又会从自己的缓存中去加载这个资源；

3）强缓存与协商缓存的共同点是：如果命中，都是从客户端缓存中加载资源，而不是从服务器加载资源数据；区别是：强缓存不发请求到服务器，协商缓存会发请求到服务器。

4）当协商缓存也没有命中的时候，浏览器直接从服务器加载资源数据。

http

HTTP 请求的组成

状态行、请求头、消息主体三部分组成。
HTTP 响应的组成状态行、响应头、响应正文

http和https

(1)http和https的基本概念
http: 超文本传输协议，是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（TCP），用于从WWW服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少。
https: 是以安全为目标的HTTP通道，简单讲是HTTP的安全版，即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。

https协议的主要作用是：建立一个信息安全通道，来确保数组的传输，确保网站的真实性。

(2)http和https的区别？
http传输的数据都是未加密的，也就是明文的，网景公司设置了SSL协议来对http协议传输的数据进行加密处理，简单来说https协议是由http和ssl协议构建的可进行加密传输和身份认证的网络协议，比http协议的安全性更高。

主要的区别如下：
Https协议需要ca证书，费用较高。
http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。
http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

(3)https协议的工作原理
客户使用https url访问服务器，则要求web 服务器建立ssl链接。
web服务器接收到客户端的请求之后，会将网站的证书（证书中包含了公钥），返回或者说传输给客户端。
客户端和web服务器端开始协商SSL链接的安全等级，也就是加密等级。
客户端浏览器通过双方协商一致的安全等级，建立会话密钥，然后通过网站的公钥来加密会话密钥，并传送给网站
web服务器通过自己的私钥解密出会话密钥。
web服务器通过会话密钥加密与客户端之间的通信。

输入url后发生什么

DNS解析URL对应的IP。将域名解析为ip地址，解析过程从浏览器缓存、系统缓存、路由器缓存、服务器缓存去查询。
根据IP建立TCP连接。通过三次握手去建立正确的连接，三次握手是为了确保客户端和服务端都能够正确的接受和发送请求。
HTTP发起请求。完整的HTTP请求包含请求起始行、请求头部、请求主体三部分。
服务器处理请求，浏览器接收HTTP响应。以HTTP的Response对象返回，主要包括状态码，响应头，响应报文三个部分。响应头主要由Cache-Control、 Connection、Date、Pragma等组成。响应体为服务器返回给浏览器的信息，主要由HTML，css，js，图片文件组成。
渲染页面，构建DOM树。
关闭TCP连接（四次挥手）。通过四次挥手来断开连接。
http的连接都是一次性的。

三次握手

第一次握手：建立连接时，客户端发送syn包（seq=x）到服务器，并进入SYN_SENT状态，等待服务器确认；第二次握手：服务器收到syn包，必须确认客户的SYN（ack=x+1），同时自己也发送一个SYN包（seq=y），即SYN+ACK包，此时服务器进入SYN_RECV状态；第三次握手：客户端收到服务器的SYN+ACK包，向服务器发送确认包ACK(ack=y+1），此包发送完毕，客户端和服务器进入ESTABLISHED（TCP连接成功）状态，完成三次握手。

四次挥手

第一次挥手是浏览器发完数据后，发送FIN请求断开连接。
第二次挥手是服务器发送ACK表示同意，
第三次挥手是服务器发完响应数据后，发送FIN请求断开连接。
第四次挥手是浏览器返回ACK表示同意。

渲染过程

遇见HTML标记，浏览器调用HTML解析器解析成Token并构建成don刺树
遇见style/link标记，浏览器调用css解析器，处理css标记并构建cssom树
遇到script标记，调用javascript解析器，处理script代码（绑定事件，修改dom树/ cssom树)-将dom树和cssom树合并成一个渲染树
根据渲染树来计算布局，计算每个节点的几何信息.(布局)-将各个节点颜色绘制到屏幕上（渲染)

这个五个步骤不一定按照顺序执行，如果dom树或cssom树被修改了，可能会执行多次布局和渲染往往实际页面中，这些步骤都会执行多次的。

js过大造成阻塞导致白屏怎么解决

浏览器在解析过程中，当文档加载过程中遇到JS文件，HTML文档会挂起渲染过程，不仅要等到文档中JS文件加载完毕还要等待解析执行完毕，才会继续HTML的渲染过程。因为JS有可能修改DOM结构，这就意味着JS执行完成前，后续所有资源的下载是没有必要的，这就是JS阻塞后续资源下载的根本原因。
CSS文件的加载不影响JS文件的加载，但是却影响JS文件的执行。JS代码执行前浏览器必须保证CSS文件已经下载并加载完毕。

优化 JavaScript

当浏览器遇到 script 标记时,会阻止解析器继续操作,直到 CSSOM 构建完毕,JavaScript 才会运行并继续完成 DOM 构建过程。
async: 当我们在 script 标记添加 async 属性以后,浏览器遇到这个 script 标记时会继续解析 DOM,同时脚本也不会被 CSSOM 阻止,即不会阻止 CRP。
defer: 与 async 的区别在于,脚本需要等到文档解析后（ DOMContentLoaded 事件前）执行,而 async 允许脚本在文档解析时位于后台运行（两者下载的过程不会阻塞 DOM,但执行会）。
当我们的脚本不会修改 DOM 或 CSSOM 时,推荐使用 async 。
预加载 —— preload & prefetch 。
DNS 预解析 —— dns-prefetch 。

url

URL一般包括几大部分：
protocol，协议头，譬如有http，加密的https，ftp等
host，主机域名或IP地址
port，端口号
path，目录路径
query，即查询参数
fragment，即#后的hash值，一般用来定位到某个位置

状态码

状态码主要包括以下部分
1xx：指示信息–表示请求已接收，继续处理。
2xx：成功–表示请求已被成功接收、理解、接受。
3xx：重定向–要完成请求必须进行更进一步的操作。
4xx：客户端错误–请求有语法错误或请求无法实现。
5xx：服务器端错误–服务器未能实现合法的请求。

200 请求成功
204 无内容。服务器成功处理，但未返回内容。在未更新网页的情况下，可确保浏览器继续显示当前文档
301 永久移动。请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI
302 临时移动。资源只是临时被移动。客户端应继续使用原有URI
304 未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。 401 请求要求用户的身份认证
402 保留，将来使用
403 服务器理解请求客户端的请求，但是拒绝执行此请求
404 服务器无法根据客户端的请求找到资源（网页）。 500 服务器内部错误，无法完成请求
503 由于超载或系统维护，服务器暂时的无法处理客户端的请求。

TCP和UDP的区别

TCP是面向连接的，udp是无连接的即发送数据前不需要先建立链接。
TCP提供可靠的服务。也就是说，通过TCP连接传送的数据，无差错，不丢失，不重复，且按序到达;UDP尽最大努力交付，即不保证可靠交付。并且因为tcp可靠，面向连接，不会丢失数据因此适合大数据量的交换。
TCP是面向字节流，UDP面向报文，并且网络出现拥塞不会使得发送速率降低（因此会出现丢包，对实时的应用比如IP电话和视频会议等）
TCP只能是1对1的，UDP支持1对1,1对多。
TCP的首部较大为20字节，而UDP只有8字节。
TCP是面向连接的可靠性传输，而UDP是不可靠的。

HTML

html5的新特性

语义化标签：header，footer，nav,aside,section
增强型表单；为input增加了color，emial,data ,range等类型
网页媒体特性，视频和音频audio和vedio
Canvas绘图 SVG绘图
地理定位：getCurrentPosition()方法来获取用户的位置
拖放API
WebWorker：Web Worker可以通过加载一个脚本文件，进而创建一个独立工作的线程，在主线程之外运行
本地存储特性：WebStorage
WebSocket：WebSocket协议为web应用程序客户端和服务端之间提供了一种全双工通信机制。

html5的拖拽行为 HTML5 drag api

dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发。
darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。
dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。
dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。
dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。
drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。
dragend：事件主体是被拖放元素，在整个拖放操作结束时触发。

对HTML语义化标签的理解

HTML5语义化标签是指正确的标签包含了正确的内容，结构良好，便于阅读，比如nav表示导航条，类似的还有article、header、footer等等标签。

css

css3新特性

CSS3边框如border-radius，box-shadow等；CSS3背景如background-size，background-origin等；CSS3 2D，3D转换如transform等；CSS3动画如animation等。

css盒模型

CSS的盒模型包括IE怪异盒模型和W3C标准盒模型。盒模型包含content+padding+border+margin。其中怪异盒模型的width=content+padding+border；标准盒模型的width=content

position

position有四个属性值
static 默认值。没有定位，元素出现在正常的文档流中（忽略 top, bottom, left, right 或者 z-index 声明）。
relative 生成相对定位的元素，相对于其正常位置进行定位。
absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。
sticky 粘性定位，该定位基于用户滚动的位置。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

relative，absolute，fixed元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

清除浮动

使用带clear属性的空元素在浮动元素后使用一个空元素如<div class="clear"></div>，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。
使用CSS的overflow属性给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动， IE6 为父元素设置容器宽高或设置 zoom:1. 在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。
给浮动的元素的容器添加浮动给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用。
使用CSS的:after伪元素
结合:after 伪元素。给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。

z-index的定位方法

z-index属性设置元素的堆叠顺序，拥有更高堆叠顺序的元素会处于较低顺序元素之前，z-index可以为负，且z-index只能在定位元素上奏效，该属性设置一个定位元素沿z轴的位置，如果为正数，离用户越近，为负数，离用户越远，

flex

Flex意为"弹性布局"，用来为盒状模型提供最大的灵活性。
分为容器属性和元素属性容器的属性：

flex-direction：//决定主轴的方向（即子item的排列方法）
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
flex-wrap：//决定换行规则
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
flex-flow：//flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
justify-content：//主轴对齐方式
align-items：//侧轴对齐方式
项目的属性（元素的属性）：
order属性：定义项目的排列顺序，顺序越小，排列越靠前，默认为0
flex-grow属性：定义项目的放大比例，即使存在空间，也不会放大
flex-shrink属性：定义了项目的缩小比例，当空间不足的情况下会等比例的缩小，如果定义个item的flow-shrink为0，则为不缩小
flex-basis属性：定义了在分配多余的空间前，项目占据的空间。
flex：是flex-grow和flex-shrink、flex-basis的简写，默认值为0 1 auto。
align-self：允许单个项目与其他项目不一样的对齐方式，可以覆盖align-items，默认属性为auto，表示继承父元素的align-items

怎么样让一个元素消失

opacity：0，该元素隐藏起来了，但不会改变页面布局，会触发该元素已经绑定的事件
visibility：hidden，该元素隐藏起来了，但不会改变页面布局，不会触发该元素已经绑定的事件
display：none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉。

img中alt和title的区别

图片中的 alt属性是在图片不能正常显示时出现的文本提示。图片中的 title属性是在鼠标在移动到元素上的文本提示。

link 和@import 的区别是？

link属于HTML标签，而@import是CSS提供的页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载
import只在IE5以上才能识别，而link是HTML标签，无兼容问题
link方式的样式的权重高于@import的权重.

display

block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。block元素可以设置margin和padding属性。

inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。inline元素设置width,height属性无效。inline元素的margin和padding属性，水平方向的padding，margin都产生边距效果；但竖直方向的padding，margin不会产生边距效果。

inline-block：简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。

css布局

六种布局方式总结：圣杯布局、双飞翼布局、Flex布局、绝对定位布局、表格布局、网格布局。
圣杯布局是指布局从上到下分为header、container、footer，然后container部分定为三栏布局。这种布局方式同样分为header、container、footer。圣杯布局的缺陷在于 center 是在 container 的padding中的，因此宽度小的时候会出现混乱。
双飞翼布局给center 部分包裹了一个 main 通过设置margin主动地把页面撑开。
Flex布局是由CSS3提供的一种方便的布局方式。
绝对定位布局是给container 设置position: relative和overflow: hidden，因为绝对定位的元素的参照物为第一个postion不为static的祖先元素。 left 向左浮动，right 向右浮动。center 使用绝对定位，通过设置left和right并把两边撑开。 center 设置top: 0和bottom: 0使其高度撑开。
表格布局的好处是能使三栏的高度统一。
网格布局可能是最强大的布局方式了，使用起来极其方便，但目前而言，兼容性并不好。网格布局，可以将页面分割成多个区域，或者用来定义内部元素的大小，位置，图层关系。

CSS画正方体，三角形

三角形
通过一个块级元素的宽和高设置为0px，给其中一个方向的pading设置颜色，其他三个方向的颜色为透明。pading设置的大小就是三角形的高。

#div2{
width: 0;
height: 0;
border-top: 50px solid blue;
border-right: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid transparent;
}

正方形
宽度设置为20%，先把高度设置为0，随后设置padding-top或者padding-bottom为同样的百分比，就可以实现一个正方形的样式。

了解重绘和重排吗，知道怎么去减少重绘和重排吗，让文档脱离文档流有哪些方法

DOM的变化影响到了元素的几何属性比如宽高，浏览器重新计算元素的几何属性，其他元素的几何属性也会受到影响，浏览器需要重新构造渲染树，这个过程称之为重排，浏览器将受到影响的部分重新绘制在屏幕上的过程称为重绘，引起重排重绘的原因有：添加或者删除可见的DOM元素，元素尺寸位置的改变
浏览器页面初始化，
浏览器窗口大小发生改变，重排一定导致重绘，重绘不一定导致重排，
减少重绘重排的方法有
不在布局信息改变时做DOM查询，
使用csstext,className一次性改变属性
使用fragment
对于多次重排的元素，比如说动画。使用绝对定位脱离文档流，使其不影响其他元素

用css实现一个硬币旋转的效果

设置一个元素的背景颜色，背景颜色会填充哪些区域？

background-color设置的背景颜色会填充元素的content、padding、border区域，

如何实现图片在某个容器中居中的？

父元素固定宽高，子元素设置position: absolute，margin：auto平均分配margin
css3属性transform。子元素设置position: absolute; left: 50%; top: 50%;transform: translate(-50%,-50%)
将父元素设置成display: table, 子元素设置为单元格 display: table-cell。
弹性布局display: flex。设置align-items: center; justify-content: center

如何实现元素的垂直居中

1：父元素display:flex,align-items:center;
2：元素绝对定位，top:50%，margin-top：-（高度/2）
3：高度不确定用transform：translateY（-50%）
4：父元素table布局，子元素设置vertical-align:center;

双边距重叠问题（外边距折叠）

多个相邻（兄弟或者父子关系）普通流的块元素垂直方向marigin会重叠
折叠的结果为：
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。

画一条0.5px的线

采用meta viewport的方式
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
采用border-image的方式采用transform: scale()的方式

三列布局，两列定宽一列自适应，以及两侧定宽中间自适应

1.圣杯布局
特点比较特殊的三栏布局，同样也是两边固定宽度，中间自适应，唯一区别是dom结构必须是先写中间列部分，这样实现中间列可以优先加载。
2. 双飞翼布局

利用左右浮动

<div class="box">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="center">center</div>
</div>   
<style>
   .box{
        height:200px;
    }    
    .left{
        float:left;
        width:300px;
    }
    .right{
        float:right;
        width:300px;
    }
</style>

利用绝对定位

<div class="box">
    <div class="left">left</div>
    <div class="right">right</div>
     <div class="center">center</div>
</div> 
//和浮动布局同理，先渲染左右元素，使其定位在父元素的左右两端，剩余的中间元素占满父元素剩余宽度。
<style>
    .box{
        position: relative;
      }
      .left{
        position: absolute;
        width: 100px;
        left: 0;
      }
      .right{
        width:100px;
        position: absolute;
        right: 0;
      }
      .center{
        margin: 0 100px;
        background: red;
      }
</style>

利用弹性布局父元素设置flex属性，左边设置固定的宽度，右边设置固定的宽度，中间设置flex：1.

<div class="box">
  <div class="left"> left </div>
  <div class="center"> center </div>
  <div class="right">right </div>
</div>
<style>
    .box{
        display: flex;
        width: 100%;
      }
  .left{
        width: 100px;
        left: 0;
      }
  .right{
        width:100px;
      }
  .center{
        flex:1;
      }
</style>

表格布局将父元素display:table，子元素display:table-cell，会将它变为行内块。

<div class="box">
  <div class="left"> left </div>
  <div class="center"> center </div>
  <div class="right">right </div>
</div>
<style>
    .box{
        display: table;
        width: 100%;
      }
      .left{
        display: table-cell;
        width: 100px;
        left: 0;
      }
      .right{
        width:100px;
        display: table-cell;
      }
      .center{
        width: 100%;
        background: red;
      }
</style>

css选择器

id选择器 #myid 类选择器 .myclassname 标签选择器 div,h1,p 相邻选择器 h1+p 子选择器 ul > li 后代选择器 li a 通配符选择器 * 属性选择器 a[rel="external"]

伪类和伪元素

伪类选择器 E:first-child 匹配父元素的第一个子元素
E:link 匹配所有未被点击的链接
E:visited 匹配所有已被点击的链接
E:active 匹配鼠标已经其上按下、还没有释放的E元素
E:hover 匹配鼠标悬停其上的E元素
E:focus 匹配获得当前焦点的E元素
E:lang(c) 匹配lang属性等于c的E元素
伪元素原则器 E:first-line 匹配E元素的第一行
E:first-letter 匹配E元素的第一个字母
E:before 在E元素之前插入生成的内容
E:after 在E元素之后插入生成的内容

rem

rem：
rem为元素设定字体大小时，相对的只是HTML根元素。

em：
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

vh/vw
视口的高度=100vh，视口的宽度=100vw。

%
百分比更适用于宽度，不适用于高度。

media 多媒体查询

媒体查询media
使用 @media 查询，可以针对不同的屏幕尺寸设置不同的样式。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。针对不同的媒体类型定义不同的样式

@media screen and (max-width:767px){...}；
@media screen and (min-width: 768px) and (max-width: 1024px){...}；

移动端rem适配

//1.获取html的宽
let htmlwidth=document.documentElement.clientWidth || document.body.clientWidth;  
//2.获取htmlDom元素
let htmlDom=document.getElementByTagName('html')[0];
//3.设置html样式 1rem=屏幕的宽度
htmlDom.style.fontSize=htmlwith+'px';

面试题总结

浏览器