Lifault

Lifault 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 该用户太懒什么也没留下

个人动态

Lifault 发布了文章 · 10月18日

设计模式个人总结

创建对象的设计模式

1 工厂模式

工厂模式,顾名思义就是可以批量生产出有细微差别的同一对象。
工厂模式一个明显的特点就是调用的时候不需要new一个新对象,它是将new方法封装在方法内部,通过传入不同的参数,放回不同的对象。

2 创建者模式

将一个复杂的对象拆分成多个模块,再聚集到一个最终的类中。通过new这个最终类,可以得到一个复杂的对象。

3 单列模式

全局共用的一个对象。

查看原文

赞 0 收藏 0 评论 0

Lifault 发布了文章 · 8月29日

echart柱状图为不同柱体设置hover效果

预期效果

image.png
如图所示,鼠标hover在不同的柱体时展示不同的信息

实现

 option = {
 legend: {},
 tooltip: {
 //将trigger设置为item
 trigger: 'item', 
 //将在formatter中设置hover效果
 formatter: function (params) {
 console.log(params);
 return params.name;
 },
 },
 dataset: {
 source: [
 ['product', '2015', '2016', '2017'\],
 ['Matcha Latte', 43.3, 85.8, 93.7\],
 ['Milk Tea', 83.1, 73.4, 55.1\],
 ['Cheese Cocoa', 86.4, 65.2, 82.5\],
 ['Walnut Brownie', 72.4, 53.9, 39.1\],
 ],
 },
 xAxis: { type: 'category' },
 yAxis: {},
 series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }],
 };

当tooltip.trigger值为item,hover时,formatter的params将是单个柱体的信息
当tooltip.trigger值为axis,hover时,formatter的params为一个数组,得到是多个柱状信息

查看原文

赞 0 收藏 0 评论 0

Lifault 收藏了文章 · 4月14日

记一次 Vue 组件设计及 computed 动态引入组件

本文涉及技术点:

  • 动态组件 & 异步组件
  • 内置组件 keep-alive & transition
  • 插槽 slot 及 v-slot

实际场景

多级 tabs 切换,tab 项不固定,灵活控制 tab 项内容的展示,如下图。

image.png

目录结构

目录结构大概像这样:

  • src

    • components - 公共组件

      • Tabs.vue - 封装的 Tabs 组件
      • EmptyView.vue - 空页面组件
      • *.vue - 其他公共组件
    • pages - 容器组件

      • Index.vue - 主要处理一级 tabs 数据及对应的内容渲染
      • VersionList.vue 主要处理二级 tabs 数据及对应的内容渲染
    • views - 视图组件,不固定需要动态引入,可以无限扩展

      • project-exercise

        • Index.vue
      • ...

组件设计

从页面元素的可复用性角度考虑,我们将将组件按类型分为公众组件、容器组件和视图组件。

公共组件

根据对页面元素的分析,我们可以提取选项卡元素为公共组件,因为两个地方用到了选项卡切换,所以根据需求进行封装,代码如下。

<!--src/components/Tags.vue -->
<template>
  <el-tabs v-model="active" :type="type" @tab-click="handleClick">
    <el-tab-pane v-for="item in tabs" :key="item.id" :name="item.name" :label="item.label"></el-tab-pane>
    <transition name="component-fade" mode="out-in">
      <keep-alive>
        <slot :item="currentTab"></slot>
      </keep-alive>
    </transition>
  </el-tabs>
</template>
我们封装的组件 Tags 中,使用 elementUI中的 tabs 组件(类库可以随意选择,不要受工具限制)。

公共组件 Tags 由两部分构成:

  • tabs 切换栏 - 切换栏数据由外部控制,通过 props 注入。
  • 内容展示区域 - 内容展示区域由 slot 进行控制。

之所以 slot 外层包裹 keep-alive 是因为实际分发的组件内容是由动态组件控制的,起到缓存优化的作用。

一级容器组件 Index

容器组件分为: 一级选项卡容器和二级选项卡容器,一级选项卡内容展示区域又负责渲染二级选项卡及选项卡对应的内容区域。
<--! src/pages/Index.vue-->
<template>
  <div>
    <v-tags :activeName="activeName" :type="tabType" :tabs="tabs" v-slot="current">
      <component :is="getCurrentTab(current.item)" :tab="getCurrentTab(current.item)"></component>
    </v-tags>
  </div>
</template>
<script>
  import VTags from '@/components/Tabs';
  import EmptyView from '@/components/EmptyView';
  import VersionList from './VersionList';
  export default {
    components: {
      VTags,
      EmptyView,
      ProjectExercise: VersionList,
      FullCycle: VersionList
    },
    data() {
      return {
        tabType: 'card',
        activeName: 'project-exercise',
        tabs: [...]     
      }
    },
    methods: {
      // 根据 tabName 渲染不同组件
      getCurrentTab(name) {
        const tabName = [
          'project-exercise', 
          'full-cycle'
        ]
        return tabName.includes(name) ? name : 'empty-view';
      }
    }, 
  }
</script>

一级容器组件做的事情:

  • 负责告诉公共组件 Tabs 渲染哪些 tabs 数据。
  • 负责控制一级选项卡进行切换时,渲染对应的内容组件。

因此通过 props 传入给 Tabs 用来渲染的 tabs 数据可能像这样:

tabs: [
  { id: '0',
    label: '项目策划',
    name: 'project-exercise'
  },
  { id: '1',
    label: '需求分析',
    name: 'demand-analysis'
  },
  { id: '2',
    label: '设计编码',
    name: 'design-encoding'
  },
  { id: '3',
    label: '单元测试',
    name: 'unit-test'
  },
  { id: '4',
    label: '组装测试',
    name: 'assembly-test'
  },
  { id: '5',
    label: '确认测试',
    name: 'confirmation-test'
  },
  { id: '6',
    label: '全生命周期',
    name: 'full-cycle'
  }
]

一级选项卡渲染出来的结果像下图所示。

分发给 Tabs 组件的 slot 插槽的内容通过动态组件 component 控制。

<component :is="getCurrentTab(current.item)" :tab="getCurrentTab(current.item)"></component>

is 属性的值由公共组件 Tabs 传入,传入的值与 name 值对应,由 v-slot 接受。最后对处理传入的值进行匹配操作,如下代码。

methods: {
  // 根据 tabName 渲染不同组件
  getCurrentTab(name) {
    const tabName = [
      'project-exercise', 
      'full-cycle'
    ]
    return tabName.includes(name) ? name : 'empty-view';
  }
}, 

根据需求我们只渲染 project-exercisefull-cycle 两个选项中的内容,其他选项我们展示一个 EmptyView 组件,效果如下。

二级容器组件 VersionList

二级容器组件是一级容器组件和视图组件的 中间桥梁,也就是说一级容器选项卡进行切换时都会渲染二级容器组件,二级容器组件主要负责渲染版本列表和版本对应的视图组件。

版本号作为二级选项卡存在,每一个一级选项卡的内容展示都会显示相同的版本列表。
<template>
  <div>
    <v-tags :type="tabType" :tabs="tabs" v-slot="current">
      <component :is="renderView" v-if="renderView" :planId="getPlanId(current.item)"></component>
      <!-- <own-view :planId="getPlanId(current.item)"></own-view> -->
    </v-tags>
  </div>
</template>
<script>
  //import OwnView from "../views/project-exercise/";
</script>

VersionListtemplate 类似一级容器组件,也是引入公共组件 Tags,并通过 props 向其传递 tabs ,告诉公共组件选显示什么样的项卡数据。

接下来,二级选项卡对应的视图组件,也是由动态组件 component 控制(分发传给 Tags 组件中 slot 插槽的内容)。

<component :is="renderView" v-if="renderView" :planId="getPlanId(current.item)"></component>

computed 动态引入异步组件

与一级容器组件不同的是,传入给 is 属性的值不是组件名,而是组件实例,这里渲染的视图组件不是通过固定路径引入,而是通过 import 动态引入的,这里也是本文的重点 computed 动态引入组件, 具体实现代码如下。

<template>
  ...
</template>
<script>
import VTags from "@/components/Tabs";
import { getProjectPlans } from "@/api";
export default {
  props: ["tab"],
  components: {
    VTags
  },
  data() {
    return {
      tabType: "border-card",
      tabs: [],
      renderView: null, 
      view: this.tab //tab 名
    };
  },
  watch: {
    tab() {
      this.view = this.tab;
      this.init()
    }
  },
  computed: {
    // 通过计算属性动态引入组件
    loaderWiew() {
      return () => import("../views/" + this.view + "/Index.vue");
    }
  },

  methods: {
    // 根据 name 获得 planId
    getPlanId(name) {
      let filterTabs = this.tabs.filter(item => item.name == name);
      if (filterTabs.length) {
        return filterTabs[0].id;
      }
    },
    init() {
      this.loaderWiew().then(() => {
        // 动态加载组件
        // this.loaderWiew() 为组件实例
        this.renderView = () => this.loaderWiew();
      }).catch(() => {
        // 组件不存在时处理
        this.renderView = () => import("@/components/EmptyView.vue");
      });
    }
  },
  mounted() {
    this.init();  
    // 省略通过接口获取版本列表数据的逻辑
  }
};
</script>

为什么使用 computed 去动态引入组件,而不是像这样:

<template>
  ...
</template>
<script>
import VTags from "@/components/Tabs";
const OwnView = import("../views/" + this.view + "/Index.vue");
export default {
  components: {
    VTags,
    OwnView
  },
}
</script>

要知道,在 export defaul {} 外部是无法获取 vue 实例的,因此就无法与外部进行通信,获取不到外部传入的 this.view 变量。

因此我们只能通过引入异步组件的概念,来动态引入组件。

首先我们在计算属性中创建异步组件的实例,返回 Promise

computed: {
  // 返回 Promise
  loaderWiew() {
    return () => import("../views/" + this.view + "/Index.vue");
  }
},

在组件挂载 mouted 阶段,处理 fulfilledrejected 两种状态,fulfilled 正常渲染,rejected 则渲染 EmptyView 组件。

init() {
  // this.loaderWiew() 为组件实例
  this.loaderWiew().then(() => {
    // 动态加载组件
    this.renderView = () => this.loaderWiew();
  }).catch(() => {
    // 组件不存在时处理
    this.renderView = () => import("@/components/EmptyView.vue");
  });
}
...
mounted() {
  this.init();
}

this.view 的值与 views 目录下的子目录匹配,匹配成功,代表成功引入。(后续开发中,视图组件可以无限扩展)

接着,通过 watch 监听数据变化,重新初始化组件。

watch: {
  tab() { // tab 通过 props 传入,传入的值与目录名称对应
    this.view = this.tab; // 
    this.init(); // 由变化时,说明二级 tab 进行了切换,重新渲染
  }
},

最后,视图组件引入成功,正常渲染。

引入失败,渲染 EmptyView 组件。

最后

一个完整的多级 tabs 切换组件就设计完成了,支持无限 view 层组件扩展,可以根据需求灵活控制 tab 项内容的展示。

getCurrentTab(name) {
    const tabName = [
      'project-exercise', 
      'full-cycle'
    ]
    return tabName.includes(name) ? name : 'empty-view';
}

点个赞或关注下,会不定期分享技术文章。

查看原文

Lifault 收藏了文章 · 4月10日

手把手教你用原生JavaScript造轮子(四)——Tabs选项卡

Tabs 选项卡

文档:Tabs
源码:tiny-wheels
如果觉得好用就点个 Star 吧~(〃'▽'〃)

效果

Tabs

思路

这个组件的难点在于控制每个tab项底部条的移动以及对应panel的移动,最常见的做法是通过transform来改变元素的位置,不废话,直接上代码

实现

文章只列出关键部分的代码,其余逻辑可自行研究项目中的源码

Tabs组件由于需要让用户自定义内容,所以一些配置我们通过 HTML 的自定义属性实现(自定义标签兼容性目前还不太好,所以暂不考虑),组件的 HTML 结构如下:

<div class="tabs" data-tab-active="2" data-tab-disabled="3">
  <div data-tab-name="选项卡1" data-tab-key="1">内容1</div>
  <div data-tab-name="选项卡2" data-tab-key="2">内容2</div>
  <div data-tab-name="选项卡3" data-tab-key="3">内容3</div>
  <div data-tab-name="选项卡4" data-tab-key="4">内容4</div>
</div>

每个属性的具体用法文档里已有说明,所以这里不再赘述

组件结构的渲染源码里已有,最终渲染出的 HTML 结构是这样的:

<div class="tabs tiny-tabs" data-tab-active="2" data-tab-disabled="3">
  <div class="tab-header">
    <span class="tab-item">选项卡1</span>
    <span class="tab-item active">选项卡2</span>
    <span class="tab-item disabled">选项卡3</span>
    <span class="tab-item">选项卡4</span>
    <span
      class="tab-line"
      style="width: 46px; transform: translateX(77px);"
    ></span>
  </div>
  <div class="tab-panels animated" style="transform: translateX(-100%);">
    <div data-tab-name="选项卡1" data-tab-key="1" class="tab-panel">内容1</div>
    <div data-tab-name="选项卡2" data-tab-key="2" class="tab-panel active">
      内容2
    </div>
    <div data-tab-name="选项卡3" data-tab-key="3" class="tab-panel">内容3</div>
    <div data-tab-name="选项卡4" data-tab-key="4" class="tab-panel">内容4</div>
  </div>
</div>

根据用户设置的选项卡内容,我们可以渲染出对应数量的tab-item,而tab-item位置、宽度的计算可以通过offsetLeftoffsetWidth得到,然后改变对应的样式即可:

setTabs () {
    this.$$tabItems = this.$container.querySelectorAll('.tab-item')
    this.$tabLine = this.$container.querySelector('.tab-line')
    this.setTabStatus()
    const tabIndex = this.getTabIndex() ? this.getTabIndex() : 0
    if (this.$$tabItems[tabIndex]) {
        const { offsetWidth, offsetLeft } = this.$$tabItems[tabIndex]
        this.setTabItem(this.$$tabItems[tabIndex])
        this.setTabLine(offsetWidth, offsetLeft)
        this.setTabPanel(this.$$tabPanels[tabIndex], tabIndex)
    }
}
setTabLine (width, left) {
    this.$tabLine.style.width = `${width}px`
    this.$tabLine.style.transform = `translateX(${left}px)`
}

tab-panel的设置也是一样:

setTabPanel ($panel, index) {
    this.$tabPanelContainer.style.transform = `translateX(-${index * 100}%)`
    this.$$tabPanels.forEach($panel => $panel.classList.remove('active'))
    $panel.classList.add('active')
    setTimeout(() => {
        if (this.options.animated) {
            this.$tabPanelContainer.classList.add('animated')
        }
    })
}

需要注意的是,第一次加载组件时,我们不希望tab-panel有滑动效果,所以这里需要用setTimeout延时加载transition动画样式

Tabs组件的的核心逻辑就这么多了,剩下的是一些配置属性、事件绑定的实现:

getTabIndex () {
    const tabKey = this.$container.dataset.tabActive
    let tabIndex = tabKey
    if (tabKey) {
        this.$$tabPanels.forEach(($panel, index) => {
            if ($panel.dataset.tabKey === tabKey) {
                tabIndex = index
            }
        })
    }
    return tabIndex
}
setTabStatus () {
    const tabKey = this.$container.dataset.tabDisabled
    if (tabKey) {
        this.$$tabPanels.forEach(($panel, index) => {
            if ($panel.dataset.tabKey === tabKey) {
                this.$$tabItems[index].classList.add('disabled')
            }
        })
    }
}
bindTabs () {
    this.$$tabItems.forEach($tab => {
        $tab.addEventListener('click', () => {
            if (!$tab.classList.contains('disabled')) {
                const index = [...this.$$tabItems].indexOf($tab)
                this.setTabItem($tab)
                this.setTabLine($tab.offsetWidth, $tab.offsetLeft)
                this.setTabPanel(this.$$tabPanels[index], index)
                this.options.callback.call(null, $tab, this.$$tabPanels[index].dataset.tabKey)
            }
        })
    })
}

tab-active(初始激活项)与tab-disabled(初始禁用项)都是通过dataset的api拿到对应的属性值,然后遍历找到需要设置的项即可;绑定事件时需要给回调函数传入当前元素的引用、tab-key等参数

Tabs组件的基本功能到此就实现完毕了,当然,还可以实现一些更复杂的功能:选项卡的添加删除、响应式展示tab-item、卡片样式式的选项卡等等,这些功能在element-uiiviewant-design中都有实现,可以参考它们的效果自行拓展~

Vue或者React来封装这样的组件,无非只是把DOM操作省去,组件属性的配置更简化了而已,一些内部的核心实现原理是通用的,比如用Vue来写组件的结构,可能就会变成这样:

<template>
    <tabs :active.sync="activeTab" @update:selected="callback">
        <tabs-head>
            <tabs-item name="one" disabled>
                选项卡1
            </gabs-item>
            <tabs-item name="two" active>
                选项卡2
            </tabs-item>
            <tabs-item name="three">
                选项卡3
            </tabs-item>
        <tabs-head>
        <tabs-body>
            <tabs-panel name="one">
                内容1
            </tabs-panel>
            <tabs-panel name="two">
                内容2
            </tabs-panel>
            <tabs-panel name="three">
                内容3
            </tabs-panel>
        </tabs-body>
    <tabs>
</template>

可以看到,属性的配置简化了很多,组件结构和我们用原生 HTML 渲染出来的结果是差不多的(实际上用原生的自定义标签也可以模拟出这样的效果来,只是目前浏览器兼容还很差),而tabs组件的样式实现仍然需要计算offsetWidthoffsetLeft等等属性,换汤不换药,大家感兴趣的话可以用Vue重写一遍,这里就不多啰嗦了~

To be continued...

查看原文

Lifault 收藏了文章 · 4月2日

阿里前端攻城狮们又写了一份面试题答案,请查收

前言

话说两周前,我发了这样一条沸点:

