总纲:前端面试知识点大全
目录
1.css3动画
animation配合@keyframes
1.1 animation语法:
animation:name duration timing-function delay iteration-count direction
animation-name:规定需要绑定到选择器的keyframe名称
animation-duration:规定完成动画所花费的时间,以秒或毫秒计(带单位),默认0
animation-timing-function:固定动画的速度曲线,liner | ease | ease-in | ease-out | ease-in-out
animation-delay:在动画开始前的延迟,秒或毫秒计,默认0
animation-iteration-count:动画播放的次数
animation-direction:normal|alternate,是否应该轮流反向播放动画,默认normal
1.2 @keyframes语法
@keyframes animation-name {keyframes-selector{css-styles};}
animation-name 必须,动画的名称(animation的第一个参数)
keyframes-selector 必须。动画市场的百分比。(1)0%~100% (2)from(相当于0%)(3)to(相当于100%)
css-styles 必须,一个或多个合法的css样式属性
2.布局之:左边定宽,右边自适应
方法1、左边设置左浮动,右边宽度设置100%
方法2、利用flex,父元素设置为display:flex;右侧自适应子元素设置flex:1,即flex-grow:1,放大比例。默认为0,即如果存在剩余空间,也不放大。
方法3、利用负margin,这个对html结构有要求,需要额外的包裹标签包裹右侧自适应元素,然后放置在左侧的前面,即<div "包裹元素"><section></section></div><aside></aside>,利用margin-left:-100%,可以让下面浮动的元素,挤上来(因为浮动元素是尽可能向上浮动,只要有位置)
方法4、设置浮动 + 在 css 中使用 calc() 函数
参考链接:https://blog.csdn.net/sinat_36521655/article/details/81113350
3.圣杯布局,双飞翼布局
HTML结构:
<div class=“main”></div>
<div class="left"></div>
<div class="right"></div>
主栏 左侧 右侧 这样的html结构,然后全部左浮动,主栏width设为100%,左侧想要上浮,设置齐margin-left:-100%;右侧想上去,则把margin-left:负右侧固定宽度;然后主栏设置box-sizing:border-box,设置padding为固定宽度的值(将内容挤回中间,不会被两侧遮盖)
圣杯布局、双飞翼布局、Flex布局和绝对定位布局的几种经典布局的具体实现示例https://blog.csdn.net/wangchengiii/article/details/77926868
4.实现垂直居中和水平居中
1、行级元素 父元素text-align:center 水平居中
2、块级元素 子元素margin:0 auto 水平居中
3、浮动元素 直接父元素relative,子元素absolute,然后translate(-50%,-50%) 都居中
4、父元素设置display:flex;justify-content:center;align-items:center 都居中
5、行级元素,height和line-height一样即可
6、块级元素,父元素高度固定,则设置为inline或者inline-block,然后height与line-height相同
父元素高度不固定,padding-top和padding-bottom相同即可
7、父元素display:flex;justify-content:center;flex-direction:column;
或display:flex;align-items:center
参考博客:https://blog.csdn.net/sinat_36521655/article/details/80131869
5.css预加载
放在任何位置都是可行的,之所以推荐放在head标签里是因为浏览器代码解析是从上到下的。如果把css放在底部,当网速慢时,html代码加载完成后而css没加载完的话,会导致页面没有样式而难以阅读,所以先加载css样式能让页面正常显示。
1、css加载不会阻塞DOM树的解析
2、css加载会阻塞DOM树的渲染
3、css加载会阻塞后面js语句的执行
6.bootstrap原理
Bootstrap 框架 栅格布局系统设计原理https://www.cnblogs.com/suwings/p/6079178.html
Bootstrap缺点:
1、多余的HTML结构和CSS样式,在media query下不同屏幕要对css进行重写或者增强
2、同样的图片可能需要两套 (小屏幕,大屏幕)
3、Sprite IMG 无法得到充分的利用, Background Size , Position微小像素差等问题
4、其实根本没有人会闲的蛋疼的去不停的缩放屏幕
5、两套事件绑定(Click,Tap) 偷懒的话只用Click事件,导致点击触控方面体验极差
6、资源文件体积过大, 不利于优化, 手机加载解析速度慢
7.less预处理器
学习资料:http://www.css88.com/doc/less/features/#features-overview-feature-variables-
8.样式兼容
-moz-:火狐浏览器的私有属性
-webkit-:safari 和 chrome的私有属性
-o-:opera的私有属性
-ms-:ie的私有属性
9.link 和@import 的区别
(1) link属于HTML标签,而@import是CSS提供的;
(2) 页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载;
(3) import只在IE5以上才能识别,而link是HTML标签,无兼容问题;
10.css样式注意点
10.1 CSS 选择符:
1.id选择器(# myid)
2.类选择器(.myclassname)
3.标签选择器(div, h1, p)
4.相邻选择器(h1 + p)
5.子选择器(ul > li)
6.后代选择器(li a)
7.通配符选择器( * )
8.属性选择器(a[rel = "external"])
9.伪类选择器(a: hover, li:nth-child)
10.2 可继承的样式:
1.font-size
2.font-family
3.color
4.text-indent
10.3 不可继承的样式:
1.border
2.padding
3.margin
4.width
5.height
10.4 优先级:
1.优先级就近原则,同权重情况下样式定义最近者为准;
2.载入样式以最后载入的定位为准;
3.!important > id > class > tag
4.important 比 内联优先级高,但内联比 id 要高
可以参考:https://blog.csdn.net/sinat_36521655/article/details/80140221
10.5 CSS3新增伪类举例:
p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
:enabled :disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中。
11.css样式注意点
FOUC - Flash Of Unstyled Content 文档样式闪烁,样式还没加载完成,后面加载完成后又回流
<style type="text/css" media="all">@import "../fouc.css";</style>
而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM,然后再去导入外部的CSS文件,因此,在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的,这段时间的长短跟网速,电脑速度都有关系。
解决方法简单的出奇,只要在<head>之间加入一个<link>或者<script>元素就可以了。
12.table布局(table-layout)
table有一个样式属性叫table-layout,他的值有fixed和auto(默认)以及inherit
12.1 固定表格布局(fixed):
固定表格布局与自动表格布局相比,允许浏览器更快地对表格进行布局。
在固定表格布局中,水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距,而与单元格的内容无关。
通过使用固定表格布局,用户代理在接收到第一行后就可以显示表格。
12.2 自动表格布局(auto):
在自动表格布局中,列的宽度是由列单元格中没有折行的最宽的内容设定的。
此算法有时会较慢,这是由于它需要在确定最终的布局之前访问表格中所有的内容。
13.层叠上下文
引自张鑫旭的博文《深入理解CSS中的层叠上下文和层叠顺序》:http://www.zhangxinxu.com/wordpress/?p=5115