美文网首页
前端面试(四)

前端面试(四)

作者: 彩虹糖的梦_a | 来源:发表于2019-10-21 22:11 被阅读0次

一、浮动产生原因及清除浮动方法

产生浮动原因:给元素添加 float 属性

浮动元素会脱离文档流,不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

浮动引起的问题:
  1. 父元素的高度无法被撑开(发生高度塌陷),影响与父元素同级的元素
  2. 与浮动元素同级的非浮动元素会跟随其后
  3. 若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构
清除浮动的方法:

1. 使用空标签清除浮动

在最后一个浮动元素后面添加一个空标签并定义css样式 clear:both;
弊端:增加了无意义标签,产生冗余代码。

2. 使用overflow

给包含浮动元素的父元素添加css属性 overflow:hidden;
弊端:当子元素有定位设置,定位到父元素外面,并且不希望溢出父元素的部分隐藏时,此方法不可用。

3. 使用after伪对象(万能清除浮动法)

父元素选择符:after{
    content:".";
    height:0;
    visibility:hidden;
    display:block;
    clear:both;
    overflow:hidden;
}

二、实现父元素透明且子元素不透明

解决方法: 使用rgba()

为父元素设置:background: rgba(0,0,0,0.5)。

三、保留两位小数

toFixed(2)

四、低版本IE浏览器如何识别html5新增标签

方法一 JavaScript脚本处理

 <script type="text/javascript">
       document.createElement("article");
</script>

方法二 使用html5shiv

<!‐‐[if lt IE 9]>  
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </script>  
<![endif]‐‐>

当版本低于IE9 时,浏览器会加载html5.js脚本,使得浏览器支持html5的新功能 。

五、bootstrap栅格系统

Bootstrap栅格系统 是一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。

栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。

工作原理

行必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列和内补 。

通过行在水平方向创建一组列。你的内容应当放置于列内,并且,只有列可以作为行的直接子元素。

类似 .row 和 .col-xs-4 这种预定义的类,可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
栅格参数:(类前缀)

  • 超小屏幕 手机 (<768px) :.col-xs-
  • 小屏幕 平板 (≥768px):.col-sm-
  • 中等屏幕 桌面显示器 (≥992px) :.col-md-
  • 大屏幕 大桌面显示器 (≥1200px):.col-lg-

栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如,三个等宽的列可以使用三个 .col-xs-4 来创建。

如果一行中包含了的列大于 12,多余的列所在的元素将被作为一个整体另起一行排列。

六、如何判断一个字符串是否以"abc"开头

startwith()

str='abcdfff'
console.log(str.startsWith('abc')); //true

七、jquery ajax设置超时时间

超时原因:

1.网络不通畅。
2.后台运行比较慢(服务器第一次运行时,容易出现)

使用参数 timeout 设置超时时间。

如果服务器响应时间超过了 设置的时间,则进入 ERROR (错误处理)。

八、随机从数组中取出一个元素

arr=[2,4,6,7,10];
var num=arr[Math.floor(Math.random()*arr.length)];
console.log(num);

九、javaScript数据类型

按存储类型分类

基本类型(值类型):字符串(String)、数字(Number)、布尔(Boolean)、空(Null)、未定义(Undefined)、Symbol(表示独一无二的值)。

引用数据类型:对象(Object)、数组(Array)、函数(Function)。

十、em和rem的区别

rem和rem都是相对单位

rem 相对于根元素(html)的font-size

1rem=根元素的 font-size

em 相对于直接父元素的font-size

1em=直接父元素的 font-size

十一、v-if 和v-show的区别

v-if 控制的DOM元素的添加与删除,会存在 DOM 的渲染与销毁的过程。而 v-show 只是简单的控制元素的 CSS 的 display 属性。

相关文章

  • 值得看的前端面试文章- 收藏集 - 掘金

    【前端面试 -- 四月二十家前端面试题分享】1-5 套个人解题答案 - 前端 - 掘金前端面试题 前端面试--四月...

  • 【前端面试--四月二十家前端面试题分享】1-5套个人解题答案

    注意:解法错误颇多,请一定要看评论,评论中指出了很多错误!!! 前端面试题 前端面试--四月二十家前端面试题分享 ...

  • 前端最强面经汇总

    面试秘籍 中高级前端大厂面试秘籍,为你保驾护航金三银四,直通大厂(上) 前端面试 - 收藏集 - 掘金 2万5千字...

  • 前端面试的经典题

    前端面试的经典题 前端面试三部曲 前端面试概念收集器 前端面试的经典题 前端面试的难题和怪题 Javascript...

  • 前端面试概念收集器

    前端面试概念收集器 前端面试三部曲 前端面试概念收集器 前端面试的经典题 前端面试的难题和怪题 本文分为 概念,原...

  • 前端面试的难题和怪题

    前端面试的难题和怪题 前端面试三部曲 前端面试概念收集器 前端面试的经典题 前端面试的难题和怪题 函数 答案 Er...

  • 前端面试(四)

    一、浮动产生原因及清除浮动方法 产生浮动原因:给元素添加 float 属性 浮动元素会脱离文档流,不占据空间。浮动...

  • PHPer 面试指南-扩展阅读资源整理

    前端篇 收集的前端面试题和答案 前端开发面试题 史上最全的web前端面试题汇总及答案 前端工程师手册 HTTP协议...

  • PHPer 面试指南-扩展阅读资源整理

    前端篇 收集的前端面试题和答案 前端开发面试题 史上最全的web前端面试题汇总及答案 前端工程师手册 HTTP协议...

  • 面试集 - 收藏集 - 掘金

    Excuse me?这个前端面试在搞事! - 前端 - 掘金金三银四搞事季,前端这个近年的热门领域,搞事气氛特别强...

网友评论

      本文标题:前端面试(四)

      本文链接:https://www.haomeiwen.com/subject/clbfmctx.html