于是我真的就建群收集了题目,和团队的同事一起写答案,我们也不图什么,就是想做一件有意义的事情,现在我整理了下我们的回答,有的不一定就是非常具体的回答,但也提供了思路和参考资料,大家看看是否还有什么补充的?

[字节跳动] 怎么与服务端保持连接

和服务端保持连接,最简单粗暴的方法就是通过请求轮询保持跟服务端的通信,客户端不光要花成本维护定时轮询器,还会使得服务器压力变大,所以不推荐。

还有一种可以借助请求超时的设置,将超时时间设置一个足够大的值,客户端发起连接后,只要服务端不返回消息,整个连接阶段都会受到阻塞,所以这种方式也不推荐。

最后一种是WebSocket,当服务器完成协议从HTTP到WebSocket的升级后,服务端可以主动推送信息给客户端,解决了轮询造成的同步延迟问题。由于 WebSocket 只需要一次 HTTP 握手,服务端就能一直与客户端保持通信,直到关闭连接,这样就解决了服务器需要反复解析 HTTP 协议,减少了资源的开销。

1

[字节跳动] 谈一下隐式类型转换

这个问题可以拓展讲成 JavaScript 中的类型转换,分为两类,显式类型转换和隐式类型转换,当我们用 Number() 等函数的时候,就是显式类型转换,其转换规则是当是基本类型时,参照规范中的对应表进行转换,当不是基本类型的时候,先参照规范中的 ToPrimitive 方法转换为基本类型,再按照对应表转换,当执行 ToPrimitive 的时候,又会根据情况不同,判断先执行对象的 valueOf 方法还是 toString 方法进行准换,这个可以参照 JavaScript 深入之头疼的类型转换(上),而当我们进行运算的时候,经常发生的就是隐式类型转换,比如 +== 运算符,当 + 运算符的时候,更倾向于转成字符串,而当 == 的时候,更倾向于转为数字,这个在 [JavaScript 深入之头疼的类型转换(下)]()中会讲到……但是我还在写……总之,回答类型转换的时候,最好是扯到规范中,表明你在研究这块内容的时候,还专门去看过规范。基本上回答了这里,对类型转换说明已经有很多的了解,但你可以再拓展讲一下,比如当时我在学习类型转换的时候,还专门去研究了如何花式表示 26 个字母,比如在控制台打印这样一句话:

[[][0] + []][0][5]+[[][[[][0] + []][0][4]+[[][0] + []][0][5]+[[][0] + []][0][1]+[[][0] + []][0][2]] + []][0][8]+[[[] == []][0] + []][0][2]+[[][[[][0] + []][0][4]+[[][0] + []][0][5]+[[][0] + []][0][1]+[[][0] + []][0][2]] + []][0][6]+[[][[[][0] + []][0][4]+[[][0] + []][0][5]+[[][0] + []][0][1]+[[][0] + []][0][2]]+[]][0][23]+[[][0] + []][0][3]+[[][[[][0] + []][0][4]+[[][0] + []][0][5]+[[][0] + []][0][1]+[[][0] + []][0][2]] + []][0][8]+[+[1 + [[][0] + []][0][3] +309][0] + []][0][7]+[[][[[][0] + []][0][4]+[[][0] + []][0][5]+[[][0] + []][0][1]+[[][0] + []][0][2]] + []][0][6]+[[][0] + []][0][0]

花式表示字母的原理大家也可以探索一下,虽然看起来很无聊,但可以作为一个小案例,表明下你对技术的钻研和兴趣。

[各种公司] 输入url后发生了什么

这个问题的核心是在问从输入URL到页面渲染经历了哪些过程。

从耗时过程来看,可以分为DNS解析、TCP连接、HTTP请求与响应、客户端浏览器解析渲染、连接结束。其中浏览器解析渲染包含HTML词法、语法的解析、CSS解析、DOM树生成、渲染树建立、屏幕绘制。

下面针对几个较为重要的过程做下介绍。

DNS解析

当我们在浏览器中输入如www.taobao.com的时候,DNS解析充当了一个翻译的角色,把网址「翻译」成了IP地址。DNS解析的过程就是域名到IP地址的转换的过程。域名解析也叫域名指向、服务器设置、域名配置以及反向IP登记等等。说得简单点就是将好记的域名解析成IP,服务由DNS服务器完成,把域名解析到一个IP地址,然后在此IP地址的主机上将一个子目录与域名绑定。

image

TCP连接

TCP连接的重要目的,是为了保证消息的有序和不丢包,为了建立可靠的数据传输,TCP通信双方相互告知初始化序列号,并确定对方已经收到ISN的,整个链接的过程就是我们俗称的三次握手

image

HTTP请求与响应

HTTP请求它主要发生在客户端,发送HTTP请求的过程就是构建HTTP请求报文并通过TCP协议发送到服务器指定端口的过程。

还是用 https://www.taobao.com 举例子。

当在地址栏输入后,浏览器会分析这个url,并设置好请求报文发出。请求报文中包括请求行(包括请求的方法,路径和协议版本)、请求头(包含了请求的一些附加的信息,一般是以键值的形式成对存在)、空行(协议中规定请求头和请求主体间必须用一个空行隔开)、请求主体(对于post请求,所需要的参数都不会放在url中,这时候就需要一个载体了,这个载体就是请求主体)。服务端收到这个请求后,会根据url匹配到的路径做相应的处理,最后返回浏览器需要的页面资源。处理后,浏览器会收到一个响应报文,而所需要的资源就就在报文主体上。与请求报文相同,响应报文也有与之对应的起始行(响应报文的起始行同样包含了协议版本,与请求的起始行不同的是其包含的还有状态码和状态码的原因短语)、响应头(对应请求报文中的请求头,格式一致,但是各自有不同的首部)、空行、报文主体(请求所需要的资源),不同的地方在于包含的东西不一样。

HTML词法、语法解析

对我们来说HTML其实是一坨字符串,而实际上我们要面对的是"字符流"。为了把字符流解析成正确的可被浏览器识别的结构,我们需要做的事情分为两步:

词法分析:把字符流初步解析成我们可理解的"词",学名叫token。

语法分析:把开始结束标签配对、属性赋值好、父子关系连接好、构成dom树。

html结构其实不算太复杂,我们平时见到的大部分都只是标签、属性、注释、CDATA节点。

屏幕绘制

image

DOM树的生成和渲染树建立比较好理解这个就不做展开。完成了这「两棵树」的构造后,就进入屏幕绘制阶段。

在绘制的过程中,会遍历渲染树,调用由浏览器的UI组件的paint()方法在屏幕上显示对应的内容,并根据渲染树布局,计算CSS样式(即每个节点在页面中的大小和位置等几何信息)。

HTML默认是从上到下流式布局的,CSS和JS的加入会打破这种布局,改变DOM的外观样式以及大小和位置。这就引出两个非常重要的概念:replaint重绘和reflow重排。

replaint重绘,屏幕的一部分重新绘制,不影响整体布局,比如某个CSS的背景色变了,但元素的几何尺寸和位置不变。eflow重排: 意味着元件的几何尺寸变了,我们需要重新验证并计算渲染树。是渲染树的一部分或全部发生了变化。无论是重绘还是重排,对浏览器而言都是一种「消耗」,所以我们应该尽量减少这两种状态的触发。

[百词斩] CDN的原理

CDN的基本原理是广泛采用各种缓存服务器,将这些缓存服务器分布到用户访问相对集中的地区或网络中,在用户访问网站时,利用全局负载技术将用户的访问指向距离最近的工作正常的缓存服务器上,由缓存服务器直接响应用户请求。
最简单的CDN网络由一个DNS 服务器和几台缓存服务器就可以组成,当用户输入URL按下回车,经过本地DNS系统解析,DNS系统会最终将域名的解析权交给CNAME指向的CDN专用DNS服务器,然后将得到全局负载均衡设备的IP地址,用户向全局负载均衡设备发送内容访问请求,全局负载均衡设备将实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上,使用户可就近取得所需内容,解决 Internet网络拥挤的状况,提高用户访问网站的响应速度

[百词斩] 性能监控平台是如何捕获错误的

一般从如下两个方面考虑:

1.全局捕获:

通过全局的接口,将捕获代码集中写在一个地方,可以利用的接口有:

  1. window.addEventListener(‘error’) / window.addEventListener(“unhandledrejection”) / document.addEventListener(‘click’) 等
  2. 框架级别的全局监听,例如aixos中使用interceptor进行拦截,vue、react都有自己的错误采集接口
  3. 通过对全局函数进行封装包裹,实现在在调用该函数时自动捕获异常
  4. 对实例方法重写(Patch),在原有功能基础上包裹一层,例如对console.error进行重写,在使用方法不变的情况下也可以异常捕获

2.单点捕获:

在业务代码中对单个代码块进行包裹,或在逻辑流程中打点,实现有针对性的异常捕获:

  1. try…catch
  2. 专门写一个函数来收集异常信息,在异常发生时,调用该函数
  3. 专门写一个函数来包裹其他函数,得到一个新函数,该新函数运行结果和原函数一模一样,只是在发生异常时可以捕获异常

注:详情可参见Fundebug 发表的 《前端异常监控解决方案研究》

[腾讯一面] 性能优化从哪些方面入手?

• 分屏加载,当页面需要渲染的数据较多时,先渲染首屏,下滑时再加载第二屏的数据;
• 图片大小优化,在不影响视觉效果的前提下,把图片尺寸降到最小;
• 图片懒加载,on appear时再加载图片;
• Code splitting,或者拆包,应用下的某些组件不需要立刻import,可以采用动态import的方式,打包时也可以将它们打到不同的bundle里,给index bundle瘦身;
• Chrome Devtools - Trace & Timeline等一系列强大的分析工具可以去研究一下,它们可以深入到内核分析应用的性能问题所在;

[腾讯二面] 如何加快首屏渲染,你有哪些方案?

  • 降低请求量:合并资源,减少 HTTP 请求数,minify / gzip 压缩,webP,lazyload。
  • 加快请求速度:预解析DNS,减少域名数,并行加载,CDN 分发。
  • 增加缓存:HTTP 协议缓存请求,离线缓存 manifest,离线数据缓存 localStorage、PWA。
  • 渲染优化:首屏内容最小化,JS/CSS优化,加载顺序,服务端渲染,pipeline。

[腾讯一面] webpack 针对模块化做的处理

这一块建议去读 webpack4 文档中对于 library,libraryTarget 的描述。当我们开发一个 JS 库的时候,通常最终的 npm package 需要输出的是一些组件或 api,这个时候我们需要了解webpack4所提供的模块化的打包能力。通过对libraryTarget的设置,我们可以将我们的工程打包成amd,umd,或commonJS模块。
https://webpack.js.org/config...

[腾讯一面] 概述一下 Node.js 中的进程与线程

Node.js 中的进程 Process 是一个全局对象,无需 require 直接使用,给我们提供了当前进程中的相关信息。Node.js 中进程可以使用 child_process 模块创建。

关系:

  • 一个线程只能属于一个进程,而一个进程可以有多个线程,但至少有一个线程(通常说的主线程)。
  • 同一进程的所有线程共享该进程的所有资源。
  • 进程在执行过程中,需要协作同步。不同进程的线程间要利用消息通信的办法实现同步。
  • 处理机分给线程,即真正在处理机上运行的是线程。
  • 线程是指进程内的一个执行单元,也是进程内的可调度实体。

区别:

  • 调度:线程作为调度和分配的基本单位,进程作为拥有资源的基本单位。
  • 拥有资源:进程是拥有资源的一个独立单位,线程不拥有系统资源,但可以访问隶属于进程的资源。

[字节跳动] 鼠标滚动的时候,会触发很多次事件,如何解决的?

这里选择的方法应该是节流,可以拓展讲到防抖和节流,防抖是指连续触发的时候只会执行一次,停止触发 N 秒后才能继续执行,而节流是指如果你持续触发事件,每隔一段时间,只执行一次事件。像防止按钮多次点击就用防抖,像是监听滚动事件就用节流,函数实现都可以参照 underscore 代码中的实现,以前我写过 JavaScript专题之跟着underscore学防抖JavaScript专题之跟着 underscore 学节流 两篇文章讲述了 underscore 中的实现方式

查看原文

Lifault 收藏了文章 · 3月31日

2020年前端开发应该如何准备面试(面试官角度分享)

近期疫情的影响,大家都有发现了,很多公司为了减少现金开支都在裁员,裁员的同时也有很多公司在疯狂招人。这让大家都很疑惑了,今年到底是就业容易还是就业难呢?招聘旺季金三银四还有没有?今年的就业应该如何去准备?

阿靖最近也在忙着招聘,今天就来跟大家分享今年的就业市场情况和面试关注点,帮助大家提前准备好面试。
1905236.jpg

今年的金三银四没了?

先说一下大家比较关心的金三银四,往年的3月份这个时候,是招聘量最高的时候,同比今年确实减少了一点,主要是受疫情影响,很多公司为了避免接触,加上没有全面复工的情况,招聘量比以往少了很多。

但是也有很多在疫情期间发展比较好的公司,都在非常积极的招聘,不方便接触就直接线上面试。今年的招聘情况,国家和招聘平台都在联合很多公司在做招聘宣传,预计等疫情过去,5、6月会迎来一个高峰期,到时候应届毕业生会大批涌出来,竞争也比较大。

今年的面试重点

今年的前端开发工程师面试,很多人都比较迷茫,1.担心受疫情影响,难度增加。2.Vue等框架新知识增加,会不会在面试中考到。

其实和疫情没有太大影响,今年的面试考察重在基础(技术知识和编程原理),丰富的项目(项目经验和细节),了解工作流程,面试表述到位。

其实这些面试的考察都是和往年差不多的,不过很多同学不知道怎么准备,下面我结合一下面试招聘的基本流程来讲讲如何准备,大家可以根据这几方面提前准备好。
102203.jpg

壹 第一印象—简历

简历是到公司面试的敲门砖,如果无法通过的第一步简历筛选,就没有后面的事了。

所以简历一定要写好,千万不要出现错别字或者语句不通的地方,特别是别把专业名词写错了。

如果有条件,可以找老师或者同学帮你看看简历,力求第一印象良好。

关于简历的内容怎么写,网上很多人教你如何写简历,百度一搜一大堆都不一样的,有些教你把技术栈罗列出来,有的又不推荐,很多人都看懵了。

我从面试官的角度来说,这些情况要根据个人实际情况出发来写。面试官想看到你最想表现的东西。比如技术栈的罗列,如果你简历中写的项目经验能体现你罗列的技术栈,你可以不写出来。但如果不能完全体现你的技术栈,那能写出来很有必要。

因为简历是你的能力体现,是展示你能力的地方,一定要突出自己的特长。

最后提醒:
如果是自荐简历,特别是校招,发送到邮箱的时候,一定要署名!!一般格式(谁+应聘什么岗位+技术等级),这样可以让面试官面方便找到你的简历,你也可以在众多没名字的简历中脱颖而出!

贰 技术基础知识

基础知识一直都是重点考察的内容,包含有HTML(5)、CSS(3)、JavaScript到node、webpack、Vue所有可能考察的知识。

基础知识不仅仅要知道是什么,更要明白怎么用,为什么这么用。死记硬背能应付一时,如果你遇到了想深入聊聊的面试官,死记硬背就没用了。所以每个知识点都要理解透彻,讲的清楚。

今天来罗列一些常考的面试知识点,大家可以提前准备

HTML&CSS:

flex布局、垂直居中、清除浮动、BFC、三栏布局、两栏布局、动画、盒模型、H5新特性

JavaScript:

继承、原型链、this指向、设计模式、call, apply, bind, new实现、防抖节流、let, var, const 区别、event、loop、promise使用及实现、promise并行执行和顺序执行、闭包、垃圾回收和内存泄漏、数组方法、数组乱序, 数组扁平化、事件委托、事件监听、事件模型、typescript

Vue:

vue数据双向绑定原理、vue computed原理、vue编译器结构图、生命周期、vue组件通信、mmvm模式、mvc模式理解、vue dom diff、vuex、vue-router

react:

dom-diff、列表key属性、jsx原理(createElement)、react-router原理、redux原理、生命周期、react setState、react组件通信、性能优化

网络:

HTTP1, HTTP2, HTTPS、浏览从输入网址到回车发生了什么、前端跨域、浏览器缓存、cookie, session, token, localstorage, sessionstorage、状态码、TCP连接(三次握手, 四次挥手)

叁 项目经验会考什么

面试中,项目经验非常重要,是作为能力评估的重要参考标准。对于基础知识的面试,项目经验面试更要考察你的实际开发能力,需要能讲出自己的实战理解和给出具体的实现方案。

一般都会问到一些技术上的实现技巧,可能会让你用代码来实现,一般说清楚思路就可以了,也可以写伪代码来体现。一般能表述清楚,评价不会太低。

项目经验会考察的问题包括但不限于:

项目开发流程、技术架构、说说做的比较好的项目、你在项目中担任的角色、项目中的收获、项目两点、项目中遇到的难点、简历中罗列的技术栈你是怎么理解的,如果让你运用实现你怎么做、组件设计和实现、兼容性问题、底层原理、性能优化、工程化、前端学习规划、算法

肆 和HR的面试

很多做技术的人,都很小看HR的面试环节,认为我们是做技术的,HR并不会问到技术相关的问题,感觉HR不会对我们的面试起关键作用。其实恰恰相反,HR的面试意见是占重要地位的。

在和HR聊天的时候,一定要注意技巧,有的可以说,有的不能随便说。不要以为HR和你聊天很轻松,你就什么都乱说。比如说,HR问你,是否还有面试其他公司,是否还有其他公司的offer,这个时候你不能直接回答说有多少或者完全没有。你可以说,已经面试了很多家公司,但感觉都不是很合适,想找一家能完全施展我能力的公司。要表现出在等这家公司的答复,表现出你想进这家公司。

还有一些问题,一定要快速回答,比如说绩效、上家公司的离职原因。这种问题如果你想了半天,回答得含含糊糊的,别人会认为你不诚实。这些问题最好都能提前准备好。

伍 谈薪资

