1、CSS3新增属性
CSS3边框:border-radius box-shadow boder-image
background-size text-shadow word-wrap
transform的一系列转换 css过渡 box-sizing
2、css动画
transition过渡 必须要有事件来触发 只能一次 需要多次 则需要多次触发 具有中间点的属性才行
animation是升级版 与keyframe配合可以在页面加载的时候就可以执行 可触发多次 帧数可控
https://www.cnblogs.com/mmzuo-798/p/6655753.html
3、清除浮动方法以及为什么要清除浮动
为什么:因为设置浮动之后因为浮动元素脱离文档流 不计入高度 所以父元素塌陷等情况 所以需要清除 浮动。
方法:
①、给父元素设置高度
②、clear:both清除浮动
.clear{clear:both}
<div class="divcss5">
<div class="divcss5-left">left浮动</div>
<div class="divcss5-right">right浮动</div>
<div class="clear"></div>
</div>
③、父级div定义 overflow:hidden
④、父级div定义伪类:after和zoom
https://www.cnblogs.com/nxl0908/p/7245460.html
4、Css 优先级算法如何计算?
最高等:!important 权值为10000
第一等:代表内联样式,如: style=””,权值为1000。
第二等:代表ID选择器,如:#content,权值为0100。
第三等:代表类,伪类和属性选择器,如.content,权值为0010。
第四等:代表标签选择器和伪元素选择器,如div p,权值为0001。
第五等:通用选择器(*),子选择器(>),相邻同胞选择器(+),权值为0000
5、哪些css属性可以继承。哪些属性不能继承
image.png
6、如何垂直水平居中一个div
①父元素relative
子元素
.mydiv{
width:300px;
height:200px;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%)
}
②
子元素
.mydiv{
width:300px;
height:200px;
position:absolute;
left:0;
top:0;
bottom:0;
right:0;
margin:auto;
}
③flex布局
④table布局
7、圣杯双飞翼布局 三栏布局
https://www.jianshu.com/p/81ef7e7094e8
8、flex布局
阮一峰大佬讲的已经很好了 我看来无可挑剔 看就完事!!
https://blog.csdn.net/lm9948/article/details/80732702
9、font-size大小指哪里 ?line-height指哪里的大小?
font-size是指字的高度
line-height指字上下一半的间距。
10、css选择器有哪些
ID 类 标签 后代 子 兄弟 伪类 :first-child伪类等 :link 和 :visited等 :before 和 :after伪元素等
11、display有哪些值?说明他们的作用
image.png
12、zoom:1的清除浮动原理?
image.png
13、移动端字体小于12px怎么处理? 移动端边框小于1px怎么处理?
①
html{-webkit-text-size-adjust:none;}
或者
p{-webkit-text-size-adjust:none;}
② 使用transform的scale(0.5);
③ 有样式的就用图片好了
14、骨架屏了解过吗?知道怎么做的嘛?
骨架屏就是为了再加载资源内容的前面给个用户大体的框架 留下好的用户体验。页面加载完成之后进行替换的方案
https://segmentfault.com/a/1190000016689372
15、css reset文件的作用
reset文件主要是统一一些基础格式,使得在不同浏览器下展示得相同
https://www.cnblogs.com/ZinCode/p/5544633.html
16、描述z-index和叠加上下文是如何形成的?
https://www.w3cplus.com/css/what-no-one-told-you-about-z-index.html
17、data-是什么?
是自定义属性,可以通过getAttribute('data-**')来读取相应的自定义属性;
18、 对WEB标准以及W3C的理解与认识
web标准一般是将结构、表现和行为独立分开,使其更具有模块化。但一般产生行为时,就会有结构或者表现的变化,也使这三者的界限并不那么清晰。
W3C对web标准提出了规范化的要求,也就是在实际编程中的一些代码规范:包含如下几点
①对于结构要求:(标签规范可以提高搜索引擎对页面的抓取效率,对SEO很有帮助)
1)。标签字母要小写
2)。标签要闭合
3)。标签不允许随意嵌套
2.对于css和js来说
1)。尽量使用外链css样式表和js脚本。是结构、表现和行为分为三块,符合规范。同时提高页面渲染速度,提高用户的体验。
2)。样式尽量少用行间样式表,使结构与表现分离,标签的id和class等属性命名要做到见文知义,标签越少,加载越快,用户体验提高,代码维护简单,便于改版
3)。不需要变动页面内容,便可提供打印版本而不需要复制内容,提高网站易用性。
19、CSS 中解决浮动中高度塌陷的方案有哪些?
解题思路
可以先概括解决高度塌陷问题的两种类型:clear 属性 和 BFC 法
然后可以介绍两种类型的具体方案:
追加元素并设置 clear 属性
使用 CSS 样式插入伪元素
Bootstrap 的解决高度塌陷方案(BFC)
可能追加的面试题(详见参考链接)
高度塌陷产生的原因是什么?
clear 属性清除浮动的原理是什么?
采用 BFC 解决高度塌陷和clear 属性清除浮动相比的优势是什么?
参考链接
清除浮动
浏览器和 Node.js 的事件循环机制有什么区别?
1.Micro-Task 与 Macro-Task
浏览器端事件循环中的异步队列有两种:macro(宏任务)队列和 micro(微任务)队列。宏任务队列可以有多个,微任务队列只有一个。
常见的 macro-task 比如:setTimeout、setInterval、script(整体代码)、 I/O 操作、UI 渲染等。
常见的 micro-task 比如: new Promise().then(回调)、MutationObserver(html5新特性) 等。
链接:https://juejin.im/post/5c337ae06fb9a049bc4cd218
ES6中的symbol数据类型?
是一种基础的数据类型,每一个定义的symbol值都是唯一的 理解和用处参考博客
symbol的理解和使用
在 JavaScript 中如何实现对象的私有属性?
实现对象的私有属性
网友评论