挑战前端基础120题--css3基础篇

1. CSS选择器种类、权重、优先级计算、匹配顺序、继承？

• !important > 行内样式 > id >
• 类选择器 , 伪类（:hover）, 属性选择器 >
• 标签，伪元素选择器 （::before ::after :root） >
• 通配符 ,继承 ，关系选择器（兄弟选择器（子选择器（>) , 相邻选择器（+）>
• 浏览器默认

能够被继承的属性：font-size/font类 / text类 line-height text-align color / 元素可见性：visibility

非继承的 ： width/height/border/background

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;
    }
}