谈薪资是大家最感兴趣的话题,怎么谈到一个好的薪资,才是我们去应聘的目的。这个环节也是面试中考察的重要一个环节,要看能否对自己又正确的判断。

一般我们要怎么提薪资呢?

要根据自己的实际情况,包括面试的表现和工作年限。一般跳槽的面试,在原有的情况下涨幅10%-30%是正常的,但是也不是绝对,还有50%、60%的情况,主要是要学会自我评估。如果你是初次就业,要根据自己的能力评级,结合自己的面试表现,参考市场行情来提薪资。

举个例子,如果你的的面试感觉非常好,并且你已经3年没跳槽了,可以尝试按你这个工作经验的市场价要高一点(50%、60%);如果面试表现差一点,就提30%。这个再差就再低一点。

切记薪资不能乱要!不要看别人要多少你就要多少!
每个公司都有自己的招聘预留目标,要按照自己的能力来要薪资,要太高对方公司不会和你谈,直接拒绝你的。因为投简历的不止你一个人,对方公司还有很多选择,别人性价比比你高,除非你的优势非常明显。

如果你在面试之前已经能拿到了别的公司的offer,那用来对比要高薪资是可以的。

190516.jpeg

最后总结

总结来说,面试成功=基础知识+项目经验+技术理解+表达技巧+运气。我们无法控制运气,但是我们可以在别的地方花更多时间,每个环节都提前做好准备。

面试一方面是为了找到工作,升职加薪,另一方面也是对于自我能力的考察。在我看来,能够面试成功不仅仅是来自面试前的临时抱佛脚,更重要的是在平时学习和工作中不断积累和坚持,把每个知识点、每一次项目开发、每次遇到的难点知识,做好积累,实践和总结。

前几天我有个学员问了我个问题:

现在的年轻人想成功一定要有很好的机遇,那我们是应该努力锻炼能力还是应该主动去寻找机遇呢?

在我看来,在遇到机遇之前,你要有很好的能力,抓住每一次机会积累你的能力,等到机遇来临,你不至于只能怪自己能力不足,抓不住机遇。共勉!

祝大家在疫情后都能拿到期望的offer!
更多前端开发技术分享,欢迎关注公众号【前端研究所】
前端研究所片尾2.png

查看原文

Lifault 收藏了文章 · 3月31日

致2021届前端同学的一封信|砥砺前行,未来可期!

前言

本篇的作者是来自淘系 D2C 团队的泽壹,作为准入职的淘系前端开发工程师,写给师弟们的这封信有着中肯的建议和诚挚的祝福。

亲爱的2021届前端同学们:

   你好,我是准入职淘系前端开发工程师泽壹,去年春天到夏天的求职历程还记忆犹新,走过些弯路,大一是车辆工程专业,大二时候转入软件工程专业,大二下学期接触前端,大三秋招很荣幸拿到阿里淘系 offer,这一路走来说下心得体会,希望可以帮助到正在求职的同学们。

为什么选择阿里

在阿里,我认为挑战与学习并存。

曾在社交平台上看到阿里师兄对 ATA 内部技术社区赞不绝口,` 我不止一次提过 ATA 那仿佛宝库一般的内部技术社区,你发的文章以及技术评论,会收到来自集团各个 BU 的大佬一起探讨,甚至转移到钉钉 1:1 深入交流,真的是太美妙了 `,当我切身目睹 ATA 这一片知识汪洋后,确实名不虚传,你可以化身为浪里小白龙投入到知识海洋中。

前端的深水区比如涉及到计算机图形学的互动图形和可视化,算法与前端交叉融合的前端智能化,在淘系都有相应的场景,充满挑战,天花板效应在这里似乎是不存在的,同时在手淘上有你写的代码也是可以向经常逛淘宝的女朋友吹嘘的一件事。

前端技术学习

技术是安身立命之本,我想很多同学跟我一样在前端学习的道路上是独自前行的,在刚开始接触前端的时候我是根据岗位的 JD 制定学习计划,我将前端学习过程分为 3 个阶段。

1.入门阶段

所谓基础不牢,必然地动山摇。入门阶段要打好基础,《JavaScript 高级程序设计》、《ES6 标准入门》、《你不知道的 JavaScript》、《CSS 权威指南》、《CSS 揭秘》我认为都是前端必读书籍。在学习基础知识的时候,要多加练习,而入门最好的方式莫过于模仿,可以尝试模仿一些比较复杂的页面,能够很快的熟悉各方面的基础知识。比如看看别人的页面是怎么布局的,样式是怎么写的,有什么技巧等。同时可以看看 underscore 代码,学习常用的比如节流、防抖是如何实现的。

2.提升阶段    

紧接着学习前端流行框架 Vue/React, 两者的官方文档值得细品,除了快速入门以外还有些高级指引、最佳实践,如 Error Boundaries你可能不需要使用派生 state。同时大家应该在实战中成长,向大家推荐一个全栈练手项目 Spectrum,是一个用于开源社区聊天的,论坛 + 聊天室的结合体,整个技术栈我觉得不错:

前端:React/Redux/React-Router/DraftJS

后端:Nodejs/GraphQL/RethinkDB/WebSocket/Redis

从中你可以学习到很多,比如:

- 如何构建一个 GraphQL 的服务端

- React 如何和 GraphQL 交互

- 如何去用 Redux 管理复杂的应用程序状态

- 如何实现 SSR

等等。

3.深入阶段

深入阶段可以分为两个维度:技术广度和技术深度。

扩展技术广度可以通过多逛逛技术社区,那些你没听到过的技术词就是你要学习的新知识,日常工作中必定会面临一些新的场景,技术广度可以帮助你,知道某个技术能干什么,原理大致是什么,是否适合当前业务的场景等。

技术深度是对技术底层或设计理念有比较透彻的理解,可以阅读 React、Vue 源码,深入理解框架的运行机制以及背后的设计模式,并可以通过对原理的理解来优化代码,这些可以作为项目中的技术亮点。

同时在学习的过程中,一定要多实践,爱折腾,千万不要眼高手低,最后会形成“简单问题不想搞,复杂问题搞不定”,往往问题的本质都是在解决一个个问题的过程中总结出来的。同时通过折腾,逐渐沉淀出一些成熟的项目,能达到解决现实问题的更好,这些都是让面试官眼前一亮、增加面试筹码的有利资产。

前端面试经验分享

所有的面试技巧都是建立在面试者已经具备了相对合格的实力的基础之上。

首先,大家还是要先储备足够的知识,这些知识包括操作系统、计算机网络、数据结构、算法、安全等计算机基础知识、前端知识 和其他的加分项知识。

其次,可以看看同学们的面试经验分享,我认为看面经不是应试的过程,更多的是查漏补缺的过程。

然后,做过的项目要总结完善,面试官会从广度和深度来挖掘项目中的亮点,比如你的懒加载是如何实现的,知道 IntersectionObserver API 吗? 有读过它的 polyfill 吗?给面试官一个选你的理由。

最后,面试的过程中要充满自信,多表达自己的理解,展示自己解决问题的思路。

砥砺前行,未来可期

学习没有捷径可走,在学习的过程希望你能够保持对技术的好奇心,收获一份理想的 offer 固然不易,放下一些东西,专注于事情,内心有相信,行动有坚持,结果有落地,offer 往往是水到渠成的,各位加油,你也可以是个 offer 收割机。

祝:大家一切安好,求职顺利,收获理想 offer。

泽壹

2020.3.27

查看原文

Lifault 发布了文章 · 3月28日

清除浮动的方式

一、为什么要清除浮动
子元素设置为浮动后,父元素高度会坍缩为0,影响页面布局

二如何清除浮动
为父元素前后添加伪类撑起父元素,来使用clear:both来清楚浮动

.clear-float:after,.clear-float:before{
    content:" "//填入空内容;
    display:block;
    clear:both
}
查看原文

赞 0 收藏 0 评论 0

Lifault 收藏了文章 · 3月24日

104道 CSS 面试题,助你查漏补缺

CSS 面试知识点总结

最近在整理 CSS 的时候发现遇到了很多面试中常见的面试题,本部分主要原作者在 Github 等各大论坛收录的 CSS 相关知识和一些相关面试题时所做的笔记,分享这份总结给大家,对大家对 CSS 的可以来一次全方位的检漏和排查,感谢原作者 CavsZhouyou 的付出,原文链接放在文章最下方,如果出现错误,希望大家共同指出!

1.介绍一下标准的 CSS 的盒子模型?低版本 IE 的盒子模型有什么不同的?

相关知识点:

(1)有两种盒子模型:IE盒模型(border-box)、W3C标准盒模型(content-box)
(2)盒模型:分为内容(content)、填充(padding)、边界(margin)、边框(border)四个部分

IE盒模型和W3C标准盒模型的区别:

(1)W3C标准盒模型:属性width,height只包含内容content,不包含border和padding
(2)IE盒模型:属性width,height包含content、border和padding,指的是content
+padding+border。

在ie8+浏览器中使用哪个盒模型可以由box-sizing(CSS新增的属性)控制,默认值为content-box,即标准盒模型;
如果将box-sizing设为border-box则用的是IE盒模型。如果在ie6,7,8中DOCTYPE缺失会将盒子模型解释为IE
盒子模型。若在页面中声明了DOCTYPE类型,所有的浏览器都会把盒模型解释为W3C盒模型。

回答:

盒模型都是由四个部分组成的,分别是margin、border、padding和content。

标准盒模型和IE盒模型的区别在于设置width和height时,所对应的范围不同。标准盒模型的width和height属性的
范围只包含了content,而IE盒模型的width和height属性的范围包含了border、padding和content。

一般来说,我们可以通过修改元素的box-sizing属性来改变元素的盒模型。

详细的资料可以参考:
《CSS 盒模型详解》

2.CSS 选择符有哪些?

(1)id选择器(#myid)
(2)类选择器(.myclassname)
(3)标签选择器(div,h1,p)
(4)后代选择器(h1p)
(5)相邻后代选择器(子)选择器(ul>li)
(6)兄弟选择器(li~a)
(7)相邻兄弟选择器(li+a)
(8)属性选择器(a[rel="external"])
(9)伪类选择器(a:hover,li:nth-child)
(10)伪元素选择器(::before、::after)
(11)通配符选择器(*)

3.::before 和:after 中双冒号和单冒号有什么区别?解释一下这 2 个伪元素的作用。

相关知识点:

单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素。(伪元素由双冒号和伪元素名称组成)
双冒号是在当前规范中引入的,用于区分伪类和伪元素。不过浏览器需要同时支持旧的已经存在的伪元素写法,
比如:first-line、:first-letter、:before、:after等,
而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法。

想让插入的内容出现在其它内容前,使用::before,否者,使用::after;
在代码顺序上,::after生成的内容也比::before生成的内容靠后。
如果按堆栈视角,::after生成的内容会在::before生成的内容之上。

回答:

在css3中使用单冒号来表示伪类,用双冒号来表示伪元素。但是为了兼容已有的伪元素的写法,在一些浏览器中也可以使用单冒号
来表示伪元素。

伪类一般匹配的是元素的一些特殊状态,如hover、link等,而伪元素一般匹配的特殊的位置,比如after、before等。

4.伪类与伪元素的区别

css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说,伪类和伪元素是用来修饰不在文档树中的部分,比如,一句
话中的第一个字母,或者是列表中的第一个元素。

伪类用于当已有的元素处于某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的。比如说,当用户悬停在指定的
元素时,我们可以通过:hover来描述这个元素的状态。

伪元素用于创建一些不在文档树中的元素,并为其添加样式。它们允许我们为元素的某些部分设置样式。比如说,我们可以通过::be
fore来在一个元素前增加一些文本,并为这些文本添加样式。虽然用户可以看到这些文本,但是这些文本实际上不在文档树中。

有时你会发现伪元素使用了两个冒号(::)而不是一个冒号(:)。这是CSS3的一部分,并尝试区分伪类和伪元素。大多数浏览
器都支持这两个值。按照规则应该使用(::)而不是(:),从而区分伪类和伪元素。但是,由于在旧版本的W3C规范并未对此进行
特别区分,因此目前绝大多数的浏览器都支持使用这两种方式表示伪元素。

详细资料可以参考:
《总结伪类与伪元素》

5.CSS 中哪些属性可以继承?

相关资料:

每个CSS属性定义的概述都指出了这个属性是默认继承的,还是默认不继承的。这决定了当你没有为元素的属性指定值时该如何计算
值。

当元素的一个继承属性没有指定值时,则取父元素的同属性的计算值。只有文档根元素取该属性的概述中给定的初始值(这里的意思应
该是在该属性本身的定义中的默认值)。

当元素的一个非继承属性(在Mozillacode里有时称之为resetproperty)没有指定值时,则取属性的初始值initialv
alue(该值在该属性的概述里被指定)。

有继承性的属性:

(1)字体系列属性
font、font-family、font-weight、font-size、font-style、font-variant、font-stretch、font-size-adjust

(2)文本系列属性
text-indent、text-align、text-shadow、line-height、word-spacing、letter-spacing、
text-transform、direction、color

(3)表格布局属性
caption-sideborder-collapseempty-cells

(4)列表属性
list-style-type、list-style-image、list-style-position、list-style

(5)光标属性
cursor

(6)元素可见性
visibility

(7)还有一些不常用的;speak,page,设置嵌套引用的引号类型quotes等属性


注意:当一个属性不是继承属性时,可以使用inherit关键字指定一个属性应从父元素继承它的值,inherit关键字用于显式地
指定继承性,可用于任何继承性/非继承性属性。

回答:

每一个属性在定义中都给出了这个属性是否具有继承性,一个具有继承性的属性会在没有指定值的时候,会使用父元素的同属性的值
来作为自己的值。

一般具有继承性的属性有,字体相关的属性,font-size和font-weight等。文本相关的属性,color和text-align等。
表格的一些布局属性、列表属性如list-style等。还有光标属性cursor、元素可见性visibility。

当一个属性不是继承属性的时候,我们也可以通过将它的值设置为inherit来使它从父元素那获取同名的属性值来继承。

详细的资料可以参考:
《继承属性》
《CSS 有哪些属性可以继承?》

6.CSS 优先级算法如何计算?

相关知识点:

CSS的优先级是根据样式声明的特殊性值来判断的。

选择器的特殊性值分为四个等级,如下:

(1)标签内选择符x,0,0,0
(2)ID选择符0,x,0,0
(3)class选择符/属性选择符/伪类选择符    0,0,x,0
(4)元素和伪元素选择符0,0,0,x

计算方法:

(1)每个等级的初始值为0
(2)每个等级的叠加为选择器出现的次数相加
(3)不可进位,比如0,99,99,99
(4)依次表示为:0,0,0,0
(5)每个等级计数之间没关联
(6)等级判断从左向右,如果某一位数值相同,则判断下一位数值
(7)如果两个优先级相同,则最后出现的优先级高,!important也适用
(8)通配符选择器的特殊性值为:0,0,0,0
(9)继承样式优先级最低,通配符样式优先级高于继承样式
(10)!important(权重),它没有特殊性值,但它的优先级是最高的,为了方便记忆,可以认为它的特殊性值为1,0,0,0,0。

计算实例:

(1)#demoa{color:orange;}/*特殊性值:0,1,0,1*/
(2)div#demoa{color:red;}/*特殊性值:0,1,0,2*/


注意:
(1)样式应用时,css会先查看规则的权重(!important),加了权重的优先级最高,当权重相同的时候,会比较规则的特殊性。

(2)特殊性值越大的声明优先级越高。

(3)相同特殊性值的声明,根据样式引入的顺序,后声明的规则优先级高(距离元素出现最近的)

回答:

判断优先级时,首先我们会判断一条属性声明是否有权重,也就是是否在声明后面加上了!important。一条声明如果加上了权重,
那么它的优先级就是最高的,前提是它之后不再出现相同权重的声明。如果权重相同,我们则需要去比较匹配规则的特殊性。

一条匹配规则一般由多个选择器组成,一条规则的特殊性由组成它的选择器的特殊性累加而成。选择器的特殊性可以分为四个等级,
第一个等级是行内样式,为1000,第二个等级是id选择器,为0100,第三个等级是类选择器、伪类选择器和属性选择器,为0010,
第四个等级是元素选择器和伪元素选择器,为0001。规则中每出现一个选择器,就将它的特殊性进行叠加,这个叠加只限于对应的等
级的叠加,不会产生进位。选择器特殊性值的比较是从左向右排序的,也就是说以1开头的特殊性值比所有以0开头的特殊性值要大。
比如说特殊性值为1000的的规则优先级就要比特殊性值为0999的规则高。如果两个规则的特殊性值相等的时候,那么就会根据它们引
入的顺序,后出现的规则的优先级最高。

对于组合声明的特殊性值计算可以参考:
《CSS 优先级计算及应用》
《CSS 优先级计算规则》

7.关于伪类 LVHA 的解释?

a标签有四种状态:链接访问前、链接访问后、鼠标滑过、激活,分别对应四种伪类:link、:visited、:hover、:active;

当链接未访问过时:

(1)当鼠标滑过a链接时,满足:link和:hover两种状态,要改变a标签的颜色,就必须将:hover伪类在:link伪
类后面声明;
(2)当鼠标点击激活a链接时,同时满足:link、:hover、:active三种状态,要显示a标签激活时的样式(:active),
必须将:active声明放到:link和:hover之后。因此得出LVHA这个顺序。

当链接访问过时,情况基本同上,只不过需要将:link换成:visited。

这个顺序能不能变?可以,但也只有:link和:visited可以交换位置,因为一个链接要么访问过要么没访问过,不可能同时满足,
也就不存在覆盖的问题。

8.CSS3 新增伪类有那些?

(1)elem:nth-child(n)选中父元素下的第n个子元素,并且这个子元素的标签名为elem,n可以接受具体的数
值,也可以接受函数。

(2)elem:nth-last-child(n)作用同上,不过是从后开始查找。

(3)elem:last-child选中最后一个子元素。

(4)elem:only-child如果elem是父元素下唯一的子元素,则选中之。

(5)elem:nth-of-type(n)选中父元素下第n个elem类型元素,n可以接受具体的数值,也可以接受函数。

(6)elem:first-of-type选中父元素下第一个elem类型元素。

(7)elem:last-of-type选中父元素下最后一个elem类型元素。

(8)elem:only-of-type如果父元素下的子元素只有一个elem类型元素,则选中该元素。

(9)elem:empty选中不包含子元素和内容的elem类型元素。

(10)elem:target选择当前活动的elem元素。

(11):not(elem)选择非elem元素的每个元素。

(12):enabled    控制表单控件的禁用状态。

(13):disabled        控制表单控件的禁用状态。

(14):checked单选框或复选框被选中。

详细的资料可以参考:
《CSS3 新特性总结(伪类)》
《浅谈 CSS 伪类和伪元素及 CSS3 新增伪类》

9.如何居中 div?

-水平居中:给 div 设置一个宽度,然后添加 margin:0auto 属性

div {
  width: 200px;
  margin: 0auto;
}

-水平居中,利用 text-align:center 实现

.container {
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
  font-size: 0;
}

.box {
  display: inline-block;
  width: 500px;
  height: 400px;
  background-color: pink;
}

-让绝对定位的 div 居中

div {
  position: absolute;
  width: 300px;
  height: 300px;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: pink; /*方便看效果*/
}

-水平垂直居中一

/*确定容器的宽高宽500高300的层设置层的外边距div{*/
position:absolute;/*绝对定位*/
width:500px;
height:300px;
top:50%;
left:50%;
margin:-150px00-250px;/*外边距为自身宽高的一半*/
background-color:pink;/*方便看效果*/
}

