html+css

一：HTML5新特性

1、语义化标签
header
footer
section
article
aside
main
menu

2、本地存储
localStorage 永久存储，除非手动删除 5m
sessionStorage 关闭浏览器就清空
localStorage 和 sessionStorage 前端可以访问和修改，后端不行

cookie 4K 可以设定过期时间，客户端和服务端都可以访问并且修改
https://github.com/js-cookie/js-cookie cookie插件

3、canvas 画布
一般使用图表插件 v-chart echarts

4、地理定位
<script>
var x=document.getElementById("demo");
function getLocation(){
if (navigator.geolocation){
// 这个就是H5的获取当前经纬度并且获取后执行showPosition回调
navigator.geolocation.getCurrentPosition(showPosition);
}else{
x.innerHTML="Geolocation is not supported by this browser.";
}
}

// position包含经纬度信息
function showPosition(position){
x.innerHTML="Latitude:" + position.coords.latitude + "<br />Longitude:" + position.coords.longitude;
}
</script>

*二：水平垂直居中
1、文字、行内块或者行内元素居中，用text-align:center; line-height等于这些元素的父级的高度
2、父级div相对定位，子div绝对定位，上下左右0，margin:auto，需要设置宽高
3、父级div相对定位，子div绝对定位，上下50%，transform:translate(-50%,-50%),不需要设置宽高
4、flex布局，justify-center，align-items:center

*三：flex属性
display:flex
justify-content 主轴的排列方式
align-items 侧轴（交叉轴）的排列方式
flex-direction 决定主轴的方向
flex-wrop 是否换行
flex

四：移动端怎么适配
使用vw、flex弹性布局、媒体查询

五：盒子模型（box-sizing: border-box）

六：css权重

1.标签选择器 00001
2.类选择器 00010
3.ID选择器 00100
4.行内样式 01000
5.！important 10000

七：css预编译 比如less、sass
编译相当于翻译