CSS 篇
link 与 @import 的区别
-
link是HTML方式，@import是CSS方式 -
link最大限度支持并行下载，@import过多嵌套导致串行下载，出现 FOUC (文档样式短暂失效) -
link可以通过rel="alternate stylesheet"指定候选样式 - 浏览器对
link支持早于@import，可以使用@import对老浏览器隐藏样式 -
@import必须在样式规则之前，可以在css文件中引用其他文件 - 总体来说：
link优于@import，link优先级也更高
BFC 有什么用
- 创建规则：
- 根元素
- 浮动元素（
float不取值为none） - 绝对定位元素（
position取值为absolute或fixed） -
display取值为inline-block 、 table-cell 、 table-caption 、 flex 、inline-flex之一的元素 -
overflow不取值为visible的元素
- 作用
- 可以包含浮动元素
- 不被浮动元素覆盖
- 阻止父子元素的
margin折叠
清除浮动的几种方式
- 父级
div定义height - 结尾处加空
div标签clear:both - 父级
div定义伪类:after和zoom - 父级
div定义overflow:hidden - 父级
div也浮动，需要定义宽度 - 结尾处加
br标签clear:both
Css3 新增伪类 - 伪元素
-
p:first-of-type选择属于其父元素的首个元素的每个
元素。
-
p:last-of-type选择属于其父元素的最后元素的每个
元素。
-
p:only-of-type选择属于其父元素唯一的元素的每个
元素。
-
p:only-child选择属于其父元素的唯一子元素的每个元素。
-
p:nth-child(2)选择属于其父元素的第二个子元素的每个元素。
-
:enabled已启用的表单元素。 -
:disabled已禁用的表单元素。 -
:checked单选框或复选框被选中。 -
::before在元素之前添加内容。 -
::after在元素之后添加内容,也可以用来做清除浮动。 -
::first-line添加一行特殊样式到首行。 -
::first-letter添加一个特殊的样式到文本的首字母。 -
伪类语法一个：，它是为了弥补css常规类选择器的不足
-
伪元素语法两个：，它是凭空创建的一个虚拟容器生成的元素
IE盒子模型 、W3C盒子模型
- W3C盒模型： 内容(content)、填充( padding )、边界( margin )、 边框( border )；
box-sizing: content-box- width = content width;
- IE盒子模型： IE 的content 部分把 border 和 padding 计算了进去;
box-sizing: border-box- width = border + padding + content width
display:inline-block 什么时候不会显示间隙？
- 移除空格
- 使用
margin负值 - 使用
font-size:0 letter-spacingword-spacing
行内元素float:left后是否变为块级元素？
行内元素设置成浮动之后变得更加像是 inline-block （行内块级元素，设置 成这个属性的元素会同时拥有行内和块级的特性，最明显的不同是它的默认宽度不是 100% ），这时候给行内元素设置 padding-top 和 padding-bottom或者 width 、 height 都是有效果的
如果需要手动写动画，你认为最小时间间隔是多久，为什么？
多数显示器默认频率是 60Hz ，即 1 秒刷新 60 次，所以理论上最小间隔为 1/60*1000ms ＝ 16.7ms
stylus/sass/less区别
- 均具有“变量”、“混合”、“嵌套”、“继承”、“颜色混合”五大基本特性
-
Sass和LESS语法较为严谨，LESS要求一定要使用大括号“{}”，Sass和Stylus可以通过缩进表示层次与嵌套关系 -
Sass无全局变量的概念，LESS和Stylus有类似于其它语言的作用域概念 -
Sass是基于Ruby语言的，而LESS和Stylus可以基于NodeJS NPM下载相应库后进行编译；这也是为什么安装Sass的时候有时候会报错，需要安装python脚本
优点：就不用我多说了，谁用谁知道，真香。
rgba()和opacity的透明效果有什么不同？
-
rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度， - 而
rgba()只作用于元素的颜色或其背景色。（设置 rgba 透明的元素的子元素不会继承透明效果！）
水平居中的方法
- 元素为行内元素，设置父元素
text-align:center - 如果元素宽度固定，可以设置左右
margin 为 auto; - 如果元素为绝对定位，设置父元素
position 为 relative，元素设left:0;right:0;margin:auto; - 使用
flex-box布局，指定justify-content属性为center -
display设置为tabel-ceil
垂直居中的方法
- 将显示方式设置为表格，
display:table-cell,同时设置vertial-align：middle - 使用
flex布局，设置为align-item：center - 绝对定位中设置
bottom:0,top:0,并设置margin:auto - 绝对定位中固定高度时设置
top:50%，margin-top值为高度一半的负值 - 文本垂直居中设置
line-height为height值
浏览器 篇
浏览器内核的理解
- 主要分两个部分：
渲染引擎、js引擎 -
渲染引擎：负责取得网页的内容（html css img …），以及计算网页的显示方式，然后会输出至显示器或者打印机。浏览器的内核不同对于网页的语法解释也不同，所以渲染的效果也不一样 -
js引擎：解析和执行javascript 来实现网页的动态效果 - 最开始渲染引擎和js引擎并没有区分的很明确，后来js引擎越来越独立，内核就倾向于只值渲染引擎
-
IE : trident内核 -
Firefox ： gecko内核 -
Safari : webkit内核 -
Opera:以前是presto内核，Opera现已改用Google - Chrome的Blink内核 -
Chrome:Blink(基于webkit，Google与Opera Software共同开发)
HTTP 的请求方式场景
-
Get方法：获取数据通常(查看数据)-查看 -
POST方法：向服务器提交数据通常(创建数据)-create -
PUT方法：向服务器提交数据通常(更新数据)-update，与POST方法很像，也是提交数据，但PUT制定了资源在服务器上的位置，常用在修改数据 -
HEAD方法：只请求页面的首部信息 -
DELETE方法：删除服务器上的资源 -
OPTIONS方法：用于获取当前URL支持的请求方式 -
TRACE方法：用于激活一个远程的应用层请求消息回路 -
CONNECT方法：把请求链接转换到透明的TCP/IP的通道
HTTP状态码
-
1XX：信息状态码-
100 continue继续，一般在发送 post 请求时，已发送了 http header 之后服务端将返回此信息，表示确认，之后发送具体参数信息
-
-
2XX：成功状态码-
200 ok正常返回信息 -
201 created请求成功并且服务器创建了新资源 -
202 accepted服务器已经接收请求，但尚未处理
-
-
3XX：重定向-
301 move per请求的网页已经永久重定向 -
302 found临时重定向 -
303 see other临时冲重定向，且总是使用get请求新的url -
304 not modified自从上次请求后，请求的网页未修改过
-
-
4XX：客户端错误-
400 bad request服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求 -
401 unauthorized请求未授权 -
403 forbidden禁止访问
-
-
404 not found找不到如何与url匹配的资源 -
5XX：服务器错误-
500 internal server error最常见的服务器端的错误 -
503 service unacailable服务器端暂时无法处理请求（可能是过载活维护）
-
* `500 internal server error` 最常见的服务器端的错误
* `503 service unacailable` 服务器端暂时无法处理请求（可能是过载活维护）
[外链图片转存中…(img-VKx27cIt-1626850156644)]
**最后：**由于篇幅限制，需要校招面试题PDF文档（含答案解析）完整版，可以点击这里免费获取