一句话:好好学习,天天向上。机会总是给有准备的人;技不如人,就回去修炼。
1、css选择符
!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
2、超级链接<a>
,四种状态
a:link :未访问
a:hover :鼠标在链接上,鼠标滑动
a:active :鼠标点击
a:visited :访问过后
注:hover,需要在link和visited(如果存在)之后。
3、关于css hack
” * “、“ _ ”是ie共有属性; “ - ”是ie6的专有属性;“ !important ”ie6以上生效。
谷歌:-webkit- 内核:blink(基于webkit、Google、opera software)
火狐:-moz- 内核:gecko
ie内核:trident
4、关于typescript
5、清除浮动的几种方式,和他们的优缺点
- 创建一个空标签;为其添加样式 clear:both,(可以清除任何标签,但是添加了多余的空白标签)
- 在浮动元素的父节点上面加上overflow:hidden(或者overflow : auto);zoom:1(兼容ie6) 减少不必要的空标签,overflow可能带来页面展示问题。
- 在浮动元素的父元素添加 :after
div:after
{
clear:both;
content:'';/*content:'.'*/;
height:0;/*高度为0;否则可能比实际高出几倍*/
};
在下一个标签清除兄弟节点的浮动元素时,直接clear:both;
6、css引入方式、优缺点
- 行内:在标签内部书写样式,太繁琐,也没有体现css的优势。
- 嵌入:嵌入
<head> <style type="text/css"> { xxx:xxx;} </style>
不利于代码的维护,以及样式的重用;时候单页面样式 - 导入外部文件:
<head> <style type="text/css"> @import "xxx.css"</style> </head>
页面加载完成之后再装载css文件,文件太大,便会刚开始只有标签显示,之后再有页面渲染。 - 链接引入
<link>
在执行到<head>
加载引入文件,渲染。
<link rel="stylesheet" type="text/css" href = "xx.css" >
7、使用javascript判断一个字符串中出现次数最多的字符,并且统计这个字符出现的次数
function choose(arr){
let obj = {};
for(let i=0,length = arr.length;i++){
var s = arr.charAt[i];
if( obj[s] ){
obj[s]++;
}else{
obj[s] = 1;
}
}
let max = 0,maxchar ;//最大数,最大字符
for(let key in obj){
if(max < obj[key]){
max = obj[key];
maxchar = key;
}
}
}
8、正则表达式
9、jsonp
组成:回调函数和数据;
回调函数:当响应来了到来时应该在页面调用的函数;数据:传入回调函数中的json数据。
jsonp采用的是get请求。
10、javascript事件模式
事件冒泡:
事件捕获:
11、盒子模型
标准盒子:box-sizing:content-box;(设置的宽高是内容content的宽高,设置padding会将盒子撑大);
盒子模型:宽=width+padding+ border+margin 盒子模型实际大小 : 宽=width+padding +border
怪异盒子:box-sizing: boder-box;(设置高度width包含的padding和内容content);
盒子模型 : 宽=width + margin 盒子模型实际大小 : 宽 = width
弹性盒模型(css3):父元素添加 display :flex /display :inline-flex;
1、定义盒模型的主轴方向: flex-direction :row / column -webkit-box-orient : horizontal / vertical 2、定义元素的排列顺序 : flex-direction : row-reverse / column-reverse -webkit-flex-direction : normal / reverse 3、沿主轴方向对齐方式: justify-content : flex-start(从头挨着填充)\ flex-end(从尾部向前挨着填充)\ conter(居中紧挨着填充) \ space-between(平均分布) \space-around (子元素均分父元素宽度,子元素盒子内居中) -webkit-justify-content : 4、侧轴方向对齐方式: align-items : flex-start \ flex-end \ center \ baseline(文字基线对齐) -webkit-flex-align : 5、定义子元素的换行方式: flex-grow : nowrap(盒子模型单行,子元素可能会溢出) \ wrap (弹性盒模型我多行) \ wrap-reverse( 反转) -webkit-flex-align 6、设置元素具体位置: order : 数字越小越靠前,最小值默认处理为1; -webkit-flex-order