css选择器的优先级顺序
内联样式（1000）>id选择器（100）>类选择器（10）,伪类选择器,属性选择器>通用选择器（0），兄弟选择器，子选择器,伪元素选择器
隐藏元素的方式有哪些
1.display：none 移除dom
2.visibility：hidden 隐藏元素
3.opacity：0 透明度为0
4.position：absolute 绝对定位移出可视区范围内
5.z-index设置负值,让其他元素遮盖住此元素
6.clip/clip-path 元素裁剪
7.transform：scale（0,0） 元素缩放
引入CSS文件,link和@import的区别
1.link是XHTML标签，不仅可以加载css还可以加载其他资源，@import是属于css范畴，只能加载css
2.link引入css资源时是和页面同时加载，@import是等页面加载完后加载css资源
3.link没有兼容性问题，@import是CSS2.1后提出的，低版本浏览器不兼容
4.link支持JS操作dom改变样式，@import不支持
transition和animation的区别
1.transition是过渡属性，需要设置一个触发事件才会执行此属性（例如鼠标移入）
2.animation是动画属性，它不需要触发事件，设定好时间则可以自己执行
伪类和伪元素的区别和作用
1.伪元素：在内容元素的前后插入额外样式，这些样式不会在文档源代码中生成，所以我们叫伪元素
常见伪元素：p::before{content:'hello word !'} 向元素前插入
p::after{content:'hello word !'} 向元素后插入
p::first-line{background:red} 元素文本第一行
2.伪类：将指定样式插入特定选择器上，不会产生新的元素
常见伪类:p:hover,p:first-child...
对requestAnimationframe的理解
requestAnimationframe是一个请求动画的API，requestAnimationframe（callback）;属于宏任务
取消动画的API是cancelAnimationframe(id),id是requestAnimationframe return的id
优势：cpu节能，它在页面激活的时候才执行，页面未激活的时候则会暂停执行
函数节流
节省dom操作
对盒模型的理解
盒模型有两种：1.标准盒模型 2.IE盒模型（怪异盒模型）
区别：标准盒模型width 和 height 很纯粹，就是content（宽高）
IE盒模型设置width和height包含了padding border content （多了内边距和边框）
通过设置box-sizing:content-box(标准盒模型) box-sizing:border-box(IE盒模型)
两栏布局的实现(左侧固定右侧自适应)
方法1.利用flex
{
.fu{
dislpay:flex;
.left{
width:200px;
border:1px solid #000
}
.right{
flex:1;
border:1px solid #000
}
}
}
方法2.利用定位
{
.fu{
position:relative;
height:300px;
.left{
position:absolute;
width:200px;
height:300px;
border:1px solid #000
}
.right{
margin-left:200px;
border:1px solid #000
}
}
}
三栏布局的实现（左右固定中间自适应）
方法1.利用定位
{
.fu{
position:relative;
height:300px;
.left{
position:absolute;
width:100px;
height:300px;
}
.middle{
margin-left:100px;
margin-right:100px;
height:300px
}
.right{
position:absolute;
top:0;
right:0;
width:100px;
height:300px;
}
}
}
方法2.利用flex
{
.fu{
display:flex;
height:300px;
.left{
width:100px;
}
.middle{
flex:1
}
.right{
width:100px
}
}
}
水平垂直居中布局实现
方法1.flex
{
.fu{
display:flex;
justify-content:center;
align-items:center;
}
}
方法2.定位
{
.fu{
position:relative;
.child{
position:absolute;
top:50%;
left:50%;
//transform:translate(-50%,-50%)//需考虑浏览器兼容性
margin-left:-50px//自身width的一半
margin-top:-50px//自身height的一半
}
}
}
