可以设置宽高属性，这种就称为行内块元素。
懒加载和预加载？
预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。
懒加载：懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。
1.第一种是纯粹的延迟加载，使用setTimeOut或setInterval进行加载延迟.
2.第二种是条件加载，符合某些条件，或触发了某些事件才开始异步下载。
3.第三种是可视区加载，即仅加载用户可以看到的区域，这个主要由监控滚动条来实现，一般会在距用户看到某图片前一定距离遍开始加载，这样能保证用户拉下时正好能看到图片。
两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。
懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。
常见的网络攻击方式有哪些？什么是xss攻击？什么是csrf攻击？
Xss(cross-site scripting) 攻击：全称跨站脚本攻击，攻击者在web页面中会插入一些恶意的script代码。当用户浏览该页面的时候，那么嵌入到web页面中script代码会执行，因此会达到恶意攻击用户的目的。
CSRF (Cross Site Request Forgery)，跨站请求伪造，攻击者借助用户的 Cookie 骗取服务器的信任，以用户名义伪造请求发送给服务器。如：在请求的 url 后加入一些恶意的参数。
防范CSRF：添加 token 验证：在 HTTP 请求中以参数的形式加入一个随机产生的 token，并在服务器端建立一个拦截器来验证这个 token，若请求无 token 或者 token 不正确，则认为可能是 CSRF 攻击而拒绝该请求。
同源策略，什么是跨域？为什么浏览器要使用同源策略？跨域的几种解决方案？了解预检请求吗？
同源策略: 协议/主机/端口
我们来看下面的页面是否与 http://store.company.com/dir/index.html 是同源的？
http://store.company.com/dir/index2.html 同源
http://store.company.com/dir2/index3.html 同源 虽然在不同文件夹下
https://store.company.com/secure.html 不同源 不同的协议(https)
http://store.company.com:81/dir/index.html 不同源 不同的端口(81)
http://news.company.com/dir/other.html 不同源 不同的主机(news)
浏览器使用同源策略主要是为了安全，比如：如果没有同源限制存在浏览器中的cookie等其他数据可以任意读取。防止 XSS、CSFR 等攻击。
跨域是指一个域下的文档或脚本试图去请求另一个域下的资源。跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。
解决方案：
（1）jsonp：ajax受同源影响，利用JS中src属性连接访问跨域JS。不安全可能会遭受 XSS 攻击。只能get，不安全、有缓存、大小限制。
（2）CORS:服务端设置。
（3）nginx 反向代理：搭建一个中转 nginx 服务器，用于转发请求。
（4）webpack添加proxy
（5）location.hash:a与b跨域，通过中间页c，不同域：location.hash传值。不同域：js。
预检请求: 需预检的请求要求必须首先使用 OPTIONS 方法发起一个预检请求到服务器，以获知服务器是否允许该实际请求。"预检请求“的使用，可以避免跨域请求对服务器的用户数据产生未预期的影响。
了解CDN么？为什么要用CDN？CDN的核心是什么？
（和西天取经一个道理，唐僧取经之前，国内想看经书只能跑老远去西天看经书，唐僧取经回来，再去国内各地传播，之后各地的人想听佛法就去最近的寺庙听就好了）
CDN ：内容分发网络
CDN的核心点有两个，一个是缓存，一个是回源。
静态资源本身具有访问频率高、承接流量大的特点，因此静态资源加载速度始终是前端性能的一个非常关键的指标。
CDN 是静态资源提速的重要手段，在许多一线的互联网公司，“静态资源走 CDN”并不是一个建议，而是一个规定
dns 域名解析
DNS 主要的作用就是将人们所熟悉的网址 (域名) “翻译”成电脑可以理解的 IP 地址，这个过程叫做 DNS 域名解析，一个域名往往对应多个DNS地址。
DNS的规范规定了2种类型的DNS服务器，一个叫主DNS服务器，一个叫辅助DNS服务器。在一个区中主DNS服务器从自己本机的数据文件中读取该区的DNS数据信息，而辅助DNS服务器则从区的主DNS服务器中读取该区的DNS数据信息。当一个辅助DNS服务器启动时，它需要与主DNS服务器通信，并加载数据信息，这就叫做区域传送（zone transfer）。 这种情况下，使用TCP协议。
为什么域名解析用UDP协议?
因为UDP快啊！UDP的DNS协议只要一个请求、一个应答就好了。而使用基于TCP的DNS协议要三次握手、发送数据以及应答、四次挥手。但是UDP协议传输内容不能超过512字节。不过客户端向DNS服务器查询域名，一般返回的内容都不超过512字节，用UDP传输即可。
为什么区域传送用TCP协议？
因为TCP协议可靠性好啊！你要从主DNS上复制内容啊，你用不可靠的UDP？ 因为TCP协议传输的内容大啊，你用最大只能传512字节的UDP协议？万一同步的数据大于512字节，你怎么办？
osi七层模型
物理层：
作用：通过媒介输出比特（bit）
协议：RJ45、CLOCK、IEEE802.3
设备：中继器、集线器
数据链路层：
作用：将比特组装成帧（Frame）和点对点传递
协议：PPP FR HDLC VLAN MAC
设备：网桥、交换机
数据链路层在概念上分为两个子层：逻辑链路控制子层（LLC）和媒体访问控制子层（MAC）。数据链路层负责分配MAC地址，或称为物理地址，由48比特长，12个16进制数字组成，0~23位。是厂商向IETF等机构申请用来标识厂商的代码。
网络层：
作用：负责数据包从源到宿的传递和网际交互
协议：IP IPX ICMP IGMP ARP RARP OSPF
设备：网络层中继系统：路由器，网络层以上的中继系统：网关
传输层：
作用：提供端到端的可靠报文传递和错误恢复
协议：
TCP (传输控制协议：面向连接的，数据传输的单位是报文段，提供可靠的交付)，
UDP（用户控制协议：它是无连接的，数据传输的单位是用户数据报，它不能保证提供可靠的交付）
SCTP (流控制传输协议 Stream Control Transmission Protocol )
会话层：
作用：建立管理和终止会话（会话协议的数据单元SPDU）
协议：NFS SQL NETBIOS RPC
表示层：
作用：数据翻译、解密和压缩（表示协议数据单元PPDU）
协议：JPEG MPEG ASII
应用层：
作用：允许访问OSI环境的手段（应用协议数据单元APDU）
协议：FTP（文件传输协议）、DNS（域名解析协议）、Telnet（虚拟终端协议）、SMTP（电子邮件协议）、HTTP（超文本传输协议）、www、NFS
常用端口号
端口号小于256的一般为常用端口号
HTTP协议代理服务器常用端口号：80/8080/3128/8081/9098
FTP（文件传输）协议代理服务器常用端口号：21
TOMCAT，默认端口号为8080
Oracle 数据库，默认的端口号为1521
（2）css篇
link和@import的区别
@import是 CSS 提供的语法规则，只有导入样式表的作用；
link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等
盒模型
w3c：宽度=内容的宽度（content）+ border + padding + margin
IE： 宽度=内容宽度（content+border+padding）+ margin
display:none，visibility:hidden和opcatity:0的区别
display:none隐藏后不占据额外空间，它会产生回流和重绘，而visibility:hidden和opacity:0元素虽然隐藏了，但它们仍然占据着空间，它们俩只会引起页面重绘。
display:none不会被子元素继承，但是父元素都不在了，子元素自然也就不会显示了，皮之不存，毛之安附~~
visibility:hidden 会被子元素继承，可以通过设置子元素visibility:visible 使子元素显示出来
opacity: 0 也会被子元素继承，但是不能通过设置子元素opacity: 0使其重新显
BFC相关
BFC就是让元素成为一个个独立的块，他们之间互不影响。 （bfc是块级格式上下文，它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。）通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。
影响：
同一个BFC下外边距会发生重叠：在网页制作过程中由于浏览器加载是自上而下的原因，外边距上下会取最大值，左右不受影响。
解决：此处用个div给包住，只通过一行代码(给外层的div 添加属性position:absolute) ps:inherit除外
margin塌陷
第一种情况：两个同级元素，垂直排列，上面的盒子给margin-bottom，下面的盒子给margin-top，那么他们两个的间距会重叠，以大的那个计算。
解决这种情况的方法为：(1)两个外边距不同时出现.(2)用个div给包住，给外层的div 添加属性position:absolute
第二种情况：两个父子元素，内部的盒子给margin-top，其父级也会受到影响，同时产生上边距，父子元素会进行粘连。
解决这种情况的方法为：父级添加一个css属性，overflow: hidden，禁止超出，外边距重叠就是margin-collapse。
解决方案：
1、为父盒子设置border，为外层添加border后父子盒子就不是真正意义上的贴合(可以设置成透明：border：1px solid ansparent);
2、为父盒子添加overflow: hidden;
3、为父盒子设定padding值;
4、为父盒子添加position: fixed;
5、为父盒子添加 display: table;
6、利用伪元素给父元素的前面添加一个空元素。
清除浮动
清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题
当父元素不给高度的时候，内部元素不浮动时会撑开，而浮动的时候，父元素变成一条线。
解决方法：
（1）使用after伪元素清除浮动（推荐使用）
.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
（2）使用before和after双伪元素清除浮动。
（3）父级添加overflow属性（父元素添加overflow:hidden）（不推荐）
（4）额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐）
选择器优先级
在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
作为style属性写在元素内的样式
id选择器
类选择器
标签选择器
通配符选择器
浏览器自定义或继承
!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性。同一级别中后写的会覆盖先写的样式
absolute定位是基于什么的
相对定位（relative）：
相对定位的块状元素相对于原来位置移动，移动后仍然占据文档流的位置，不影响其他元素的布局
绝对定位（absolute）：
被绝对定位的对象将从文档流中脱离，绝对定位的参照位置看它的上级或上上级有没有定位了，如果父级没有设置定位属性，则会相对于html根元素进行定位，
水平垂直居中
水平居中：
(1)text-align：center
(2)flex
垂直居中：
(1)flex
css做圆形，三角形
媒介查询相关的自适应布局
px，em，rem
px像素
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
em是CSS3新增的一个相对单位（root em，根em），使用rem为元素设定字体大小时，相对的是HTML根元素。可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
重排(回流/reflow)和重绘(repaint或redraw)？该怎么优化？怎么减少回流？
重排必重绘！！！
重排(回流/reflow)：对DOM树进行渲染，只要DOM树上的属性改变了浏览器布局，就会触发reflow，reflow的时候，浏览器会使被改变的那部分DOM树失效，并重新构造这部分。
重绘(repaint)：当渲染树中的一些元素需要更新，但更新的属性不会改变浏览器布局（位置）的操作，直接可以为该元素绘制新的样式，跳过了回流环节，这个过程就叫重绘。
如何减少回流、重绘？
减少回流、重绘就是减少对DOM的操作
1.IE中避免使用javascript表达式
2.如果动态改变样式，直接改变className，
3. 使用 transform 替代 top，实现动画性能更好，因为使用transform页面没有回流了.
4.让要操作的元素进行“离线处理”，处理完后一起更新
当使用DocumentFragment进行缓存操作，引发一次回流和重绘
使用display:none 技术，只引发两次回流和重绘
使用cloneNode(true or false)和replaceChild技术，引发一次回流和重绘
5.不要经常访问会引起浏览器flush队列的属性，如果你确实要访问，利用缓存
6.让元素脱离动画流，减少render 树的规模
7.牺牲平滑度换取速度
8.避免使用table布局
动画相关
CSS3 中有三个关于动画的样式属性transform、transition和animation
（1）transform
transform可以用来设置元素的形状改变。
主要有以下几种变形：rotate（旋转）、scale（缩放）、skew（扭曲）、translate（移动）和matrix（矩阵变形）。
（2）transition
transition是用来设置样式的属性值是如何从从一种状态变平滑过渡到另外一种状态，它有四个属性：
transition-property（变换的属性，即那种形式的变换：大小、位置、扭曲等）；
transition-duration（变换延续的时间）；
transition-timing-function（变换的速率）
transition-delay（变换的延时）
（3）animation
animation比较类似于 flash 中的逐帧动画，逐帧动画就像电影的播放一样，表现非常细腻并且有非常大的灵活性。然而transition只是指定了开始和结束态，整个动画的过程也是由特定的函数控制。学习过 flash 的同学知道，这种逐帧动画是由关键帧组成，很多个关键帧连续的播放就组成了动画，在 CSS3 中是由属性keyframes来完成逐帧动画的。
animationName：动画名称，开发人员自己命名；
percentage：为百分比值，可以添加多个百分比值；
properties：样式属性名称，例如：color、left、width等等。
高性能动画是什么？衡量它的标准是什么？
动画帧率可以作为衡量标准，一般来说画面在 60fps 的帧率下效果比较好。
flex布局
flex-direction: row || column;
justify-content: 控制 `flex` 项在主轴上的位置。
center
flex-start
flex-end
space-around(沿着主轴均匀地分布,两端留下空间。)
space-between(沿着主轴均匀地分布,两端不留空间。)
align-items:控制 flex 项在交叉轴上的位置。
center
flex-start
flex-end
精灵图
所谓精灵图就是把很多的小图片合并到一张较大的图片里，所以在首次加载页面的时候，就不用加载过多的小图片，只需要加载出来将小图片合并起来的那一张大图片也就是精灵图即可，这样在一定程度上减少了页面的加载速度，也一定程度上缓解了服务器的压力。例如王者荣耀页面里的几个小logo。
其实说白了就是将精灵图设为一个大背景，然后通过background-position来移动背景图，从而显示出我们想要显示出来的部分。
精灵图虽然实现了缓解服务器压力以及用户体验等问题，但还是有一个很大的不足，那就是牵一发而动全身。这些图片的背景都是我们详细测量而得出来的，如果需要改动页面，将会是很麻烦的一项工作。。。
伪类和伪元素
用于向某些选择器添加特殊的效果。
伪类：通过选择器找到那些不存在于DOM树中的信息以及不能被常规CSS选择器获取到的信息。
伪元素：：创建了一些抽象元素，这些抽象元素是不存在于文档语言里的（可以理解为html源码）。（比如常见的::before,::after）。
（3）js篇
script放在head会造成什么问题？如何解决？
但是放到head中没有任何效果。原因是因为文档还没加载，就读了js，js就不起作用了
想在head里用的话，利用 window.onload = function(){} 代码包裹，文档加载之后再执行，建议把js代码放到body的最底部，因为浏览器生成Dom树的时候是一行一行读HTML代码的，script标签放在最后面就不会影响前面的页面的渲染。
代码：window.onload() //在网页加载完毕后立刻执行的操作
script 引入方式
|