-水平垂直居中二

/*未知容器的宽高,利用`transform`属性*/
div {
  position: absolute; /*相对定位或绝对定位均可*/
  width: 500px;
  height: 300px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: pink; /*方便看效果*/
}

-水平垂直居中三

/*利用flex布局实际使用时应考虑兼容性*/
.container {
  display: flex;
  align-items: center; /*垂直居中*/
  justify-content: center; /*水平居中*/
}
.containerdiv {
  width: 100px;
  height: 100px;
  background-color: pink; /*方便看效果*/
}

-水平垂直居中四

/*利用text-align:center和vertical-align:middle属性*/
.container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
  font-size: 0;
  white-space: nowrap;
  overflow: auto;
}

.container::after {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.box {
  display: inline-block;
  width: 500px;
  height: 400px;
  background-color: pink;
  white-space: normal;
  vertical-align: middle;
}

回答:

一般常见的几种居中的方法有:

对于宽高固定的元素

(1)我们可以利用margin:0auto来实现元素的水平居中。

(2)利用绝对定位,设置四个方向的值都为0,并将margin设置为auto,由于宽高固定,因此对应方向实现平分,可以实现水
平和垂直方向上的居中。

(3)利用绝对定位,先将元素的左上角通过top:50%和left:50%定位到页面的中心,然后再通过margin负值来调整元素
的中心点到页面的中心。

(4)利用绝对定位,先将元素的左上角通过top:50%和left:50%定位到页面的中心,然后再通过translate来调整元素
的中心点到页面的中心。

(5)使用flex布局,通过align-items:center和justify-content:center设置容器的垂直和水平方向上为居中对
齐,然后它的子元素也可以实现垂直和水平的居中。

对于宽高不定的元素,上面的后面两种方法,可以实现元素的垂直和水平的居中。

10.display 有哪些值?说明他们的作用。

block    块类型。默认宽度为父元素宽度,可设置宽高,换行显示。
none    元素不显示,并从文档流中移除。
inline    行内元素类型。默认宽度为内容宽度,不可设置宽高,同行显示。
inline-block默认宽度为内容宽度,可以设置宽高,同行显示。
list-item    像块类型元素一样显示,并添加样式列表标记。
table    此元素会作为块级表格来显示。
inherit    规定应该从父元素继承display属性的值。

详细资料可以参考:
《CSSdisplay 属性》

11.position 的值 relative 和 absolute 定位原点是?

相关知识点:

absolute
生成绝对定位的元素,相对于值不为static的第一个父元素的paddingbox进行定位,也可以理解为离自己这一级元素最近的
一级position设置为absolute或者relative的父元素的paddingbox的左上角为原点的。

fixed(老IE不支持)
生成绝对定位的元素,相对于浏览器窗口进行定位。

relative
生成相对定位的元素,相对于其元素本身所在正常位置进行定位。

static
默认值。没有定位,元素出现在正常的流中(忽略top,bottom,left,right,z-index声明)。

inherit
规定从父元素继承position属性的值。

回答:

relative定位的元素,是相对于元素本身的正常位置来进行定位的。

absolute定位的元素,是相对于它的第一个position值不为static的祖先元素的paddingbox来进行定位的。这句话
我们可以这样来理解,我们首先需要找到绝对定位元素的一个position的值不为static的祖先元素,然后相对于这个祖先元
素的paddingbox来定位,也就是说在计算定位距离的时候,padding的值也要算进去。

12.CSS3 有哪些新特性?(根据项目回答)

新增各种CSS选择器    (:not(.input):所有class不是“input”的节点)
圆角        (border-radius:8px)
多列布局    (multi-columnlayout)
阴影和反射    (Shadow\Reflect)
文字特效        (text-shadow)
文字渲染        (Text-decoration)
线性渐变        (gradient)
旋转            (transform)
缩放,定位,倾斜,动画,多背景
例如:transform:\scale(0.85,0.90)\translate(0px,-30px)\skew(-9deg,0deg)\Animation:

13.请解释一下 CSS3 的 Flexbox(弹性盒布局模型),以及适用场景?

相关知识点:

Flex是FlexibleBox的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。行内元素也可以使用Flex布局。注意,设为Flex布局以后,子元素的float、cl
ear和vertical-align属性将失效。

采用Flex布局的元素,称为Flex容器(flexcontainer),简称"容器"。它的所有子元素自动成为容器成员,称为Flex
项目(flexitem),简称"项目"。

容器默认存在两根轴:水平的主轴(mainaxis)和垂直的交叉轴(crossaxis),项目默认沿主轴排列。


以下6个属性设置在容器上。

flex-direction属性决定主轴的方向(即项目的排列方向)。

flex-wrap属性定义,如果一条轴线排不下,如何换行。

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为rownowrap。

justify-content属性定义了项目在主轴上的对齐方式。

align-items属性定义项目在交叉轴上如何对齐。

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。


以下6个属性设置在项目上。

order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。

flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间。浏览器根据这个属性,计算主轴是否有多余空间。它的默认
值为auto,即项目的本来大小。

flex属性是flex-grow,flex-shrink和flex-basis的简写,默认值为01auto。

align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父
元素的align-items属性,如果没有父元素,则等同于stretch。

回答:

flex布局是CSS3新增的一种布局方式,我们可以通过将一个元素的display属性值设置为flex从而使它成为一个flex
容器,它的所有子元素都会成为它的项目。

一个容器默认有两条轴,一个是水平的主轴,一个是与主轴垂直的交叉轴。我们可以使用flex-direction来指定主轴的方向。
我们可以使用justify-content来指定元素在主轴上的排列方式,使用align-items来指定元素在交叉轴上的排列方式。还
可以使用flex-wrap来规定当一行排列不下时的换行方式。

对于容器中的项目,我们可以使用order属性来指定项目的排列顺序,还可以使用flex-grow来指定当排列空间有剩余的时候,
项目的放大比例。还可以使用flex-shrink来指定当排列空间不足时,项目的缩小比例。

详细资料可以参考:
《Flex 布局教程:语法篇》
《Flex 布局教程:实例篇》

14.用纯 CSS 创建一个三角形的原理是什么?

采用的是相邻边框连接处的均分原理。
  将元素的宽高设为0,只设置
  border
  ,把任意三条边隐藏掉(颜色设为
  transparent),剩下的就是一个三角形。
  #demo {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparenttransparentredtransparent;
}

15.一个满屏品字布局如何设计?

简单的方式:
    上面的div宽100%,
    下面的两个div分别宽50%,
    然后用float或者inline使其不换行即可

16.CSS 多列等高如何实现?

(1)利用padding-bottom|margin-bottom正负值相抵,不会影响页面布局的特点。设置父容器设置超出隐藏(overflow:
hidden),这样父容器的高度就还是它里面的列没有设定padding-bottom时的高度,当它里面的任一列高度增加了,则
父容器的高度被撑到里面最高那列的高度,其他比这列矮的列会用它们的padding-bottom补偿这部分高度差。

(2)利用table-cell所有单元格高度都相等的特性,来实现多列等高。

(3)利用flex布局中项目align-items属性默认为stretch,如果项目未设置高度或设为auto,将占满整个容器的高度
的特性,来实现多列等高。

详细资料可以参考:
《前端应该掌握的 CSS 实现多列等高布局》
《CSS:多列等高布局》

17.经常遇到的浏览器的兼容性有哪些?原因,解决方法是什么,常用 hack 的技巧?

(1)png24位的图片在iE6浏览器上出现背景
解决方案:做成PNG8,也可以引用一段脚本处理。

(2)浏览器默认的margin和padding不同
解决方案:加一个全局的*{margin:0;padding:0;}来统一。

(3)IE6双边距bug:在IE6下,如果对元素设置了浮动,同时又设置了margin-left或
margin-right,margin值会加倍。

#box{float:left;width:10px;margin:00010px;}

这种情况之下IE会产生20px的距离
解决方案:在float的标签样式控制中加入_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)

