面试之css篇章

小小亮01

已于 2023-02-17 09:51:30 修改

阅读量937

点赞数

分类专栏：面试文章标签： css 面试 css3

于 2022-03-15 07:56:04 首次发布

本文链接：https://blog.csdn.net/weixin_43845137/article/details/123492949

版权

面试专栏收录该内容

14 篇文章 0 订阅

订阅专栏

面试之css篇章

css选择器的优先级

顺序如下： !important > 行内样式 > id选择器 > 类名选择器 > 标签选择器 > *通配符
类名：包含伪类等！

为什么使用scss、less预处理器

scss在webpack编译的时候就被loader转化成css
然后scss里面有着变量、函数、mixin等抽离代码，可以简化代码以及做统一样式管理

谷歌浏览器字体如何设置小于12px

使用 transform:scale() 缩放的形式去设置小于12px的字体

& > div:nth-child(1) {
    position: relative;
    font-family: PingFangSC-Regular;
    color: #666666;
    letter-spacing: -0.24px;
    text-align: left;
    width: 30px;
    span {
      position: absolute;
      left: -15px;
      top: -5px;
      width: 60px;
      height: 34px;
      display: block;
      font-size: 20px;
      transform: scale(0.5);
    }
  }

html5有哪些新特性

01：语义化标签
- main、header、footer、section、nav、aside等标签
02：新增视频和音频标签
03：新增Canvas绘图
04：新增本地存储localStorage、sessionStorage
05：新增 Web Worker、WebSocket

css3有那些新特性

01：box-shadow 盒子阴影
02：text-shadow 文本阴影
03：border-radius 盒子圆角
04：transform 转换
- 001：transform:translate() 平移
- 002：transform:scale() 缩放
- 003：transform: rotateY(180deg); 旋转
- 004：transform: skew(180deg) 倾斜
05：CSS3 的渐变效果 (Gradient )

css盒模型

标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)
怪异盒模型，一个块的总宽度 = width(padding border) + margin
注意点：控制盒模型的 css属性为 box-sizing属性
- content-box：就是标准盒模型
- border-box：就是怪异盒模型（IE盒模型）

利用css 实现盒子居中

01：弹性盒，对父容器设置为弹性盒，子容器设置 margin: auto即可
02：使用定位结合平移方式，就是父容器定位 relative，子容器设置absolute，并且使用平移去移中
03：已知宽高时，直接父容器定位 relative，子容器设置absolute，子容器 margin:auto即可
04：

01：弹性盒

<template>
  <div>
    <div class="father">
      father
      <div class="son">son</div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.father {
  display: flex;
  width: 200px;
  height: 200px;
  .son {
    color: red;
    margin: auto;
  }
}
</style>

02：使用定位结合平移

可以设置未知子容器盒子宽高的

    <div class="father">
      father
      <div class="son">son</div>
    </div>
  .father {
  position: relative;
  width: 200px;
  height: 200px;
  background: #ccc;
  .son {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* width: 40px;
    height: 40px; */
    color: red;
  }
}

03：使用定位（已知宽高）

已知的盒子宽高的

<template>
  <div>
    <C />
    <div class="father">
      father
      <div class="son">son</div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.father {
  display: flex;
  position: relative;
  width: 200px;
  height: 200px;
  background: #ccc;
  .son {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 40px;
    height: 40px;
    color: red;
  }
}
</style>

04：使用margin（已知宽高)

    <div class="father">
      father
      <div class="son">son</div>
    </div>

.father {
  width: 200px;
  height: 200px;
  .son {
    margin: 50px;
    width: 100px;
    height: 100px;
    color: red;
  }
}

z-index的作用

z-index 属性设置元素的堆叠顺序，设置的层级高的显示再最上层
注意点：就是使用 z-index 必须是有定位的，否者不起效果
属性
- auto——默认。堆叠顺序与父元素相等。
- number——设置元素的堆叠顺序。
- inherit——规定应该从父元素继承 z-index 属性的值。

BFC

BFC：就是一个独立的渲染区域，( 块级格式化上下文）
BFC布局规则
- 不会重叠 float浮动的盒子
- 再独立的区域渲染，不会影响外盒子
- 重新计算高度，浮动的元素也参与运算
- margin 以相距最大的那个算
- 上下排列，块级显示
BFC的触发规则
- html标签
- float不为node
- position：为fixed | absolute
- overflow：不为默认值（visible）
BFC作用：
- 解决高度塌陷
- 实现两栏自适应布局

:after与 ::after的区别

:after是伪元素
::after是伪类
两者的写法是相似的，只不过的:after是css2的写法，::after是css3的写法，相对而已，css2的写法兼容性会好一些
常见伪类

“:link”、“:hover”、“:active”、“:focus”、“:lang()”、“not()”、“:first-child”、“:last-child”

css中，怎么设置左侧固定200px，随着右侧高度自适应

解析：
- 就是左侧固定200px，但是右侧宽是自适应的，可高可低，随着右侧的高变化，其左侧的也随着高变低
解决：
- 给左侧添加自适应

 padding-bottom:3000px;
  margin-bottom:-3000px;

href 与 src的区别

href：
- 就是引入外部文档建立链接，再引入文档的时候，浏览器一边加载文件，一边执行渲染，两者不耽误，效率会高一些
- 注意点：这也就是不建议使用@import的原因
src：
- 引入外部的img等，或者js语法等操作，引入这些的时候，浏览器会停止当前线程的渲染，而去加载这些外部文件的渲染，再执行后续的渲染流程

FOUC(无样式内容闪烁）

就是浏览器一加载的时候，短暂显示样式失效，这是由于使用了 @import 形式导入css等
@import 形式导入css
- 这导入css的时候，会先加载这个css，再继续加载后面的的代码（浏览器）
css置于底部，或者css样式放置再不同的位置
- 最终解决方法：再head头部之中使用 link的形式引入css
- 优点：就是不会阻塞浏览器的加载，浏览器一边加载css一边加载html等