前端高频面试题整理

胡萝卜蹲蹲蹲
262 阅读5分钟

1.实现元素居中的方法

行内元素

水平居中：

  1. text-align: center;
  2. width: fit-content; margin: auto;

垂直居中：

  1. line-height: xxxpx;
  2. vertical-align: middle;
块级元素

水平居中：

  1. margin: 0 auto;

水平垂直居中：

  1. 未知宽度
    • 定位 + margin: auto,设置top、left、right、bottom值相等
    .father{
        position: relative;
    }
    .son{
        position: absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
    }
    • 定位 + transform
    .father{
        position: relative;
}
.son{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
}
    • table布局
    .father{
        display: table;
        text-align: center;
        vertical-align: middle;
}
.son{
        display: inline-block;
}
    • flex弹性布局
      • 只设置父元素
      .father{
        display: flex;
        justify-content: center;
        align-items: center;
}
      • 设置父、子元素
      .father{   
        display: flex; 
} 
.son{   
        align-self: center;   
        margin: auto; 
}
      • grid网格布局
    .father{
        display: grid;
        align-items:center;
        ustify-content: center;
}
  2. 已知宽度
    • 子绝父相 + margin: 负值
    .father{
        position: relative;
}
.son{
        width: 100px;
        height: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -50px;
        margin-left: -50px;
}

     - 子绝父相，calc属性(50% - 宽度一半)

    .father{
        position: relative;
}
.son{
        width: 100px;
        height: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: calc(50% - 50px);
        margin-left: calc(50% - 50px)

2.如何触发BFC?

BFC：块级格式化上下文，它是页面中的一块渲染区域，有一套属于自己的渲染规则。 BFC作用

  1. 解决上下元素的外边距重叠，属于同一个BFC的元素会发生外边距重叠，给其中一个元素包裹一层触发BFC
  2. 解决父子元素的margin重叠问题
  3. BFC区域不会与float元素重叠，不想文字包裹浮动元素，可以给文字元素触发BFC
  4. 解决父元素高度塌陷的问题，清除浮动，让父元素触发BFC

触发方式

满足以下任一条件即可触发BFC：

  1. 根元素
  2. 浮动元素，float为除none以外的值
  3. 绝对定位元素，position(absolute, fixed)
  4. overflow为除了visible以外的值（auto、scroll、hidden）
  5. display为inline-block、table-cells、flex、grid

3.清除浮动的方式

  1. 在浮动元素后面加一个div，设置clear: both
  2. 在父元素中添加伪元素，::after: content; display: block; clear: both;
  3. 触发BFC
  4. 获取父元素高度，为父元素添加高度

4.如何让字体小于12px?

  1. sacle缩放
.text{
    font-size: 20px;
    transform: scale(0.5);
    transform-origin: 100% 100%;
}

  1. 使用svg文字

    1. svg中包含text标签，给svg设置合适的宽高
    2. x 值表示文字左下角开始的 x 坐标；y 值表示文字左下角开始的 y 坐标，一般文本显示都是左对齐，所以 x 值为 0， y 值为字号大小
    <svg> 
    <text x="0" y="10">我是10px字体大小</text>
</svg>

5.如何用CSS画一个三角形？

  1. 利用border属性
.border {
    width: 0;
    height: 0;
    border-top: 50px solid pink;
    border-right: 50px solid transparent;
    border-left: 50px solid transparent;
}
  1. linear-gradient
.triangle{
    width: 100px;
    height: 100px;
    background-color: linear-gredient(45deg, pink 50%, transparent 50%);
}
  1. 使用clip-path
.triangle{
    background-color: red;
    clip-path: polygon(0 0, 0 100%, 100% 0)
}

6.移动端设备适配方案有哪些？

  1. 媒体查询

使用@media查询，可以通过给不同分辨率的设备编写不同的样式来实现响应式布局

@media screen and (max-width: 1920px) { ... }
  1. rem适配

根据屏幕分辨率动态调整根元素的字体大小，实现px和rem之间的转换

let docEl = document.documentElement
function init() {
    let rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
}
init()
window.addEventListener("resize", init)
  1. vm/vh适配

vm和vh都是相对视口单位，可以根据视口的大小来调整元素的大小。任一层级元素，在使用vw单位的情况，1vw等于视图宽度的百分之一。

.div{
    wdith: 50vw;
    height: 13.3333vw;
    font-size: 5.3333vw;
    line-height: 13.3333vw;
}
  1. 利用meta标签缩放比例
(function (designWidth){
    const rootEl = document.documentElement;
    let viewportMeta = doucment.querySelector("meta[name=viewport]");
    if(!viewportMeta) {
        viewportMeta = document.createElement("meta");
        viewportMeta.name = "viewport";
        document.head.appendChild(viewportMeta);
    }
    function setViewportContent() {
        const deviceWidth = rootEl.clientWidth;
        const scale = deviceWidth / designWidth
        const viewportContent = `width = ${deviceWidth}, initial-scale = ${scale} user-scalable = no`;
        
        viewportMeta.content = viewportContent
    }
    setViewportContent();
    window.addEventListener("resize", setViewportContent)
})(768)

7.flex: 1的含义是什么？

flex: 1 实际上是flex-grow、flex-shrink、flex-basis的简写形式，完整表达式为： flex-grow: 1; flex-shrink: 1; flex-basis: auto;

  • flex-grow: 规定了在flex容器中分配剩余空间的相对比例。
  • flex-shrink: 指定了flex元素在空间不足时的收缩规则。
  • flex-basis: 指定了flex元素在主轴方向上的初始大小。

8.怎么画一条0.5px的线？

  1. box-shadow阴影实现

box-shadow属性允许小数值，可以实现1-4条边的阴影效果

.line{
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    box-shadow: 0px 0px 0px 0.5px black;
}
  1. ::after定位伪类

通过设置伪类，设定好高度，添加定位控制显示位置

.line{
    width: 100px;
    height: 100px;
    position: relative;
    box-sizing: border-box;
}
line::after{
    position: absolute;
    width: 100%;
    height: 0.5px;
    background-color: red;
}
  1. transform缩放实现
.line{
    width: 100px;
    height: 100px;
    position: relative;
    box-sizing: border-box;
}
line::after{
    position: absolute;
    width: 200%;
    height: 200%;
    border: 1px solid red;
    transform: scale(0.5);
    transform-origin: 0 0;
}

9.CSS怎么做样式隔离？

  1. BEM

通过这种css命名方法统一开发规范

  1. CSS modules

将css代码模块化，避免本模块样式被污染，方便CSS代码复用，依赖webpack css-loader构建时开启css Modules功能。

{
    test: /.css$/,
    loader: "style-loader!css-loader?modules"
}
  1. CSS in JS

把CSS直接写到各组件中，用JS去写，将组件的CSS样式一块封装到组件中去。

代表库：styled components

  1. CSS预处理器

利用预处理器使CSS的结构更具有可读性。

常见的预处理器：

  • Sass
  • Less
  • PostCss
  1. Vue scoped

当 <script> 标签有scoped属性时，它的CSS只作用于当前组件。 使用scoped后，父组件的样式不会渗透到子组件中。

avatar
文章
阅读
粉丝