1. CSS选择器种类、权重、优先级计算、匹配顺序、继承？
- !important > 行内样式 > id >
- 类选择器 , 伪类（:hover）, 属性选择器 >
- 标签，伪元素选择器 （::before ::after :root） >
- 通配符 ,继承 ，关系选择器（兄弟选择器（子选择器（>) , 相邻选择器（+）>
- 浏览器默认
2. 块、行的特性？
块 div span ul ol h1~h6 table form view(小程序或者其他的框架) 单独一行 display:block 行 span a li label text(小程序或者其他的框架) 行内元素 display:inline-block 特点：相邻一行； 高度和宽度无效，但是可以设置line-hight；但是水平方向上的padding和margin可以设置，垂直方向上的无效；默认的宽度就是它本身的宽度；只允许容纳纯文本/其他行内标签 （a标签除外）3. 盒子模型？
2类： ie盒子模型(宽度由三部分组成：2*padding+2*border+content) + 标准盒子模型（宽度由四部分组成：2*margin+2*pading+2*border+content） css3中引入了box-sizing属性，box-sizing:content-box 表示标准盒子模型，box-sizing:border-box 表示IE盒子模型4. BFC的概念和应用？ 边距折叠？
2个盒子的上下边距有时候会折叠为一条边距 ，称为外边距折叠；注意：有设定浮动和绝对定位的元素不会发生外边距折叠 首先必须知道什么是BFC：区块格式化上下文（Block Formatting Context）； 如何创建一个块级上下文呢：- 根元素 html
- 浮动元素 float:!none;
- 绝对定位元素 position: absolute / fixed
- 行内块元素 display:inline-block
- 表格单元格/标题 display:table-cell
- overflow 不为 visible 或 clip 的块级元素
- 弹性元素 display:flex 的子元素
解决边距折叠：清除浮动 /设置浮动
5. Flex布局做页面，flex-basis、flex-grow、flex-shrink的计算方法？
响应式布局 实现div盒子水平垂直居中/ 三页布局 父元素设置：display:flex; flex-wrap / justify-content/align-item/flex-direction flex-basis、flex-grow、flex-shrink的计算方法: https://juejin.cn/post/6844904016439148551 flex-grow 定义子容器的瓜分剩余空间的比例，默认为 0，即如果存在剩余空间，也不会去瓜分。 flex-shrink: flex 元素的收缩规则，默认值是 1 通常是子元素的宽度超过父元素没有剩余空间瓜分了 通过配置 等比压缩； 注意：如果子容器没有超出父容器，设置 flex-shrink 无效 flex-basis：指定了 flex 元素在主轴方向上的初始大小6. 定位各种用法？
positon： relative）/absolute （相对于最近的已定位的父元素 relative）/fixed（相对浏览器窗口）/static/sticky(基于用户的滚动位置来定位) 7. link标签和script标签区别 lin引入css 放置在head内 页面加载的时候 同时加载/预加载 不会阻塞洁面运行 script 引入js 会阻塞页面的加载 通常放置在body上 可以设置延迟加载。8. 动画？
动画：是将元素从一个形态变化到另一个形态的一个过程；
animation: name duration timing-function delay iteration-count direction fill-mode; animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态animation: move 2s linear 1s 2 forwards;
/* 关键帧 */
@keyframes move {
form {
width: 100px;
margin-left: 0px;
}
to {
width: 200px;
margin-left: 100px;
}
}
标签：css3,flex,盒子,--,元素,box,display,120,选择器 From： https://www.cnblogs.com/sulishibaobei/p/18157275