一、HTML + CSS
1、常用实用技巧
01、定位:
position:absolute/relative/fixed/static
static:静态定位;
absolute:绝对定位, 绝对定位的元素相对于最近的定位祖先元素进行定位。然而,如果绝对定位的元素没有定位祖先,它将相对于文档主体(body)进行定位
relative:相对定位,相对于自己的初始位置进行定位;
fixed:固定定位,固定定位的元素是相对于视口定位的,这意味着即使滚动页面,它也始终位于同一位置。
02、盒模型:
margin:外边距;
border:边框;
padding:内边距;
content:内容;
盒模型的宽:左外边距+左边框+左内边距+width+右内边距+右边框+右外边距;
盒模型的高:上外边距+上边框+上内边距+height+下内边距+下边框+下外边距;
03、垂直水品居中(内容的垂直水品居中和盒子的垂直水平居中)
(1)、内容垂直水品居中:
height=line-height;
text-align:center;
(2) 、盒子垂直水平居中两种方法:
方法1:
position:absolute;
left: 50%;
top: 50%;
margin-left: -盒子宽一半;
margin-top:-盒子高一般;
方法2:
position:absolute;
left: 50%;
top: 50%;
transform:translate(-50%,-50%);
2、知识点
01. HTML5新特性有哪些
新增了语义化标签如header、footer等
新增了视频(video)音频(audio)标签
新增了canvas和svg绘图
新增了地理定位(navigator.geolocation)
新增了拖拽API segmentfault.com/a/119000000…
新增了多线程技术web worker和即时通讯技术web socket等
02. CSS3有哪些新特性
增加了transition渐变、animation动画、选择器、阴影box-shadow、弹性布局flex、媒体查询@media等
03. W3C标准有哪些
W3C标准不是一个标准,而是一系列标准的总和;
标准分为三个层面,结构(html)、行为(js)、表现(css)
标准有:
文档类型需要声明(DOCTYPE)
编码格式需要声明
javascript代码需要定义
css代码需要定义
标签名字和标签内部属性名字小写等
04. 常见的浏览器兼容问题有哪些
不同浏览器里面的
标签的外间距和内间距表现不同,解决方案:*{margin:0;padding:0},
图片有默认间距,解决方案:父标签设置font-size:0
05. CSS伪类选择器有哪些
:before 在...之前
:after 在...之后
:active 点击
:hover 鼠标悬停
:first-letter 所有文字当中的第一个
:first-line 所选元素当中的第一行
:first-child 第一个子元素
:nth-child() 获取子元素
:nth-of-type 获取指定类型的子元素
等等几十个
06. 什么是子选择器,什么是后代选择器
表示子选择器,例如 div>span 获取div的子标签span
空格 表示后代选择器,例如 div span 获取div里面所有的span
07. CSS权重的优先级是怎样的
!important > 内联样式 > id > class > 标签名字
权重可以叠加
08. 浏览器怎么做兼容
IE浏览器一般使用css hack方式来解决,即在代码前面加上* 、_、 +等符号
谷歌一般在属性前面加上-webkit-来进行兼容
火狐一般在属性前面加上-moz-进行兼容
webpack使用postcss给css属性自动添加前缀,进行兼容
09. 平时是怎么做适配的
通常的方案是通过rem配合媒体查询(@media)来进行适配,
标签或者文本设置大小的时候不设置px而是设置rem,
然后使用媒体查询根据屏幕大小来动态调整rem大小,那么所有设置rem单位的元素都会根据屏幕发生改变
010. rem和em有什么区别
em是相对于父级标签的字体大小来定义的
rem是相对于html标签的字体大小来定义的
011. canvas和svg有什么区别
都可以用来绘制图形,但是canvas是基于js来绘制的,svg是基于xml来绘制的
012. 页面优化有哪些方法
(1)减少 HTTP 请求
(2)减少 DOM 元素数量
(3)从页面中剥离 JavaScript 与 CSS
(4)移除重复脚本
(5)使用恰当的图片格式
13. 语义化的理解?
(1)html语义化就是让页面的内容结构化,便于浏览器、搜索引擎解析;
(2)在没有CSS样式情况下也以—种文档格式显示,并且是容易阅读的。
(3)使阅读源代码的人更容易将网站分块,便于阅读维护理解。
二、JS+jQuery
1、常用实用技巧
01. 数组的常用函数及其作用
2、知识点
01. js基本数据类型有哪些
基本类型Number 、String、Boolean、Null、Undefined、symbol
引用类型Object
02. JS当中的typeof返回的类型有哪些
number 、string 、boolean 、 undefined 、symbol、function 、object
03. return,break,continue的区别是什么
return 必须写在函数内部,遇到return后函数内部剩余的代码不再执行,直接返回;还可以使用return返回一个值给外面使用
break 跳出循环,剩余的循环不再执行
continue 跳出本次循环,剩余的循环继续执行