-
html5中新增标签
main section article footer header
好处：
a. 标签自带样式
b. 便于搜索引擎优化
c. 可读性强 -
css3 中新增内容
自定义动画、文字阴影（text-shadow）、圆角边框、边框阴影（box-shadow）、过度（transition）
动画中的属性（animation）：animation-name(动画名称)、animation-duration(动画执行一次所需时间)、animation-delay(动画在开始前的延迟时间)、animation-timing-function(动画以何种运行轨迹完成一个周期：linear、 ease-in 、ease-out)、animation-iteration-count(动画播放次数)、animation-fill-mode(定义元素动画结束以后或者未开始的元素样式) 、animation-direction(是否轮流反向播放动画) -
flex 弹性盒
flex布局是什么：弹性盒布局
属性及属性值:- flex-direction:决定主轴的方向
a. row（默认值）：主轴为水平方向，起点在左端
b. row-reverse:主轴为水平方向，起点在右端
c. column:主轴为垂直方向，起点在上沿
d. column-reverse:主轴为垂直方向，起点在下沿 - justify-content决定主轴上的对齐方式：
a. flex-start（默认值）：左对齐
b. flex-end：右对齐
c. center：居中
d. space-between:两端对齐，项目之间的间隔都相等
e. space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍 - align-items属性:交叉轴上如何对齐
a. flex-start：交叉轴的起点对齐
b. flex-end:交叉轴的终点对齐
c. center：交叉轴的中点对齐
d. baseline：项目的第一行文字的基线对齐。
e. stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。 - align-content属性:多根轴线的对齐方式
a. flex-start：与交叉轴的起点对齐。
b. flex-end：与交叉轴的终点对齐。
c. center：与交叉轴的中点对齐。
d. space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
e. space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
f. stretch（默认值）：轴线占满整个交叉轴。 - flex-wrap属:换行
a. nowrap（默认）：不换行
b. wrap:换行，第一行在上方
c. wrap-reverse:换行，在第一行的下方 - 项目属性：
a. order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
b. flex-grow属性定义项目的放大比例，默认值为0，即如果存在剩余空间，也不放大。
c. flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，改项目将缩小。
d. flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
e. flex属性是flex-grow，flex-shrink和flex-basis的简写，默认值为0 1 auto。后面两个属性可选
f. align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，等同于stretch。
- flex-direction:决定主轴的方向
-
如何清除浮动？为什么要清除浮动？
clear：both；overflow:hidden 发生高度塌陷 -
常见的定位方式有哪些？
a. absolute 基于距离自己最近的一个非固定定位的元素进行定位
b. fixed 基于整个窗口
c. relatived 基于本身应该出现的位置 -
浏览器兼容性：
a.尽量不使用html5中新增的一些语义化标签
b. 不使用css3中新增的内容
c. jQuery低版本
我们公司在做的时候主要使用360浏览器(兼容模式、极速模式)进行调试
html hack的方式针对不同版本的ie设置使用不同的样式<!-- lt ie8 -- > -
css 常见的元素选择器有哪些？计算规则（优先级，权重）
id class 标签 伪类（nth-child；first-child；last-of-type()；nth-child()；not()）
!important：最高优先级 -
盒模型？(标准盒模型和怪异盒模型区别)
内容区域的计算方式不一样（标准盒模型margin；padding；border；content：怪异盒模型content；margin）
box-sizing：content-box：标准盒模型解析方式；border-box：怪异盒模型解析方式 -
做移动端开发需要注意什么？什么是 viewport？
1.1、长时间按住页面出现闪退element { -webkit-touch-callout: none; }
1.2 、iphone及ipad下输入框默认内阴影：Element{ -webkit-appearance: none; }
1.3、active兼容处理 即 伪类 :active 失效:body添加ontouchstart<body ontouchstart="">
1.4、Retina屏的1px边框Element{ border-width: thin; }
1.5、旋转屏幕时，字体大小调整的问题*{ -webkit-text-size-adjust:100%; }
1.6、上下拉动滚动条时卡顿、慢body { -webkit-overflow-scrolling: touch; //苹果手机 overflow-scrolling: touch; }
2.1、Viewport：就是你设备屏幕的可视宽度和高度；<meta name="viewport" content="width=device-width, initial-scale=1.0">
2.2、如何禁止页面双指缩放？
viewport 禁止缩放属性为no，max-scale,min-scale -
怎么实现一个选项卡的功能？点击时设置显示隐藏
-
如何实现模态窗口：第一个盒子实现背景：将整个页面覆盖（透明色）第二个盒子实现交互框。
-
如何实现一个鼠标移上之后图片旋转 360 度的效果？
2020最新前端面试题
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章