前端面试基础(1年以内需掌握)

栏目: CSS · 发布时间: 5年前

内容简介:近日 公司让我面试 1年经验的前端,特此花时间研究了一番面试题,在我看来 这些基本都是必备的知识点一般来说我们有两种方法来去掉这个换行引起间隙:(推荐)通过设置父元素的 font-size 为 0 来去掉这个间隙,然后重置子元素的 font-size,让其恢复子元素文字字符。

近日 公司让我面试 1年经验的前端,特此花时间研究了一番面试题,在我看来 这些基本都是必备的知识点

css常用布局

基本值 flexbox grid table float布局
none flex grid table float-fixed
inline inline-flex inline-grid table-row float-fluid
block table-cell 960网格布局
inline-block

使用inline-block 的问题以及解决方案

  • 水平间隙问题 这是因为编写代码时输入空格、换行都会产生空白符。而浏览器是不会忽略空白符的,并且对于多个连续的空白符自动合并成一个,故产生了所谓的间隙。

一般来说我们有两种方法来去掉这个换行引起间隙: 代码不换行 和 设置 font-size。

(推荐)通过设置父元素的 font-size 为 0 来去掉这个间隙,然后重置子元素的 font-size,让其恢复子元素文字字符。 只要设置 inline-block 就要去间隙

float清除浮动详解

主要是为了解决由于浮动元素脱离文流导致的元素重叠或者父元素高度坍塌的问题

  • 清除前面兄弟元素浮动

清除前面兄弟元素浮动很简单,只需要在不想受到浮动元素影响的元素上使用 clear:both 即可

  • 闭合子元素浮动
  1. 给元素设置 clearfix 常用
通过父元素的伪元素(::after)实现的著名 clearfix 方法,代码如下:
<div class="container clearfix">
    <div class="box"></div>
</div>
.clearfix::after {
    content:"";
    display:table;
    clear: both;
}
给父元素增加一个专门用于处理闭合子元素浮动的 clearfix 类名,该类使用 ::after 伪元素类选择器增加一个内容为空的结构来清除浮动.
复制代码
  1. 给父元素新建一个 BFC(块格式化上下文)

请详情讲一下定位方式

前端面试基础(1年以内需掌握)

实现一个弹窗 全屏居中的效果。

  1. div使用绝对布局,设置 margin:auto; 并设置 top、left、right、bottom 的值相等即可,不一定要都是0。
.center{
    text-align: center; /*让div内部文字居中*/
    background-color: #fff;
    border-radius: 20px;
    width: 300px;
    height: 350px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
复制代码
  1. 绝对布局,让left和top都是50%,这在水平方向上让div的最左与屏幕的最左相距50%,垂直方向上一样,所以再用transform向左(上)平移它自己宽度(高度)的50%,也就达到居中效果了,效果图和上方相同。
.center{
    text-align: center;
    background-color: #fff;
    border-radius: 20px;
    width: 300px;
    height: 350px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
复制代码

说下几种常用选择器

五大类选择器:

  1. 基本选择器
P、h1
#id
.class
*
  1. 关系选择器

    前端面试基础(1年以内需掌握)
  2. 伪类选择器

  • :nth-child(n) : n可以是数字(4)、关键词(old,even)或公式(2n+1)
  • :active: 将样式添加到被激活的元素
  • :focus: 将样式添加到被选中的元素
  • :hover: 鼠标悬浮在元素上时 添加样式
  • :link: 添加到未被访问过的链接
  • :visited 添加到被访问过的链接
  • :first-child: 添加到元素的第一个子元素
  • :lang: 定义使用的语言
  1. 伪元素选择器 :first-letter : 添加到文本的首字母 :first-line : 添加到文本的首行 :before : 某元素之前插入某些内容 :after : 某元素之后插入某些内容

  2. 属性选择器

    前端面试基础(1年以内需掌握)

说一下 CSS3新特性

  1. HTML5 语义元素
  2. HTML5 Web 存储
  • sessionStorage: 客户端数据存储,只能维持在当前会话范围内。
  • localStorage: 客户端数据存储,能维持在多个会话范围内。对象存储的数据没有时间限制。对于大量复杂数据结构,一般使用IndexDB
  1. CSS3 多媒体查询 @media all and(min-width:800px){...}
  2. CSS3 转换和变形:transform
  3. CSS3 过渡:transition
  4. CSS3 动画:animation

异步请求实现方式

//由于浏览器兼容的原因,代码复杂,多使用基于jQuery的异步请求方法(内部封装)

讲一下 自己 代码 调试方法

前端面试基础(1年以内需掌握)

JS数组操作

  • concat() 链接两个或更多的数组,并返回结果
  • join() 把数组通过指定分隔符进行分割并拼接成一个字符串
  • pop() 删除并返回数组的最后一个元素
  • push() 向数组的末尾添加一个或更多元素,并返回新长度
  • reverse() 反转数组中元素的顺序

Jq DOM选择器、DOM文档操作

  • append() : 向元素结尾插入由参数指定的内容。
  • prepend():向元素开头插入由参数指定的内容。
  • after() : 在匹配的元素之后插入内容。
  • before(): 在每个匹配的元素之前插入内容。
  • addClass():向匹配的元素添加指定的类名。
  • attr() :设置或返回匹配元素的属性和值。
  • removeAttr():移除指定的属性。

Vue框架的优势

  1. MVVM: Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑; View 代表UI 组件,它负责将数据模型转化成UI 展现出来, ViewModel 是一个同步View 和 Model的对象。

  2. mvc和mvvm其实区别并不大。都是一种设计思想。 主要就是mvc中Controller演变成mvvm中的viewModel。 mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低,加载速度变慢,影响用户体验。

区别vue数据驱动,通过数据来显示视图层而不是节点操作。场景:数据操作比较多的场景,更加便捷


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

编程珠玑(续)(修订版)

编程珠玑(续)(修订版)

【美】Jon Bentley 乔恩•本特利 / 钱丽艳、刘田 / 人民邮电出版社 / 2015-2 / CNY 35.00

历史上最伟大的计算机科学著作之一 融深邃思想、实战技术与趣味轶事于一炉的奇书 带你真正领略计算机科学之美 多年以来,当程序员们推选出最心爱的计算机图书时,《编程珠玑》总是位于前列。正如自然界里珍珠出自细沙对牡蛎的磨砺,计算机科学大师Jon Bentley以其独有的洞察力和创造力,从磨砺程序员的实际问题中凝结出一篇篇不朽的编程“珠玑”,成为世界计算机界名刊《ACM通讯》历史上最受欢......一起来看看 《编程珠玑(续)(修订版)》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

随机密码生成器
随机密码生成器

多种字符组合密码

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具