(4)渐进识别的方式,从总体中逐渐排除局部。
首先,巧妙的使用"\9"这一标记,将IE游览器从所有情况中分离出来。
接着,再次使用"+"将IE8和IE7、IE6分离开来,这样IE8已经独立识别。
.bb{
background-color:#f1ee18;/*所有识别*/
.background-color:#00deff\9;/*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}

(5)IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义
属性;Firefox下,只能使用getAttribute()获取自定义属性
解决方法:统一通过getAttribute()获取自定义属性。

(6)IE下,event对象有x、y属性,但是没有pageX、pageY属性;Firefox下,event对象有
pageX、pageY属性,但是没有x、y属性。
解决方法:(条件注释)缺点是在IE浏览器下可能会增加额外的HTTP请求数。

(7)Chrome中文界面下默认会将小于12px的文本强制按照12px显示
解决方法:

1.可通过加入CSS属性-webkit-text-size-adjust:none;解决。但是,在chrome
更新到27版本之后就不可以用了。

2.还可以使用-webkit-transform:scale(0.5);注意-webkit-transform:scale(0.75);
收缩的是整个span的大小,这时候,必须要将span转换成块元素,可以使用display:block/inline-block/...;

(8)超链接访问过后hover样式就不出现了,被点击访问过的超链接样式不再具有hover和active了
解决方法:改变CSS属性的排列顺序L-V-H-A

(9)怪异模式问题:漏写DTD声明,Firefox仍然会按照标准模式来解析网页,但在IE中会触发怪异模
式。为避免怪异模式给我们带来不必要的麻烦,最好养成书写DTD声明的好习惯。

18.li 与 li 之间有看不见的空白间隔是什么原因引起的?有什么解决办法?

浏览器会把inline元素间的空白字符(空格、换行、Tab等)渲染成一个空格。而为了美观。我们通常是一个<li>放在一行,
这导致<li>换行后产生换行字符,它变成一个空格,占用了一个字符的宽度。

解决办法:

(1)为<li>设置float:left。不足:有些容器是不能设置浮动,如左右切换的焦点图等。

(2)将所有<li>写在同一行。不足:代码不美观。

(3)将<ul>内的字符尺寸直接设为0,即font-size:0。不足:<ul>中的其他字符尺寸也被设为0,需要额外重新设定其他
字符尺寸,且在Safari浏览器依然会出现空白间隔。

(4)消除<ul>的字符间隔letter-spacing:-8px,不足:这也设置了<li>内的字符间隔,因此需要将<li>内的字符
间隔设为默认letter-spacing:normal。

详细资料可以参考:
《li 与 li 之间有看不见的空白间隔是什么原因引起的?》

19.为什么要初始化 CSS 样式?

-因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

-当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化。

最简单的初始化方法:*{padding:0;margin:0;}(强烈不建议)

淘宝的样式初始化代码:
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend
,button,input,textarea,th,td{margin:0;padding:0;}
body,button,input,select,textarea{font:12px/1.5tahoma,arial,\5b8b\4f53;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
address,cite,dfn,em,var{font-style:normal;}
code,kbd,pre,samp{font-family:couriernew,courier,monospace;}
small{font-size:12px;}
ul,ol{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
legend{color:#000;}
fieldset,img{border:0;}
button,input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}

20.什么是包含块,对于包含块的理解?

包含块(containingblock)就是元素用来计算和定位的一个框。

(1)根元素(很多场景下可以看成是<html>)被称为“初始包含块”,其尺寸等同于浏览器可视窗口的大小。

(2)对于其他元素,如果该元素的position是relative或者static,则“包含块”由其最近的块容器祖先盒的contentbox
边界形成。

(3)如果元素position:fixed,则“包含块”是“初始包含块”。

(4)如果元素position:absolute,则“包含块”由最近的position不为static的祖先元素建立,具体方式如下:

如果该祖先元素是纯inline元素,则规则略复杂:
•假设给内联元素的前后各生成一个宽度为0的内联盒子(inlinebox),则这两个内联盒子的paddingbox外面的包
围盒就是内联元素的“包含块”;
•如果该内联元素被跨行分割了,那么“包含块”是未定义的,也就是CSS2.1规范并没有明确定义,浏览器自行发挥
否则,“包含块”由该祖先的paddingbox边界形成。

如果没有符合条件的祖先元素,则“包含块”是“初始包含块”。

21.CSS 里的 visibility 属性有个 collapse 属性值是干嘛用的?在不同浏览器下以后什么区别?

(1)对于一般的元素,它的表现跟visibility:hidden;是一样的。元素是不可见的,但此时仍占用页面空间。

(2)但例外的是,如果这个元素是table相关的元素,例如table行,tablegroup,table列,tablecolumngroup,它的
表现却跟display:none一样,也就是说,它们占用的空间也会释放。

在不同浏览器下的区别:

在谷歌浏览器里,使用collapse值和使用hidden值没有什么区别。

在火狐浏览器、Opera和IE11里,使用collapse值的效果就如它的字面意思:table的行会消失,它的下面一行会补充它的位
置。

详细资料可以参考:
《CSS 里的 visibility 属性有个鲜为人知的属性值:collapse》

22.width:auto 和 width:100%的区别

一般而言

width:100%会使元素box的宽度等于父元素的contentbox的宽度。

width:auto会使元素撑满整个父元素,margin、border、padding、content区域会自动分配水平空间。

23.绝对定位元素与非绝对定位元素的百分比计算的区别

绝对定位元素的宽高百分比是相对于临近的position不为static的祖先元素的paddingbox来计算的。

非绝对定位元素的宽高百分比则是相对于父元素的contentbox来计算的。

24.简单介绍使用图片 base64 编码的优点和缺点。

base64编码是一种图片处理格式,通过特定的算法将图片编码成一长串字符串,在页面上显示的时候,可以用该字符串来代替图片的
url属性。

使用base64的优点是:

(1)减少一个图片的HTTP请求

使用base64的缺点是:

(1)根据base64的编码原理,编码后的大小会比原文件大小大1/3,如果把大图片编码到html/css中,不仅会造成文件体
积的增加,影响文件的加载速度,还会增加浏览器对html或css文件解析渲染的时间。

(2)使用base64无法直接缓存,要缓存只能缓存包含base64的文件,比如HTML或者CSS,这相比域直接缓存图片的效果要
差很多。

(3)兼容性的问题,ie8以前的浏览器不支持。

一般一些网站的小图标可以使用base64图片来引入。

详细资料可以参考:
《玩转图片 base64 编码》
《前端开发中,使用 base64 图片的弊端是什么?》
《小 tip:base64:URL 背景图片与 web 页面性能优化》

25.'display'、'position'和'float'的相互关系?

(1)首先我们判断display属性是否为none,如果为none,则position和float属性的值不影响元素最后的表现。

(2)然后判断position的值是否为absolute或者fixed,如果是,则float属性失效,并且display的值应该被
设置为table或者block,具体转换需要看初始转换值。

(3)如果position的值不为absolute或者fixed,则判断float属性的值是否为none,如果不是,则display
的值则按上面的规则转换。注意,如果position的值为relative并且float属性的值存在,则relative相对
于浮动后的最终位置定位。

(4)如果float的值为none,则判断元素是否为根元素,如果是根元素则display属性按照上面的规则转换,如果不是,
则保持指定的display属性值不变。

总的来说,可以把它看作是一个类似优先级的机制,"position:absolute"和"position:fixed"优先级最高,有它存在
的时候,浮动不起作用,'display'的值也需要调整;其次,元素的'float'特性的值不是"none"的时候或者它是根元素
的时候,调整'display'的值;最后,非根元素,并且非浮动元素,并且非绝对定位的元素,'display'特性值同设置值。

详细资料可以参考:
《position 跟 display、margincollapse、overflow、float 这些特性相互叠加后会怎么样?》

26.margin 重叠问题的理解。

相关知识点:

块级元素的上外边距(margin-top)与下外边距(margin-bottom)有时会合并为单个外边距,这样的现象称为“margin合
并”。

产生折叠的必备条件:margin必须是邻接的!

而根据w3c规范,两个margin是邻接的必须满足以下条件:

•必须是处于常规文档流(非float和绝对定位)的块级盒子,并且处于同一个BFC当中。
•没有线盒,没有空隙,没有padding和border将他们分隔开
•都属于垂直方向上相邻的外边距,可以是下面任意一种情况
•元素的margin-top与其第一个常规文档流的子元素的margin-top
•元素的margin-bottom与其下一个常规文档流的兄弟元素的margin-top
•height为auto的元素的margin-bottom与其最后一个常规文档流的子元素的margin-bottom
•高度为0并且最小高度也为0,不包含常规文档流的子元素,并且自身没有建立新的BFC的元素的margin-top
和margin-bottom


margin合并的3种场景:

(1)相邻兄弟元素margin合并。

解决办法:
•设置块状格式化上下文元素(BFC)

(2)父级和第一个/最后一个子元素的margin合并。

解决办法:

对于margin-top合并,可以进行如下操作(满足一个条件即可):
•父元素设置为块状格式化上下文元素;
•父元素设置border-top值;
•父元素设置padding-top值;
•父元素和第一个子元素之间添加内联元素进行分隔。

对于margin-bottom合并,可以进行如下操作(满足一个条件即可):
•父元素设置为块状格式化上下文元素;
•父元素设置border-bottom值;
•父元素设置padding-bottom值;
•父元素和最后一个子元素之间添加内联元素进行分隔;
•父元素设置height、min-height或max-height。

(3)空块级元素的margin合并。

解决办法:
•设置垂直方向的border;
•设置垂直方向的padding;
•里面添加内联元素(直接Space键空格是没用的);
•设置height或者min-height。

回答:

margin重叠指的是在垂直方向上,两个相邻元素的margin发生重叠的情况。

一般来说可以分为四种情形:

第一种是相邻兄弟元素的marin-bottom和margin-top的值发生重叠。这种情况下我们可以通过设置其中一个元素为BFC
来解决。

第二种是父元素的margin-top和子元素的margin-top发生重叠。它们发生重叠是因为它们是相邻的,所以我们可以通过这
一点来解决这个问题。我们可以为父元素设置border-top、padding-top值来分隔它们,当然我们也可以将父元素设置为BFC
来解决。

第三种是高度为auto的父元素的margin-bottom和子元素的margin-bottom发生重叠。它们发生重叠一个是因为它们相
邻,一个是因为父元素的高度不固定。因此我们可以为父元素设置border-bottom、padding-bottom来分隔它们,也可以为
父元素设置一个高度,max-height和min-height也能解决这个问题。当然将父元素设置为BFC是最简单的方法。

第四种情况,是没有内容的元素,自身的margin-top和margin-bottom发生的重叠。我们可以通过为其设置border、pa
dding或者高度来解决这个问题。

27.对 BFC 规范(块级格式化上下文:blockformattingcontext)的理解?

相关知识点:

块格式化上下文(BlockFormattingContext,BFC)是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒
子的区域,也是浮动元素与其他元素的交互限定区域。

通俗来讲

•BFC是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品。
•如果一个元素符合触发BFC的条件,则BFC中的元素布局不受外部影响。

创建BFC

(1)根元素或包含根元素的元素
(2)浮动元素float=left|right或inherit(≠none)
(3)绝对定位元素position=absolute或fixed
(4)display=inline-block|flex|inline-flex|table-cell或table-caption
(5)overflow=hidden|auto或scroll(≠visible)

回答:

BFC指的是块级格式化上下文,一个元素形成了BFC之后,那么它内部元素产生的布局不会影响到外部元素,外部元素的布局也
不会影响到BFC中的内部元素。一个BFC就像是一个隔离区域,和其他区域互不影响。

一般来说根元素是一个BFC区域,浮动和绝对定位的元素也会形成BFC,display属性的值为inline-block、flex这些
属性时也会创建BFC。还有就是元素的overflow的值不为visible时都会创建BFC。

详细资料可以参考:
《深入理解 BFC 和 MarginCollapse》
《前端面试题-BFC(块格式化上下文)》

28.IFC 是什么?

IFC指的是行级格式化上下文,它有这样的一些布局规则:

(1)行级上下文内部的盒子会在水平方向,一个接一个地放置。
(2)当一行不够的时候会自动切换到下一行。
(3)行级上下文的高度由内部最高的内联盒子的高度决定。

详细资料可以参考:

《BFC 和 IFC 的理解(布局)》

29.请解释一下为什么需要清除浮动?清除浮动的方式

浮动元素可以左右移动,直到遇到另一个浮动元素或者遇到它外边缘的包含框。浮动框不属于文档流中的普通流,当元素浮动之后,
不会影响块级元素的布局,只会影响内联元素布局。此时文档流中的普通流就会表现得该浮动框不存在一样的布局模式。当包含框
的高度小于浮动框的时候,此时就会出现“高度塌陷”。

清除浮动是为了清除使用浮动元素产生的影响。浮动的元素,高度会塌陷,而高度的塌陷使我们页面后面的布局不能正常显示。

清除浮动的方式

(1)使用clear属性清除浮动。参考28。

(2)使用BFC块级格式化上下文来清除浮动。参考26。

因为BFC元素不会影响外部元素的特点,所以BFC元素也可以用来清除浮动的影响,因为如果不清除,子元素浮动则父元
素高度塌陷,必然会影响后面元素布局和定位,这显然有违BFC元素的子元素不会影响外部元素的设定。

30.使用 clear 属性清除浮动的原理?

使用clear属性清除浮动,其语法如下:

clear:none|left|right|both

如果单看字面意思,clear:left应该是“清除左浮动”,clear:right应该是“清除右浮动”的意思,实际上,这种解释是有问
题的,因为浮动一直还在,并没有清除。

官方对clear属性的解释是:“元素盒子的边不能和前面的浮动元素相邻。”,我们对元素设置clear属性是为了避免浮动元素
对该元素的影响,而不是清除掉浮动。

还需要注意的一点是clear属性指的是元素盒子的边不能和前面的浮动元素相邻,注意这里“前面的”3个字,也就是clear属
性对“后面的”浮动元素是不闻不问的。考虑到float属性要么是left,要么是right,不可能同时存在,同时由于clear
属性对“后面的”浮动元素不闻不问,因此,当clear:left有效的时候,clear:right必定无效,也就是此时clear:left
等同于设置clear:both;同样地,clear:right如果有效也是等同于设置clear:both。由此可见,clear:left和cle
ar:right这两个声明就没有任何使用的价值,至少在CSS世界中是如此,直接使用clear:both吧。

一般使用伪元素的方式清除浮动

.clear::after{
content:'';
display:table;//也可以是'block',或者是'list-item'
clear:both;
}

clear属性只有块级元素才有效的,而::after等伪元素默认都是内联水平,这就是借助伪元素清除浮动影响时需要设置disp
lay属性值的原因。

31.zoom:1 的清除浮动原理?

清除浮动,触发hasLayout;
zoom属性是IE浏览器的专有属性,它可以设置或检索对象的缩放比例。解决ie下比较奇葩的bug。譬如外边距(margin)
的重叠,浮动清除,触发ie的haslayout属性等。

来龙去脉大概如下:
当设置了zoom的值之后,所设置的元素就会就会扩大或者缩小,高度宽度就会重新计算了,这里一旦改变zoom值时其实也会发
生重新渲染,运用这个原理,也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题。

zoom属性是IE浏览器的专有属性,火狐和老版本的webkit核心的浏览器都不支持这个属性。然而,zoom现在已经被逐步标
准化,出现在CSS3.0规范草案中。

目前非ie由于不支持这个属性,它们又是通过什么属性来实现元素的缩放呢?可以通过css3里面的动画属性scale进行缩放。

32.移动端的布局用过媒体查询吗?

假设你现在正用一台显示设备来阅读这篇文章,同时你也想把它投影到屏幕上,或者打印出来,而显示设备、屏幕投影和打印等这些
媒介都有自己的特点,CSS就是为文档提供在不同媒介上展示的适配方法

当媒体查询为真时,相关的样式表或样式规则会按照正常的级联规被应用。当媒体查询返回假,标签上带有媒体查询的样式表仍将被
下载(只不过不会被应用)。

包含了一个媒体类型和至少一个使用宽度、高度和颜色等媒体属性来限制样式表范围的表达式。CSS3加入的媒体查询使得无需修改
内容便可以使样式应用于某些特定的设备范围。

详细资料可以参考:
《CSS3@media 查询》
《响应式布局和自适应布局详解》

33.使用 CSS 预处理器吗?喜欢哪个?

SASS(SASS、LESS没有本质区别,只因为团队前端都是用的SASS)

34.CSS 优化、提高性能的方法有哪些?

加载性能:

(1)css压缩:将写好的css进行打包压缩,可以减少很多的体积。
(2)css单一样式:当需要下边距和左边距的时候,很多时候选择:margin:top0bottom0;但margin-bottom:bot
tom;margin-left:left;执行的效率更高。
(3)减少使用@import,而建议使用link,因为后者在页面加载时一起加载,前者是等待页面加载完成之后再进行加载。

选择器性能:

(1)关键选择器(keyselector)。选择器的最后面的部分为关键选择器(即用来匹配目标元素的部分)。CSS选择符是从右到
左进行匹配的。当使用后代选择器的时候,浏览器会遍历所有子元素来确定是否是指定的元素等等;

(2)如果规则拥有ID选择器作为其关键选择器,则不要为规则增加标签。过滤掉无关的规则(这样样式系统就不会浪费时间去匹
配它们了)。

(3)避免使用通配规则,如*{}计算次数惊人!只对需要用到的元素进行选择。

(4)尽量少的去对标签进行选择,而是用class。

(5)尽量少的去使用后代选择器,降低选择器的权重值。后代选择器的开销是最高的,尽量将选择器的深度降到最低,最高不要超过
三层,更多的使用类来关联每一个标签元素。

(6)了解哪些属性是可以通过继承而来的,然后避免对这些属性重复指定规则。

渲染性能:

(1)慎重使用高性能属性:浮动、定位。

(2)尽量减少页面重排、重绘。

(3)去除空规则:{}。空规则的产生原因一般来说是为了预留样式。去除这些空规则无疑能减少css文档体积。

(4)属性值为0时,不加单位。

(5)属性值为浮动小数0.**,可以省略小数点之前的0。

(6)标准化各种浏览器前缀:带浏览器前缀的在前。标准属性在后。

(7)不使用@import前缀,它会影响css的加载速度。

(8)选择器优化嵌套,尽量避免层级过深。

(9)css雪碧图,同一页面相近部分的小图标,方便使用,减少页面的请求次数,但是同时图片本身会变大,使用时,优劣考虑清
楚,再使用。

(10)正确使用display的属性,由于display的作用,某些样式组合会无效,徒增样式体积的同时也影响解析性能。

(11)不滥用web字体。对于中文网站来说WebFonts可能很陌生,国外却很流行。webfonts通常体积庞大,而且一些浏
览器在下载webfonts时会阻塞页面渲染损伤性能。

可维护性、健壮性:

(1)将具有相同属性的样式抽离出来,整合并通过class在页面中进行使用,提高css的可维护性。
(2)样式与内容分离:将css代码定义到外部css中。

详细资料可以参考:
《CSS 优化、提高性能的方法有哪些?》
《CSS 优化,提高性能的方法》

35.浏览器是怎样解析 CSS 选择器的?

样式系统从关键选择器开始匹配,然后左移查找规则选择器的祖先元素。只要选择器的子树一直在工作,样式系统就会持续左移,直
到和规则匹配,或者是因为不匹配而放弃该规则。

试想一下,如果采用从左至右的方式读取CSS规则,那么大多数规则读到最后(最右)才会发现是不匹配的,这样做会费时耗能,
最后有很多都是无用的;而如果采取从右向左的方式,那么只要发现最右边选择器不匹配,就可以直接舍弃了,避免了许多无效匹配。

详细资料可以参考:
《探究 CSS 解析原理》

36.在网页中应该使用奇数还是偶数的字体?为什么呢?

(1)偶数字号相对更容易和web设计的其他部分构成比例关系。比如:当我用了14px的正文字号,我可能会在一些地方用14
×0.5=7px的margin,在另一些地方用14×1.5=21px的标题字号。
(2)浏览器缘故,低版本的浏览器ie6会把奇数字体强制转化为偶数,即13px渲染为14px。
(3)系统差别,早期的Windows里,中易宋体点阵只有12和14、15、16px,唯独缺少13px。

详细资料可以参考:
《谈谈网页中使用奇数字体和偶数字体》
《现在网页设计中的为什么少有人用 11px、13px、15px 等奇数的字体?》

37.margin 和 padding 分别适合什么场景使用?

margin是用来隔开元素与元素的间距;padding是用来隔开元素与内容的间隔。
margin用于布局分开元素使元素与元素互不相干。
padding用于元素与内容之间的间隔,让内容(文字)与(包裹)元素之间有一段距离。

何时应当使用margin:
•需要在border外侧添加空白时。
•空白处不需要背景(色)时。
•上下相连的两个盒子之间的空白,需要相互抵消时。如15px+20px的margin,将得到20px的空白。

何时应当时用padding:
•需要在border内测添加空白时。
•空白处需要背景(色)时。
•上下相连的两个盒子之间的空白,希望等于两者之和时。如15px+20px的padding,将得到35px的空白。

38.抽离样式模块怎么写,说出思路,有无实践经验?[阿里航旅的面试题]

我的理解是把常用的css样式单独做成css文件……通用的和业务相关的分离出来,通用的做成样式模块儿共享,业务相关的,放
进业务相关的库里面做成对应功能的模块儿。

详细资料可以参考:
《CSS 规范-分类方法》

39.简单说一下 css3 的 all 属性。

all属性实际上是所有CSS属性的缩写,表示,所有的CSS属性都怎样怎样,但是,不包括unicode-bidi和direction
这两个CSS属性。支持三个CSS通用属性值,initial,inherit,unset。

initial是初始值的意思,也就是该元素元素都除了unicode-bidi和direction以外的CSS属性都使用属性的默认初始
值。

inherit是继承的意思,也就是该元素除了unicode-bidi和direction以外的CSS属性都继承父元素的属性值。

unset是取消设置的意思,也就是当前元素浏览器或用户设置的CSS忽略,然后如果是具有继承特性的CSS,如color,则
使用继承值;如果是没有继承特性的CSS属性,如background-color,则使用初始值。

详细资料可以参考:
《简单了解 CSS3 的 all 属性》

40.为什么不建议使用统配符初始化 css 样式。

采用*{pading:0;margin:0;}这样的写法好处是写起来很简单,但是是通配符,需要把所有的标签都遍历一遍,当网站较大时,
样式比较多,这样写就大大的加强了网站运行的负载,会使网站加载的时候需要很长一段时间,因此一般大型的网站都有分层次的一
套初始化样式。

出于性能的考虑,并不是所有标签都会有padding和margin,因此对常见的具有默认padding和margin的元素初始化即
可,并不需使用通配符*来初始化。

41.absolute 的 containingblock(包含块)计算方式跟正常流有什么不同?

(1)内联元素也可以作为“包含块”所在的元素;

(2)“包含块”所在的元素不是父块级元素,而是最近的position不为static的祖先元素或根元素;

(3)边界是paddingbox而不是contentbox。

42.对于 hasLayout 的理解?

hasLayout是IE特有的一个属性。很多的IE下的cssbug都与其息息相关。在IE中,一个元素要么自己对自身的内容进
行计算大小和组织,要么依赖于父元素来计算尺寸和组织内容。当一个元素的hasLayout属性值为true时,它负责对自己和可
能的子孙元素进行尺寸计算和定位。虽然这意味着这个元素需要花更多的代价来维护自身和里面的内容,而不是依赖于祖先元素来完
成这些工作。

详细资料可以参考:
《CSS 基础篇--CSS 中 IE 浏览器的 hasLayout,IE 低版本的 bug 根源》
《CSS 魔法堂:hasLayout 原来是这样的!》

43.元素竖向的百分比设定是相对于容器的高度吗?

如果是height的话,是相对于包含块的高度。

如果是padding或者margin竖直方向的属性则是相对于包含块的宽度。

44.全屏滚动的原理是什么?用到了 CSS 的哪些属性?(待深入实践)

原理:有点类似于轮播,整体的元素一直排列下去,假设有5个需要展示的全屏页面,那么高度是500%,只是展示100%,容器及容
器内的页面取当前可视区高度,同时容器的父级元素overflow属性值设为hidden,通过更改容器可视区的位置来实现全
屏滚动效果。主要是响应鼠标事件,页面通过CSS的动画效果,进行移动。

overflow:hidden;transition:all1000msease;

详细资料可以参考:
《js 实现网页全屏切换(平滑过渡),鼠标滚动切换》
《用 ES6 写全屏滚动插件》

45.什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的 IE?(待深入了解)

响应式网站设计是一个网站能够兼容多个终端,而不是为每一个终端做一个特定的版本。基本原理是通过媒体查询检测不同的设备屏
幕尺寸做处理。页面头部必须有meta声明的viewport。

详细资料可以参考:
《响应式布局原理》
《响应式布局的实现方法和原理》

46.视差滚动效果,如何给每页做不同的动画?(回到顶部,向下滑动要再次出现,和只出现一次分别怎么做?)

视差滚动是指多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。

详细资料可以参考:
《如何实现视差滚动效果的网页?》

47.如何修改 chrome 记住密码后自动填充表单的黄色背景?

chrome表单自动填充后,input文本框的背景会变成黄色的,通过审查元素可以看到这是由于chrome会默认给自动填充的in
put表单加上input:-webkit-autofill私有属性,然后对其赋予以下样式:

{
background-color:rgb(250,255,189)!important;
background-image:none!important;
color:rgb(0,0,0)!important;
}

对chrome默认定义的background-color,background-image,color使用important是不能提高其优先级的,但是
其他属性可使用。

使用足够大的纯色内阴影来覆盖input输入框的黄色背景,处理如下

input:-webkit-autofill,textarea:-webkit-autofill,select:-webkit-autofill{
-webkit-box-shadow:000px1000pxwhiteinset;
border:1pxsolid#CCC!important;
}

详细资料可以参考:
《去掉 chrome 记住密码后的默认填充样式》
《修改谷歌浏览器 chrome 记住密码后自动填充表单的黄色背景》

48.怎么让 Chrome 支持小于 12px 的文字?

在谷歌下css设置字体大小为12px及以下时,显示都是一样大小,都是默认12px。

解决办法:

(1)可以使用Webkit的内核的-webkit-text-size-adjust的私有CSS属性来解决,只要加了-webkit-text-size
-adjust:none;字体大小就不受限制了。但是chrome更新到27版本之后就不可以用了。所以高版本chrome谷歌浏览器
已经不再支持-webkit-text-size-adjust样式,所以要使用时候慎用。

(2)还可以使用css3的transform缩放属性-webkit-transform:scale(0.5);注意-webkit-transform:scale(0.
75);收缩的是整个元素的大小,这时候,如果是内联元素,必须要将内联元素转换成块元素,可以使用display:block/
inline-block/...;

(3)使用图片:如果是内容固定不变情况下,使用将小于12px文字内容切出做图片,这样不影响兼容也不影响美观。

详细资料可以参考:
《谷歌浏览器不支持 CSS 设置小于 12px 的文字怎么办?》

49.让页面里的字体变清晰,变细用 CSS 怎么做?

webkit内核的私有属性:-webkit-font-smoothing,用于字体抗锯齿,使用后字体看起来会更清晰舒服。

在MacOS测试环境下面设置-webkit-font-smoothing:antialiased;但是这个属性仅仅是面向MacOS,其他操作系统设
置后无效。

详细资料可以参考:
《让字体变的更清晰 CSS 中-webkit-font-smoothing》

50.font-style 属性中 italic 和 oblique 的区别?

italic和oblique这两个关键字都表示“斜体”的意思。

它们的区别在于,italic是使用当前字体的斜体字体,而oblique只是单纯地让文字倾斜。如果当前字体没有对应的斜体字体,
则退而求其次,解析为oblique,也就是单纯形状倾斜。

51.设备像素、css 像素、设备独立像素、dpr、ppi 之间的区别?

设备像素指的是物理像素,一般手机的分辨率指的就是设备像素,一个设备的设备像素是不可变的。

css像素和设备独立像素是等价的,不管在何种分辨率的设备上,css像素的大小应该是一致的,css像素是一个相对单位,它是相
对于设备像素的,一个css像素的大小取决于页面缩放程度和dpr的大小。

dpr指的是设备像素和设备独立像素的比值,一般的pc屏幕,dpr=1。在iphone4时,苹果推出了retina屏幕,它的dpr
为2。屏幕的缩放会改变dpr的值。

ppi指的是每英寸的物理像素的密度,ppi越大,屏幕的分辨率越大。

详细资料可以参考:
《什么是物理像素、虚拟像素、逻辑像素、设备像素,什么又是 PPI,DPI,DPR 和 DIP》
《前端工程师需要明白的「像素」》
《CSS 像素、物理像素、逻辑像素、设备像素比、PPI、Viewport》
《前端开发中像素的概念》

52.layoutviewport、visualviewport 和 idealviewport 的区别?

相关知识点:

如果把移动设备上浏览器的可视区域设为viewport的话,某些网站就会因为viewport太窄而显示错乱,所以这些浏览器就决定
默认情况下把viewport设为一个较宽的值,比如980px,这样的话即使是那些为桌面设计的网站也能在移动浏览器上正常显示了。
ppk把这个浏览器默认的viewport叫做layoutviewport。

layoutviewport的宽度是大于浏览器可视区域的宽度的,所以我们还需要一个viewport来代表浏览器可视区域的大小,ppk把
这个viewport叫做visualviewport。

idealviewport是最适合移动设备的viewport,idealviewport的宽度等于移动设备的屏幕宽度,只要在css中把某一元
素的宽度设为idealviewport的宽度(单位用px),那么这个元素的宽度就是设备屏幕的宽度了,也就是宽度为100%的效果。i
dealviewport的意义在于,无论在何种分辨率的屏幕下,那些针对idealviewport而设计的网站,不需要用户手动缩放,也
不需要出现横向滚动条,都可以完美的呈现给用户。

回答:

移动端一共需要理解三个viewport的概念的理解。

第一个视口是布局视口,在移动端显示网页时,由于移动端的屏幕尺寸比较小,如果网页使用移动端的屏幕尺寸进行布局的话,那么整
个页面的布局都会显示错乱。所以移动端浏览器提供了一个layoutviewport布局视口的概念,使用这个视口来对页面进行布局展
示,一般layoutviewport的大小为980px,因此页面布局不会有太大的变化,我们可以通过拖动和缩放来查看到这个页面。

第二个视口指的是视觉视口,visualviewport指的是移动设备上我们可见的区域的视口大小,一般为屏幕的分辨率的大小。visu
alviewport和layoutviewport的关系,就像是我们通过窗户看外面的风景,视觉视口就是窗户,而外面的风景就是布局视口
中的网页内容。

第三个视口是理想视口,由于layoutviewport一般比visualviewport要大,所以想要看到整个页面必须通过拖动和缩放才
能实现。所以又提出了idealviewport的概念,idealviewport下用户不用缩放和滚动条就能够查看到整个页面,并且页面在
不同分辨率下显示的内容大小相同。idealviewport其实就是通过修改layoutviewport的大小,让它等于设备的宽度,这个
宽度可以理解为是设备独立像素,因此根据idealviewport设计的页面,在不同分辨率的屏幕下,显示应该相同。

详细资料可以参考:
《移动前端开发之 viewport 的深入理解》
《说说移动前端中 viewport(视口)》
《移动端适配知识你到底知多少》

53.position:fixed;在 android 下无效怎么处理?

因为移动端浏览器默认的viewport叫做layoutviewport。在移动端显示时,因为layoutviewport的宽度大于移动端屏幕
的宽度,所以页面会出现滚动条左右移动,fixed的元素是相对layoutviewport来固定位置的,而不是移动端屏幕来固定位置的
,所以会出现感觉fixed无效的情况。

如果想实现fixed相对于屏幕的固定效果,我们需要改变的是viewport的大小为idealviewport,可以如下设置:

<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-sca
le=1.0,user-scalable=no"/>

54.如果需要手动写动画,你认为最小时间间隔是多久,为什么?(阿里)

多数显示器默认频率是60Hz,即1秒刷新60次,所以理论上最小间隔为1/60*1000ms=16.7ms

55.如何让去除 inline-block 元素间间距?

移除空格、使用margin负值、使用font-size:0、letter-spacing、word-spacing

详细资料可以参考:
《去除 inline-block 元素间间距的 N 种方法》

56.overflow:scroll 时不能平滑滚动的问题怎么处理?

以下代码可解决这种卡顿的问题:-webkit-overflow-scrolling:touch;是因为这行代码启用了硬件加速特性,所以滑动很流
畅。

详细资料可以参考:
《解决页面使用 overflow:scroll 在 iOS 上滑动卡顿的问题》

57.有一个高度自适应的 div,里面有两个 div,一个高度 100px,希望另一个填满剩下的高度。

(1)外层div使用position:relative;高度要求自适应的div使用position:absolute;top:100px;bottom:0;
left:0;right:0;

(2)使用flex布局,设置主轴为竖轴,第二个div的flex-grow为1。

详细资料可以参考:
《有一个高度自适应的 div,里面有两个 div,一个高度 100px,希望另一个填满剩下的高度(三种方案)》

58.png、jpg、gif 这些图片格式解释一下,分别什么时候用。有没有了解过 webp?

相关知识点:

(1)BMP,是无损的、既支持索引色也支持直接色的、点阵图。这种图片格式几乎没有对数据进行压缩,所以BMP格式的图片通常
具有较大的文件大小。

(2)GIF是无损的、采用索引色的、点阵图。采用LZW压缩算法进行编码。文件小,是GIF格式的优点,同时,GIF格式还具
有支持动画以及透明的优点。但,GIF格式仅支持8bit的索引色,所以GIF格式适用于对色彩要求不高同时需要文件体积
较小的场景。

(3)JPEG是有损的、采用直接色的、点阵图。JPEG的图片的优点,是采用了直接色,得益于更丰富的色彩,JPEG非常适合用来
存储照片,与GIF相比,JPEG不适合用来存储企业Logo、线框类的图。因为有损压缩会导致图片模糊,而直接色的选用,
又会导致图片文件较GIF更大。

(4)PNG-8是无损的、使用索引色的、点阵图。PNG是一种比较新的图片格式,PNG-8是非常好的GIF格式替代者,在可能的
情况下,应该尽可能的使用PNG-8而不是GIF,因为在相同的图片效果下,PNG-8具有更小的文件体积。除此之外,PNG-8
还支持透明度的调节,而GIF并不支持。现在,除非需要动画的支持,否则我们没有理由使用GIF而不是PNG-8。

(5)PNG-24是无损的、使用直接色的、点阵图。PNG-24的优点在于,它压缩了图片的数据,使得同样效果的图片,PNG-24格
式的文件大小要比BMP小得多。当然,PNG24的图片还是要比JPEG、GIF、PNG-8大得多。

(6)SVG是无损的、矢量图。SVG是矢量图。这意味着SVG图片由直线和曲线以及绘制它们的方法组成。当你放大一个SVG图
片的时候,你看到的还是线和曲线,而不会出现像素点。这意味着SVG图片在放大时,不会失真,所以它非常适合用来绘制企
业Logo、Icon等。

(7)WebP是谷歌开发的一种新图片格式,WebP是同时支持有损和无损压缩的、使用直接色的、点阵图。从名字就可以看出来它是
为Web而生的,什么叫为Web而生呢?就是说相同质量的图片,WebP具有更小的文件体积。现在网站上充满了大量的图片,
如果能够降低每一个图片的文件大小,那么将大大减少浏览器和服务器之间的数据传输量,进而降低访问延迟,提升访问体验。

•在无损压缩的情况下,相同质量的WebP图片,文件大小要比PNG小26%;
•在有损压缩的情况下,具有相同图片精度的WebP图片,文件大小要比JPEG小25%~34%;
•WebP图片格式支持图片透明度,一个无损压缩的WebP图片,如果要支持透明度只需要22%的格外文件大小。

但是目前只有Chrome浏览器和Opera浏览器支持WebP格式,兼容性不太好。

回答:

我了解到的一共有七种常见的图片的格式。

(1)第一种是BMP格式,它是无损压缩的,支持索引色和直接色的点阵图。由于它基本上没有进行压缩,因此它的文件体积一般比
较大。

(2)第二种是GIF格式,它是无损压缩的使用索引色的点阵图。由于使用了LZW压缩方法,因此文件的体积很小。并且GIF还
支持动画和透明度。但因为它使用的是索引色,所以它适用于一些对颜色要求不高且需要文件体积小的场景。

(3)第三种是JPEG格式,它是有损压缩的使用直接色的点阵图。由于使用了直接色,色彩较为丰富,一般适用于来存储照片。但
由于使用的是直接色,可能文件的体积相对于GIF格式来说更大。

(4)第四种是PNG-8格式,它是无损压缩的使用索引色的点阵图。它是GIF的一种很好的替代格式,它也支持透明度的调整,并
且文件的体积相对于GIF格式更小。一般来说如果不是需要动画的情况,我们都可以使用PNG-8格式代替GIF格式。

(5)第五种是PNG-24格式,它是无损压缩的使用直接色的点阵图。PNG-24的优点是它使用了压缩算法,所以它的体积比BMP
格式的文件要小得多,但是相对于其他的几种格式,还是要大一些。

(6)第六种格式是svg格式,它是矢量图,它记录的图片的绘制方式,因此对矢量图进行放大和缩小不会产生锯齿和失真。它一般
适合于用来制作一些网站logo或者图标之类的图片。

(7)第七种格式是webp格式,它是支持有损和无损两种压缩方式的使用直接色的点阵图。使用webp格式的最大的优点是,在相
同质量的文件下,它拥有更小的文件体积。因此它非常适合于网络图片的传输,因为图片体积的减少,意味着请求时间的减小,
这样会提高用户的体验。这是谷歌开发的一种新的图片格式,目前在兼容性上还不是太好。

详细资料可以参考:
《图片格式那么多,哪种更适合你?》

59.浏览器如何判断是否支持 webp 格式图片

(1)宽高判断法。通过创建image对象,将其src属性设置为webp格式的图片,然后在onload事件中获取图片的宽高,如
果能够获取,则说明浏览器支持webp格式图片。如果不能获取或者触发了onerror函数,那么就说明浏览器不支持webp格
式的图片。

(2)canvas判断方法。我们可以动态的创建一个canvas对象,通过canvas的toDataURL将设置为webp格式,然后判断
返回值中是否含有image/webp字段,如果包含则说明支持WebP,反之则不支持。

详细资料可以参考:
《判断浏览器是否支持 WebP 图片》
《toDataURL()》

60.什么是 Cookie 隔离?(或者说:请求资源的时候不要让它带 cookie 怎么做)

网站向服务器请求的时候,会自动带上cookie这样增加表头信息量,使请求变慢。

如果静态文件都放在主域名下,那静态文件请求的时候都带有的cookie的数据提交给server的,非常浪费流量,所以不如隔离开
,静态资源放CDN。

因为cookie有域的限制,因此不能跨域提交请求,故使用非主要域名的时候,请求头中就不会带有cookie数据,这样可以降低请
求头的大小,降低请求时间,从而达到降低整体请求延时的目的。

同时这种方式不会将cookie传入WebServer,也减少了WebServer对cookie的处理分析环节,提高了webserver的
http请求的解析速度。

详细资料可以参考:
《CDN 是什么?使用 CDN 有什么优势?》

61.style 标签写在 body 后与 body 前有什么区别?

页面加载自上而下当然是先加载样式。写在body标签后由于浏览器以逐行方式对HTML文档进行解析,当解析到写在尾部的样式
表(外联或写在style标签)会导致浏览器停止之前的渲染,等待加载且解析样式表完成之后重新渲染,在windows的IE下可
能会出现FOUC现象(即样式失效导致的页面闪烁问题)

62.什么是 CSS 预处理器/后处理器?

CSS预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成
文件,然后开发者就只要使用这种语言进行编码工作。通俗的说,CSS预处理器用一种专门的编程语言,进行Web页面样式设计,然
后再编译成正常的CSS文件。

预处理器例如:LESS、Sass、Stylus,用来预编译Sass或lesscsssprite,增强了css代码的复用性,还有层级、mixin、
变量、循环、函数等,具有很方便的UI组件模块化开发能力,极大的提高工作效率。

CSS后处理器是对CSS进行处理,并最终生成CSS的预处理器,它属于广义上的CSS预处理器。我们很久以前就在用CSS后
处理器了,最典型的例子是CSS压缩工具(如clean-css),只不过以前没单独拿出来说过。还有最近比较火的Autoprefixer,
以CanIUse上的浏览器支持数据为基础,自动处理兼容性问题。

后处理器例如:PostCSS,通常被视为在完成的样式表中根据CSS规范处理CSS,让其更有效;目前最常做的是给CSS属性添加浏
览器私有前缀,实现跨浏览器兼容性的问题。

详细资料可以参考:
《CSS 预处理器和后处理器》

63.阐述一下 CSSSprites

将一个页面涉及到的所有图片都包含到一张大图中去,然后利用CSS的background-image,background-repeat,background
-position的组合进行背景定位。利用CSSSprites能很好地减少网页的http请求,从而很好的提高页面的性能;CSSSprites
能减少图片的字节。

优点:

减少HTTP请求数,极大地提高页面加载速度
增加图片信息重复度,提高压缩比,减少图片大小
更换风格方便,只需在一张或几张图片上修改颜色或样式即可实现

缺点:

图片合并麻烦
维护麻烦,修改一个图片可能需要重新布局整个图片,样式

64.使用 rem 布局的优缺点?

优点:
在屏幕分辨率千差万别的时代,只要将rem与屏幕分辨率关联起来就可以实现页面的整体缩放,使得在设备上的展现都统一起来了。
而且现在浏览器基本都已经支持rem了,兼容性也非常的好。

缺点:
(1)在奇葩的dpr设备上表现效果不太好,比如一些华为的高端机型用rem布局会出现错乱。
(2)使用iframe引用也会出现问题。
(3)rem在多屏幕尺寸适配上与当前两大平台的设计哲学不一致。即大屏的出现到底是为了看得又大又清楚,还是为了看的更多的问
题。

详细资料可以参考:
《css3 的字体大小单位 rem 到底好在哪?》
《VW:是时候放弃 REM 布局了》
《为什么设计稿是 750px》
《使用 Flexible 实现手淘 H5 页面的终端适配》

65.几种常见的 CSS 布局

详细的资料可以参考:
《几种常见的 CSS 布局》

66.画一条 0.5px 的线

采用metaviewport的方式

采用border-image的方式

采用transform:scale()的方式

详细资料可以参考:
《怎么画一条 0.5px 的边(更新)》

67.transition 和 animation 的区别

transition关注的是CSSproperty的变化,property值和时间的关系是一个三次贝塞尔曲线。

animation作用于元素本身而不是样式属性,可以使用关键帧的概念,应该说可以实现更自由的动画效果。

详细资料可以参考:
《CSSanimation 与 CSStransition 有何区别?》
《CSS3Transition 和 Animation 区别及比较》
《CSS 动画简介》
《CSS 动画:animation、transition、transform、translate》

68.什么是首选最小宽度?

“首选最小宽度”,指的是元素最适合的最小宽度。

东亚文字(如中文)最小宽度为每个汉字的宽度。

西方文字最小宽度由特定的连续的英文字符单元决定。并不是所有的英文字符都会组成连续单元,一般会终止于空格(普通空格)、短
横线、问号以及其他非英文字符等。

如果想让英文字符和中文一样,每一个字符都用最小宽度单元,可以试试使用CSS中的word-break:break-all。

69.为什么 height:100%会无效?

对于普通文档流中的元素,百分比高度值要想起作用,其父级必须有一个可以生效的高度值。

原因是如果包含块的高度没有显式指定(即高度由内容决定),并且该元素不是绝对定位,则计算值为auto,因为解释成了auto,
所以无法参与计算。

使用绝对定位的元素会有计算值,即使祖先元素的height计算为auto也是如此。

70.min-width/max-width 和 min-height/max-height 属性间的覆盖规则?

(1)max-width会覆盖width,即使width是行类样式或者设置了!important。

(2)min-width会覆盖max-width,此规则发生在min-width和max-width冲突的时候。

71.内联盒模型基本概念

(1)内容区域(contentarea)。内容区域指一种围绕文字看不见的盒子,其大小仅受字符本身特性控制,本质上是一个字符盒子
(characterbox);但是有些元素,如图片这样的替换元素,其内容显然不是文字,不存在字符盒子之类的,因此,对于这些
元素,内容区域可以看成元素自身。

(2)内联盒子(inlinebox)。“内联盒子”不会让内容成块显示,而是排成一行,这里的“内联盒子”实际指的就是元素的“外在盒
子”,用来决定元素是内联还是块级。该盒子又可以细分为“内联盒子”和“匿名内联盒子”两类。

(3)行框盒子(linebox),每一行就是一个“行框盒子”(实线框标注),每个“行框盒子”又是由一个一个“内联盒子”组成的。

(4)包含块(containingbox),由一行一行的“行框盒子”组成。

72.什么是幽灵空白节点?

“幽灵空白节点”是内联盒模型中非常重要的一个概念,具体指的是:在HTML5文档声明中,内联元素的所有解析和渲染表现就如同
每个行框盒子的前面有一个“空白节点”一样。这个“空白节点”永远透明,不占据任何宽度,看不见也无法通过脚本获取,就好像幽灵
一样,但又确确实实地存在,表现如同文本节点一样,因此,我称之为“幽灵空白节点”。

73.什么是替换元素?

通过修改某个属性值呈现的内容就可以被替换的元素就称为“替换元素”。因此,<img>、<object>、<video>、<iframe>或者表
单元素<textarea>和<input>和<select>都是典型的替换元素。

替换元素除了内容可替换这一特性以外,还有以下一些特性。

(1)内容的外观不受页面上的CSS的影响。用专业的话讲就是在样式表现在CSS作用域之外。如何更改替换元素本身的外观需要
类似appearance属性,或者浏览器自身暴露的一些样式接口,

(2)有自己的尺寸。在Web中,很多替换元素在没有明确尺寸设定的情况下,其默认的尺寸(不包括边框)是300像素×150像
素,如<video>、<iframe>或者<canvas>等,也有少部分替换元素为0像素,如<img>图片,而表单元素的替换元素
的尺寸则和浏览器有关,没有明显的规律。

(3)在很多CSS属性上有自己的一套表现规则。比较具有代表性的就是vertical-align属性,对于替换元素和非替换元素,ve
rtical-align属性值的解释是不一样的。比方说vertical-align的默认值的baseline,很简单的属性值,基线之意,
被定义为字符x的下边缘,而替换元素的基线却被硬生生定义成了元素的下边缘。

(4)所有的替换元素都是内联水平元素,也就是替换元素和替换元素、替换元素和文字都是可以在一行显示的。但是,替换元素默认
的display值却是不一样的,有的是inline,有的是inline-block。

74.替换元素的计算规则?

替换元素的尺寸从内而外分为3类:固有尺寸、HTML尺寸和CSS尺寸。

(1)固有尺寸指的是替换内容原本的尺寸。例如,图片、视频作为一个独立文件存在的时候,都是有着自己的宽度和高度的。

(2)HTML尺寸只能通过HTML原生属性改变,这些HTML原生属性包括<img>的width和height属性、<input>的s
ize属性、<textarea>的cols和rows属性等。

(3)CSS尺寸特指可以通过CSS的width和height或者max-width/min-width和max-height/min-height设置的
尺寸,对应盒尺寸中的contentbox。

这3层结构的计算规则具体如下

(1)如果没有CSS尺寸和HTML尺寸,则使用固有尺寸作为最终的宽高。

(2)如果没有CSS尺寸,则使用HTML尺寸作为最终的宽高。

(3)如果有CSS尺寸,则最终尺寸由CSS属性决定。

(4)如果“固有尺寸”含有固有的宽高比例,同时仅设置了宽度或仅设置了高度,则元素依然按照固有的宽高比例显示。

(5)如果上面的条件都不符合,则最终宽度表现为300像素,高度为150像素。

(6)内联替换元素和块级替换元素使用上面同一套尺寸计算规则。

75.content 与替换元素的关系?

content属性生成的对象称为“匿名替换元素”。

(1)我们使用content生成的文本是无法选中、无法复制的,好像设置了userselect:none声明一般,但是普通元素的文本
却可以被轻松选中。同时,content生成的文本无法被屏幕阅读设备读取,也无法被搜索引擎抓取,因此,千万不要自以为是
地把重要的文本信息使用content属性生成,因为这对可访问性和SEO都很不友好。

(2)content生成的内容不能左右:empty伪类。

(3)content动态生成值无法获取。

76.margin:auto 的填充规则?

margin的'auto'可不是摆设,是具有强烈的计算意味的关键字,用来计算元素对应方向应该获得的剩余间距大小。但是触发mar
gin:auto计算有一个前提条件,就是width或height为auto时,元素是具有对应方向的自动填充特性的。

(1)如果一侧定值,一侧auto,则auto为剩余空间大小。
(2)如果两侧均是auto,则平分剩余空间。

77.margin 无效的情形

(1)display计算值inline的非替换元素的垂直margin是无效的。对于内联替换元素,垂直margin有效,并且没有ma
rgin合并的问题。

(2)表格中的<tr>和<td>元素或者设置display计算值是table-cell或table-row的元素的margin都是无效的。

(3)绝对定位元素非定位方位的margin值“无效”。

(4)定高容器的子元素的margin-bottom或者宽度定死的子元素的margin-right的定位“失效”。

78.border 的特殊性?

(1)border-width却不支持百分比。

(2)border-style的默认值是none,有一部分人可能会误以为是solid。这也是单纯设置border-width或border-col
or没有边框显示的原因。

(3)border-style:double的表现规则:双线宽度永远相等,中间间隔±1。

(4)border-color默认颜色就是color色值。

(5)默认background背景图片是相对于paddingbox定位的。

79.什么是基线和 x-height?

字母x的下边缘(线)就是我们的基线。

x-height指的就是小写字母x的高度,术语描述就是基线和等分线(meanline)(也称作中线,midline)之间的距离。在C
SS世界中,middle指的是基线往上1/2x-height高度。我们可以近似理解为字母x交叉点那个位置。

ex是CSS中的一个相对单位,指的是小写字母x的高度,没错,就是指x-height。ex的价值就在其副业上不受字体和字号影
响的内联元素的垂直居中对齐效果。内联元素默认是基线对齐的,而基线就是x的底部,而1ex就是一个x的高度。

80.line-height 的特殊性?

(1)对于非替换元素的纯内联元素,其可视高度完全由line-height决定。对于文本这样的纯内联元素,line-height就是高
度计算的基石,用专业说法就是指定了用来计算行框盒子高度的基础高度。

(2)内联元素的高度由固定高度和不固定高度组成,这个不固定的部分就是这里的“行距”。换句话说,line-height之所以起作
用,就是通过改变“行距”来实现的。在CSS中,“行距”分散在当前文字的上方和下方,也就是即使是第一行文字,其上方也是
有“行距”的,只不过这个“行距”的高度仅仅是完整“行距”高度的一半,因此,也被称为“半行距”。

(3)行距=line-height-font-size。

(4)border以及line-height等传统CSS属性并没有小数像素的概念。如果标注的是文字上边距,则向下取整;如果是文字下
边距,则向上取整。

(5)对于纯文本元素,line-height直接决定了最终的高度。但是,如果同时有替换元素,则line-height只能决定最小高度。

(6)对于块级元素,line-height对其本身是没有任何作用的,我们平时改变line-height,块级元素的高度跟着变化实际上是
通过改变块级元素里面内联级别元素占据的高度实现的。

(7)line-height的默认值是normal,还支持数值、百分比值以及长度值。为数值类型时,其最终的计算值是和当前font-si
ze相乘后的值。为百分比值时,其最终的计算值是和当前font-size相乘后的值。为长度值时原意不变。

(8)如果使用数值作为line-height的属性值,那么所有的子元素继承的都是这个值;但是,如果使用百分比值或者长度值作为
属性值,那么所有的子元素继承的是最终的计算值。

(9)无论内联元素line-height如何设置,最终父级元素的高度都是由数值大的那个line-height决定的。

(10)只要有“内联盒子”在,就一定会有“行框盒子”,就是每一行内联元素外面包裹的一层看不见的盒子。然后,重点来了,在每个
“行框盒子”前面有一个宽度为0的具有该元素的字体和行高属性的看不见的“幽灵空白节点”。

81.vertical-align 的特殊性?

(1)vertical-align的默认值是baseline,即基线对齐,而基线的定义是字母x的下边缘。因此,内联元素默认都是沿着字
母x的下边缘对齐的。对于图片等替换元素,往往使用元素本身的下边缘作为基线。:一个inline-block元素,如果里面
没有内联元素,或者overflow不是visible,则该元素的基线就是其margin底边缘;否则其基线就是元素里面最后一行
内联元素的基线。

(2)vertical-align:top就是垂直上边缘对齐,如果是内联元素,则和这一行位置最高的内联元素的顶部对齐;如果display
计算值是table-cell的元素,我们不妨脑补成<td>元素,则和<tr>元素上边缘对齐。

(3)vertical-align:middle是中间对齐,对于内联元素,元素的垂直中心点和行框盒子基线往上1/2x-height处对齐。对
于table-cell元素,单元格填充盒子相对于外面的表格行居中对齐。

(4)vertical-align支持数值属性,根据数值的不同,相对于基线往上或往下偏移,如果是负值,往下偏移,如果是正值,往上
偏移。

(5)vertical-align属性的百分比值则是相对于line-height的计算值计算的。

(6)vertical-align起作用是有前提条件的,这个前提条件就是:只能应用于内联元素以及display值为table-cell的元
素。

(7)table-cell元素设置vertical-align垂直对齐的是子元素,但是其作用的并不是子元素,而是table-cell元素自身。

82.overflow 的特殊性?

(1)一个设置了overflow:hidden声明的元素,假设同时存在border属性和padding属性,则当子元素内容超出容器宽度
高度限制的时候,剪裁的边界是borderbox的内边缘,而非paddingbox的内边缘。

(2)HTML中有两个标签是默认可以产生滚动条的,一个是根元素<html>,另一个是文本域<textarea>。

(3)滚动条会占用容器的可用宽度或高度。

(4)元素设置了overflow:hidden声明,里面内容高度溢出的时候,滚动依然存在,仅仅滚动条不存在!

83.无依赖绝对定位是什么?

没有设置left/top/right/bottom属性值的绝对定位称为“无依赖绝对定位”。

无依赖绝对定位其定位的位置和没有设置position:absolute时候的位置相关。

84.absolute 与 overflow 的关系?

(1)如果overflow不是定位元素,同时绝对定位元素和overflow容器之间也没有定位元素,则overflow无法对absolute
元素进行剪裁。

(2)如果overflow的属性值不是hidden而是auto或者scroll,即使绝对定位元素高宽比overflow元素高宽还要大,也
都不会出现滚动条。

(3)overflow元素自身transform的时候,Chrome和Opera浏览器下的overflow剪裁是无效的。

85.clip 裁剪是什么?

所谓“可访问性隐藏”,指的是虽然内容肉眼看不见,但是其他辅助设备却能够进行识别和访问的隐藏。

clip剪裁被我称为“最佳可访问性隐藏”的另外一个原因就是,它具有更强的普遍适应性,任何元素、任何场景都可以无障碍使用。

86.relative 的特殊性?

(1)相对定位元素的left/top/right/bottom的百分比值是相对于包含块计算的,而不是自身。注意,虽然定位位移是相对自身,但是百分比值的计算值不是。

(2)top和bottom这两个垂直方向的百分比值计算跟height的百分比值是一样的,都是相对高度计算的。同时,如果包含块的高度是auto,那么计算值是0,偏移无效,也就是说,如果父元素没有设定高度或者不是“格式化高度”,那么relative类似top:20%的代码等同于top:0。

(3)当相对定位元素同时应用对立方向定位值的时候,也就是top/bottom和left/right同时使用的时候,只有一个方向的定位属性会起作用。而谁起作用则是与文档流的顺序有关的,默认的文档流是自上而下、从左往右,因此top/bottom同时使用的时候,bottom失效;left/right同时使用的时候,right失效。

87.什么是层叠上下文?

层叠上下文,英文称作stackingcontext,是HTML中的一个三维的概念。如果一个元素含有层叠上下文,我们可以理解为这个元
素在z轴上就“高人一等”。

层叠上下文元素有如下特性:

(1)层叠上下文的层叠水平要比普通元素高(原因后面会说明)。
(2)层叠上下文可以阻断元素的混合模式。
(3)层叠上下文可以嵌套,内部层叠上下文及其所有子元素均受制于外部的“层叠上下文”。
(4)每个层叠上下文和兄弟元素独立,也就是说,当进行层叠变化或渲染的时候,只需要考虑后代元素。
(5)每个层叠上下文是自成体系的,当元素发生层叠的时候,整个元素被认为是在父层叠上下文的层叠顺序中。


层叠上下文的创建:

(1)页面根元素天生具有层叠上下文,称为根层叠上下文。根层叠上下文指的是页面根元素,可以看成是<html>元素。因此,页面中所有的元素一定处于至少一个“层叠结界”中。

(2)对于position值为relative/absolute以及Firefox/IE浏览器(不包括Chrome浏览器)下含有position:fixed声明的定位元素,当其z-index值不是auto的时候,会创建层叠上下文。Chrome等WebKit内核浏览器下,position:fixed元素天然层叠上下文元素,无须z-index为数值。根据我的测试,目前IE和Firefox仍是老套路。

(3)其他一些CSS3属性,比如元素的opacity值不是1。

88.什么是层叠水平?

层叠水平,英文称作stackinglevel,决定了同一个层叠上下文中元素在z轴上的显示顺序。

显而易见,所有的元素都有层叠水平,包括层叠上下文元素,也包括普通元素。然而,对普通元素的层叠水平探讨只局限在当前层叠上
下文元素中。

89.元素的层叠顺序?

层叠顺序,英文称作 stackingorder,表示元素发生层叠时有着特定的垂直显示顺序。

层叠顺序

90.层叠准则?

(1)谁大谁上:当具有明显的层叠水平标识的时候,如生效的z-index属性值,在同一个层叠上下文领域,层叠水平值大的那一个覆盖小的那一个。

(2)后来居上:当元素的层叠水平一致、层叠顺序相同的时候,在DOM流中处于后面的元素会覆盖前面的元素。

91.font-weight 的特殊性?

如果使用数值作为font-weight属性值,必须是100~900的整百数。因为这里的数值仅仅是外表长得像数值,实际上是一个具有特定含义的关键字,并且这里的数值关键字和字母关键字之间是有对应关系的。

92.text-indent 的特殊性?

(1)text-indent仅对第一行内联盒子内容有效。

(2)非替换元素以外的display计算值为inline的内联元素设置text-indent值无效,如果计算值inline-block/inli
ne-table则会生效。

(3)<input>标签按钮text-indent值无效。

(4)<button>标签按钮text-indent值有效。

(5)text-indent的百分比值是相对于当前元素的“包含块”计算的,而不是当前元素。

93.letter-spacing 与字符间距?

letter-spacing可以用来控制字符之间的间距,这里说的“字符”包括英文字母、汉字以及空格等。

letter-spacing具有以下一些特性。

(1)继承性。
(2)默认值是normal而不是0。虽然说正常情况下,normal的计算值就是0,但两者还是有差别的,在有些场景下,letter-spacing会调整normal的计算值以实现更好的版面布局。
(3)支持负值,且值足够大的时候,会让字符形成重叠,甚至反向排列。
(4)和text-indent属性一样,无论值多大或多小,第一行一定会保留至少一个字符。
(5)支持小数值,即使0.1px也是支持的。
(6)暂不支持百分比值。

94.word-spacing 与单词间距?

letter-spacing作用于所有字符,但word-spacing仅作用于空格字符。换句话说,word-spacing的作用就是增加空格的间隙
宽度。

95.white-space 与换行和空格的控制?

white-space属性声明了如何处理元素内的空白字符,这类空白字符包括Space(空格)键、Enter(回车)键、Tab(制表符)
键产生的空白。因此,white-space可以决定图文内容是否在一行显示(回车空格是否生效),是否显示大段连续空白(空格是否
生效)等。

其属性值包括下面这些。
•normal:合并空白字符和换行符。
•pre:空白字符不合并,并且内容只在有换行符的地方换行。
•nowrap:该值和normal一样会合并空白字符,但不允许文本环绕。
•pre-wrap:空白字符不合并,并且内容只在有换行符的地方换行,同时允许文本环绕。
•pre-line:合并空白字符,但只在有换行符的地方换行,允许文本环绕。

96.隐藏元素的 background-image 到底加不加载?

相关知识点:

根据测试,一个元素如果display计算值为none,在IE浏览器下(IE8~IE11,更高版本不确定)依然会发送图片请求,Fire
fox浏览器不会,至于Chrome和Safari浏览器则似乎更加智能一点:如果隐藏元素同时又设置了background-image,则图片
依然会去加载;如果是父元素的display计算值为none,则背景图不会请求,此时浏览器或许放心地认为这个背景图暂时是不会使
用的。

如果不是background-image,而是<img>元素,则设置display:none在所有浏览器下依旧都会请求图片资源。

还需要注意的是如果设置的样式没有对应的元素,则background-image也不会加载。hover情况下的background-image,在触
发时加载。

回答:

-(1)元素的背景图片

-元素本身设置 display:none,会请求图片 -父级元素设置 display:none,不会请求图片 -样式没有元素使用,不会请求
-:hover 样式下,触发时请求

-(2)img 标签图片任何情况下都会请求图片

详细资料可以参考:
《CSS 控制前端图片 HTTP 请求的各种情况示例》

97.如何实现单行/多行文本溢出的省略(...)?

/*单行文本溢出*/
p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*多行文本溢出*/
p {
  position: relative;
  line-height: 1.5em;
  /*高度为需要显示的行数*行高,比如这里我们显示两行,则为3*/
  height: 3em;
  overflow: hidden;
}

p:after {
  content: "...";
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #fff;
}

详细资料可以参考:
《【CSS/JS】如何实现单行/多行文本溢出的省略》
《CSS 多行文本溢出省略显示》

98.常见的元素隐藏方式?

-(1)使用 display:none;隐藏元素,渲染树不会包含该渲染对象,因此该元素不会在页面中占据位置,也不会响应绑定的监听事件。

-(2)使用 visibility:hidden;隐藏元素。元素在页面中仍占据空间,但是不会响应绑定的监听事件。

-(3)使用 opacity:0;将元素的透明度设置为 0,以此来实现元素的隐藏。元素在页面中仍然占据空间,并且能够响应元素绑定的监听事件。

-(4)通过使用绝对定位将元素移除可视区域内,以此来实现元素的隐藏。

-(5)通过 z-index 负值,来使其他元素遮盖住该元素,以此来实现隐藏。

-(6)通过 clip/clip-path 元素裁剪的方法来实现元素的隐藏,这种方法下,元素仍在页面中占据位置,但是不会响应绑定的监听事件。

-(7)通过 transform:scale(0,0)来将元素缩放为 0,以此来实现元素的隐藏。这种方法下,元素仍在页面中占据位置,但是不会响应绑定的监听事件。

详细资料可以参考:
《CSS 隐藏元素的八种方法》

99.css 实现上下固定中间自适应布局?

利用绝对定位实现body {
  padding: 0;
  margin: 0;
}

.header {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100px;
  background: red;
}

.container {
  position: absolute;
  top: 100px;
  bottom: 100px;
  width: 100%;
  background: green;
}

.footer {
  position: absolute;
  bottom: 0;
  height: 100px;
  width: 100%;
  background: red;
}

利用flex布局实现html,
body {
  height: 100%;
}

body {
  display: flex;
  padding: 0;
  margin: 0;
  flex-direction: column;
}

.header {
  height: 100px;
  background: red;
}

.container {
  flex-grow: 1;
  background: green;
}

.footer {
  height: 100px;
  background: red;
}

详细资料可以参考:
《css 实现上下固定中间自适应布局》

100.css 两栏布局的实现?

相关资料:

/*两栏布局一般指的是页面中一共两栏,左边固定,右边自适应的布局,一共有四种实现的方式。*/
/*以左边宽度固定为200px为例*/

/*(1)利用浮动,将左边元素宽度设置为200px,并且设置向左浮动。将右边元素的margin-left设置为200px,宽度设置为auto(默认为auto,撑满整个父元素)。*/
.outer {
  height: 100px;
}

.left {
  float: left;

  height: 100px;
  width: 200px;

  background: tomato;
}

.right {
  margin-left: 200px;

  width: auto;
  height: 100px;

  background: gold;
}

/*(2)第二种是利用flex布局,将左边元素的放大和缩小比例设置为0,基础大小设置为200px。将右边的元素的放大比例设置为1,缩小比例设置为1,基础大小设置为auto。*/
.outer {
  display: flex;

  height: 100px;
}

.left {
  flex-shrink: 0;
  flex-grow: 0;
  flex-basis: 200px;

  background: tomato;
}

.right {
  flex: auto;
  /*11auto*/

  background: gold;
}

/*(3)第三种是利用绝对定位布局的方式,将父级元素设置相对定位。左边元素设置为absolute定位,并且宽度设置为
200px。将右边元素的margin-left的值设置为200px。*/
.outer {
  position: relative;

  height: 100px;
}

.left {
  position: absolute;

  width: 200px;
  height: 100px;

  background: tomato;
}

.right {
  margin-left: 200px;
  height: 100px;

  background: gold;
}

/*(4)第四种还是利用绝对定位的方式,将父级元素设置为相对定位。左边元素宽度设置为200px,右边元素设置为绝对定位,左边定位为200px,其余方向定位为0。*/
.outer {
  position: relative;

  height: 100px;
}

.left {
  width: 200px;
  height: 100px;

  background: tomato;
}

.right {
  position: absolute;

  top: 0;
  right: 0;
  bottom: 0;
  left: 200px;

  background: gold;
}

《两栏布局 demo 展示》

回答:

两栏布局一般指的是页面中一共两栏,左边固定,右边自适应的布局,一共有四种实现的方式。

以左边宽度固定为 200px 为例

-(1)利用浮动,将左边元素宽度设置为 200px,并且设置向左浮动。将右边元素的 margin-left 设置为 200px,宽度设置为 auto(默认为 auto,撑满整个父元素)。

-(2)第二种是利用 flex 布局,将左边元素的放大和缩小比例设置为 0,基础大小设置为 200px。将右边的元素的放大比例设置为 1,缩小比例设置为 1,基础大小设置为 auto。

-(3)第三种是利用绝对定位布局的方式,将父级元素设置相对定位。左边元素设置为 absolute 定位,并且宽度设置为 200px。将右边元素的 margin-left 的值设置为 200px。

-(4)第四种还是利用绝对定位的方式,将父级元素设置为相对定位。左边元素宽度设置为 200px,右边元素设置为绝对定位,左边定位为 200px,其余方向定位为 0。

101.css 三栏布局的实现?

相关资料:

/*三栏布局一般指的是页面中一共有三栏,左右两栏宽度固定,中间自适应的布局,一共有五种实现方式。

这里以左边宽度固定为100px,右边宽度固定为200px为例。*/

/*(1)利用绝对定位的方式,左右两栏设置为绝对定位,中间设置对应方向大小的margin的值。*/
.outer {
  position: relative;
  height: 100px;
}

.left {
  position: absolute;

  width: 100px;
  height: 100px;
  background: tomato;
}

.right {
  position: absolute;
  top: 0;
  right: 0;

  width: 200px;
  height: 100px;
  background: gold;
}

.center {
  margin-left: 100px;
  margin-right: 200px;
  height: 100px;
  background: lightgreen;
}

/*(2)利用flex布局的方式,左右两栏的放大和缩小比例都设置为0,基础大小设置为固定的大小,中间一栏设置为auto*/
.outer {
  display: flex;
  height: 100px;
}

.left {
  flex: 00100px;
  background: tomato;
}

.right {
  flex: 00200px;
  background: gold;
}

.center {
  flex: auto;
  background: lightgreen;
}

/*(3)利用浮动的方式,左右两栏设置固定大小,并设置对应方向的浮动。中间一栏设置左右两个方向的margin值,注意这种方式,中间一栏必须放到最后。*/
.outer {
  height: 100px;
}

.left {
  float: left;
  width: 100px;
  height: 100px;
  background: tomato;
}

.right {
  float: right;
  width: 200px;
  height: 100px;
  background: gold;
}

.center {
  height: 100px;
  margin-left: 100px;
  margin-right: 200px;
  background: lightgreen;
}

/*(4)双飞翼布局,利用浮动和负边距来实现。父级元素设置左右的pedding,三列均设置向左浮动,中间一列放在最前面,宽度设置为父级元素的宽度,因此后面两列都被挤到了下一行,通过设置margin负值将其移动到上一行,再利用相对定位,定位到两边。*/
.outer {
  height: 100px;
  padding-left: 100px;
  padding-right: 200px;
}

.left {
  position: relative;
  left: -100px;

  float: left;
  margin-left: -100%;

  width: 100px;
  height: 100px;
  background: tomato;
}

.right {
  position: relative;
  left: 200px;

  float: right;
  margin-left: -200px;

  width: 200px;
  height: 100px;
  background: gold;
}

.center {
  float: left;

  width: 100%;
  height: 100px;
  background: lightgreen;
}

/*(5)双飞翼布局,双飞翼布局相对于圣杯布局来说,左右位置的保留是通过中间列的margin值来实现的,而不是通过父元
素的pedding来实现的。本质上来说,也是通过浮动和外边距负值来实现的。*/

.outer {
  height: 100px;
}

.left {
  float: left;
  margin-left: -100%;

  width: 100px;
  height: 100px;
  background: tomato;
}

.right {
  float: left;
  margin-left: -200px;

  width: 200px;
  height: 100px;
  background: gold;
}

.wrapper {
  float: left;

  width: 100%;
  height: 100px;
  background: lightgreen;
}

.center {
  margin-left: 100px;
  margin-right: 200px;
  height: 100px;
}

《三栏布局 demo 展示》

回答:

三栏布局一般指的是页面中一共有三栏,左右两栏宽度固定,中间自适应的布局,一共有五种实现方式。

这里以左边宽度固定为100px,右边宽度固定为200px为例。

(1)利用绝对定位的方式,左右两栏设置为绝对定位,中间设置对应方向大小的margin的值。

(2)利用flex布局的方式,左右两栏的放大和缩小比例都设置为0,基础大小设置为固定的大小,中间一栏设置为auto。

(3)利用浮动的方式,左右两栏设置固定大小,并设置对应方向的浮动。中间一栏设置左右两个方向的margin值,注意这种方式,中间一栏必须放到最后。

(4)圣杯布局,利用浮动和负边距来实现。父级元素设置左右的pedding,三列均设置向左浮动,中间一列放在最前面,宽度设置为父级元素的宽度,因此后面两列都被挤到了下一行,通过设置margin负值将其移动到上一行,再利用相对定位,定位到两边。双飞翼布局中间列的宽度不能小于两边任意列的宽度,而双飞翼布局则不存在这个问题。

(5)双飞翼布局,双飞翼布局相对于圣杯布局来说,左右位置的保留是通过中间列的margin值来实现的,而不是通过父元素的pedding来实现的。本质上来说,也是通过浮动和外边距负值来实现的。

102.实现一个宽高自适应的正方形

/*1.第一种方式是利用vw来实现*/
.square {
  width: 10%;
  height: 10vw;
  background: tomato;
}

/*2.第二种方式是利用元素的margin/padding百分比是相对父元素width的性质来实现*/
.square {
  width: 20%;
  height: 0;
  padding-top: 20%;
  background: orange;
}

/*3.第三种方式是利用子元素的margin-top的值来实现的*/
.square {
  width: 30%;
  overflow: hidden;
  background: yellow;
}

.square::after {
  content: "";
  display: block;
  margin-top: 100%;
}

《自适应正方形 demo 展示》

103.实现一个三角形

/*三角形的实现原理是利用了元素边框连接处的等分原理。*/
.triangle {
  width: 0;
  height: 0;
  border-width: 100px;
  border-style: solid;
  border-color: tomatotransparenttransparenttransparent;
}

《三角形 demo 展示》

104.一个自适应矩形,水平垂直居中,且宽高比为 2:1

/*实现原理参考自适应正方形和水平居中方式*/
.box {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;

  width: 10%;
  height: 0;
  padding-top: 20%;
  background: tomato;
}

推荐

笔者再次墙裂推荐收藏这篇原文,转载于 CavsZhouyou - 🐜 前端面试复习笔记,这个仓库是原作者校招时的前端复习笔记,主要总结一些比较重要的知识点和前端面试问题,希望对大家有所帮助。

最后如果文章和笔记能带您一丝帮助或者启发,请不要吝啬你的赞和收藏,你的肯定是我前进的最大动力😁

查看原文

Lifault 收藏了文章 · 3月24日

Git 快速上手

一、安装 Git

二、设置 Git

生成密钥

  • 查看是否已经有了ssh密钥:cd ~/.ssh
  • 如果没有密钥则不会有此文件夹,有则备份删除。
  • ssh-keygen -t rsa -C "xxx@xxx.com"

上传密钥

  • 以github为例,依次点击Setting->SSH and GPB keys->New SSH Key,复制粘贴生成的.pub文件中的秘钥
  • 然后就可以用ssh协议,拉取推送代码了

设置全局基础配置

  • git config --global user.name "xxx" // 请换成你自己的名字
  • git config --global user.email "xxx@xx.com" // 请换成你自己的邮箱
  • git config --global push.default simple // 要求 Git 版本 1.9.5 以上
  • git config --global core.autocrlf false // 让Git不要管Windows/Unix换行符转换的事
  • git config --global core.ignorecase false // windows设置大小写敏感

三、基本工作流程

先附上 Git备忘清单
记着先pull再push,冲突都在本地解决
最后点赞收藏一条龙,硬核植入,哈哈

开始一个工作区

  • init 创建一个空的 Git 仓库或重新初始化一个已存在的仓库
  • clone 使用 SSH(推荐) 或 HTTP 协议,克隆仓库到一个新目录(推荐)
  • git config --global credential.helper store // 记住git帐号密码(http时避免每次提交都要输入)

在当前变更上工作

  • add 添加文件内容至索引
  • mv 移动或重命名一个文件、目录或符号链接
  • restore 恢复工作区文件
  • rm 从工作区和索引中删除文件

检查历史和状态

  • bisect 通过二分查找定位引入 bug 的提交
  • diff 显示提交之间、提交和工作区之间等的差异
  • grep 输出和模式匹配的行
  • log 显示提交日志
  • show 显示各种类型的对象
  • status 显示工作区状态

扩展、标记和调校您的历史记录

  • branch 列出、创建或删除分支
  • commit 记录变更到仓库
  • merge 合并两个或更多开发历史
  • rebase 在另一个分支上重新应用提交
  • reset 重置当前 HEAD 到指定状态
  • switch 切换分支
  • tag 创建、列出、删除或校验一个 GPG 签名的标签对象

协同

  • fetch 从另外一个仓库下载对象和引用
  • pull 获取并整合另外的仓库或一个本地分支
  • push 更新远程引用和相关的对象

四、Git 工具

桌面工具

Git 官方的图形化界面

  • Git GUI (优势:commit 前代码改动的浏览和挑选)
  1. 命令行敲 git gui
  2. Windows Explorer,适当目录下,右键菜单,Git GUI Here
  • Gitk (优势:显示版本树、历史信息)
  1. 命令行敲 gitk --all &
  2. Git GUI -> 菜单 -> 版本库 -> 图示所有分支的历史

其他备选

  • TortoiseGit (Windows)
  • SourceTree (OS X 和 Windows)

Git flow工具

安装

OS X
brew install git-flow

Linux
apt-get install git-flow

Windows
wget -q -O - --no-check-certificate https://github.com/nvie/gitflow/raw/develop/contrib/gitflow-installer.sh | bash

五、Git flow工作流

约定

flow.png

使用

  • 初始化: git flow init
  • 开始新Feature: git flow feature start MYFEATURE
  • Publish一个Feature(也就是push到远程): git flow feature publish MYFEATURE
  • 获取Publish的Feature: git flow feature pull origin MYFEATURE
  • 完成一个Feature: git flow feature finish MYFEATURE
  • 开始一个Release: git flow release start RELEASE [BASE]
  • Publish一个Release: git flow release publish RELEASE
  • 发布Release: git flow release finish RELEASE
  • 别忘了git push --tags
  • 开始一个Hotfix: git flow hotfix start VERSION [BASENAME]
  • 发布一个Hotfix: git flow hotfix finish VERSION

六、常见问题

1、Git stash暂存修改

当我们在开发项目的时候,突然来一个变更需要修改,我们除了将当前项目提交(commit)后切换(checkout) 到其他分支外,我们还可以先将当前的修改暂存(stash)起来,然后再切换(checkout)到其他分支,而不需要提交(commit),这样就可以减少一个 commit (虽然可以使用 git commit --amend 来修改最后一次提交 )

暂存修改

  • git stash 或 git stash save "注释" 来暂存修改,已经被 git 跟踪,只是修改了代码(而不是新增)文件
  • 如果有新添加的文件,那么就需要添加 -a 参数(如,git stash -a 或 git stash save -a "注释"),或先 git add . 然后再使用 git stash 或 git stash save "注释" 来暂存修改

取出修改

  • git stash pop 取出最近的一个暂存,并从 stash list 中删除该暂存记录
  • git stash apply stash@{id} 取出某个暂存记录,但不会删除记录,stash@{id}里面的id默认从0开始,最近的暂存为0

暂存列表

  • git stash list 查看 stash 列表
  • git stash drop stash@{id} 删除某一个修改暂存
  • git stash clear 清空所有的修改暂存

2、查看 Git日志

git log

  • 显示所有提交过的版本信息
  • 加上参数 --pretty=oneline,过滤显示版本号和提交时的备注信息

git reflog

  • 查看所有分支的所有操作记录(包括已经被删除的 commit 记录和 reset 的操作)

自由穿梭 Git版本

  • git reset --hard HEAD~1 退回到上一个版本
  • 通过 git reflog 找到被删除的commitid
  • git reset --hard commitid 就可以回到指定版本

3、git cherry-pick挑拣提交

获取某一个分支的单笔提交,并作为一个新的提交引入到你当前分支上。当我们需要在本地合入其他分支的提交时,如果我们不想对整个分支进行合并,而是只想将某一次提交合入到本地当前分支上,那么就可以使用git cherry-pick

  • 1、首先,切换到develop分支,敲 git log 命令,查找需要合并的commit记录,比如commitID:7fcb3defff;
  • 2、然后,切换到master分支,使用 git cherry-pick 7fcb3defff  命令,就把该条commit记录合并到了master分支,这只是在本地合并到了master分支;
  • 3、最后,git push 提交到master远程,至此,就把develop分支的这条commit所涉及的更改合并到了master分支。

常用options:

  • --continue 继续当前的chery-pick序列
  • --quit 退出当前的chery-pick序列
  • --abort 取消当前的chery-pick序列,恢复当前分支
  • -n, --no-commit 不自动提交
  • -e, --edit 编辑提交信息

4、tag 和 branch 的区别

  • tag 对应某次 commit, 是一个点,是不可移动的。
  • branch 对应一系列 commit,是很多点连成的一根线,有一个HEAD 指针,是可以依靠 HEAD 指针移动的。
  • 创建 tag 是基于本地分支的 commit,而且与分支的推送是两回事,就是说分支已经推送到远程了,但是你的 tag 并没有,如果把 tag 推送到远程分支上,需要另外执行 tag 的推送命令。

5、如何切换链接git服务器的方式是ssh还是http

git remote set-url origin <要修改的url>

系统学习

《 Pro Git 》
《 Git Magic 》
《 GitHub秘籍 》
查看原文

认证与成就

  • 获得 1 次点赞
  • 获得 2 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 2 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2018-05-11
个人主页被 296 人浏览