Skip to content

Latest commit

 

History

History
129 lines (92 loc) · 4.54 KB

面试题解答.md

File metadata and controls

129 lines (92 loc) · 4.54 KB

面试题解答

引用面试题 - 2019前端面试题--这样准备，拿不到offer算我输！

欢迎留言，相互学习

css

  1. 合模型

    | position | margin | border | padding | content

  2. flex

    提问：你知道几种居中方式？

    • 1、水平

      • margin: 0 auto;
      • text-align: center;
      • justify-content: center;
      • position: absolute; margin: auto; left: 0; right: 0; (这样会发生宽度 100%)
      • position: relative; left: 50%; transform: translateX(-50%);

    • 2、垂直

      • line-height: ???px; (值和 height 相等)
      • align-items: center;
      • position: absolute; margin: auto; top: 0; button: 0;(这样会发生高度 100%)
      • position: relative; top: 50%; transform: translateY(-50%);

    flex 样式：详细请看阮老师 【Flex 布局教程：语法篇】

    1、容器的属性

    属性 定义 值
    flex-direction 属性决定主(X)轴的方向 row、row-reverse、column、column-reverse
    *flex-wrap 如果一条轴线排不下，如何换行 nowrap、 wrap、 wrap-reverse
    flex-flow flex-direction属性和flex-wrap属性的简写形式
    *justify-content 定义了项目在主(X)轴上的对齐方式 flex-start、flex-end、center、space-between、space-around
    *align-items 定义项目在交叉(Y)轴上如何对齐 flex-start、flex-end、center、baseline、stretch
    align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用 flex-start、flex-end、center、space-between、space-around、stretch

    2、项目的属性

    属性 定义 值
    order 定义项目的排列顺序，数值越小，排列越靠前 默认值为0
    flex-grow 定义项目的放大比例 默认值为0
    flex-shrink 定义了项目的缩小比例 默认值为1
    flex-basis 定义了在分配多余空间之前，项目占据的主轴空间 默认值为auto
    *flex 是flex-grow, flex-shrink 和 flex-basis的简写 默认值为0 1 auto
    align-self 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性 默认值为auto

  3. css 单位

    常用单位：

    单位 定义
    px 绝对单位，页面按精确像素展示
    em 相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值
    rem 相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持
    vw viewpoint width，视窗宽度，1vw等于视窗宽度的1%
    vh viewpoint height，视窗高度，1vh等于视窗高度的1%
    vmin vw和vh中较小的那个
    vmax vw和vh中较大的那个
    % 百分比

    提问：css3单位 px 和 rem 的换算？

    统一设置基准值为：100 (优势：不用管DPR，只需知设计稿宽度)

    UI设计搞为 640px 时，X = 6.4

    UI设计搞为 750px 时，X = 7.5

    设置视口：　

    <meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

    动态设置html的font-size：

    document.documentElement.style.fontSize = document.documentElement.clientWidth / X + 'px';

    另一种 npm插件 方式解决: px-to-rem-loader

  4. css选择器

  5. bfc 清除浮动

    伪类清浮动

    // :after伪类+content 清除浮动的影响
.clear:after{
  clear: both; // 再让这个元素旁边两侧都不允许浮动
  content: ""; // 给元素添加一个空的内容
  display: block; // 让这个空的元素成为一个块元素
}

6、层叠上下文

7、常见页面布局

8、响应式布局

9、css预处理，后处理

10、css3新特性

animation和transiton的相关属性

animate和translate

11、display哪些取值

12、相邻的两个inline-block节点为什么会出现间隔，该如何解决

13、meta viewport 移动端适配

14、CSS实现宽度自适应100%，宽高16:9的比例的矩形

15、rem布局的优缺点

16、画三角形

17、1像素边框问题