欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

前端面试题小结

程序员文章站 2022-03-06 08:54:50
...

前面我们和大家分享了几十道css面试题目,本文我们接着和大家分享前端面试题小结,希望能帮助到大家。

HTML

1.html5新增了哪些内容或api,使用过哪些?

  • HTML5新增input输入类型:

    • email类型

    • url类型

    • number类型提供选择数字的功能,其中min属性设定最小值,max属性设定最大值,value属性设置当前值,step属性设定每次增长值。

    • range类型,表示限制数字输入的范围域

    • 日期和时间类型:date,month,week,time,datetime,datetime-local

    • search类型

    • tel类型

    • color类型

  • HTML5新增表单元素

    • datalist 规定输入域的选项列表

    • keygen提供一种可靠方法来验证用户

    • output用于不同类型的输出

  • 还有更多细节内容不列在这里啦。请看这篇博客


2.input和textarea的区别?

  • <input type= "textarea">是单行文本框。<textarea>是多行文本框。


3.用一个p模拟textarea的实现?

  • 首先我们需要知道p是高度自适应的,高度会随着内容的增加而增加。而textarea有着固定的大小,高度超过规定高度就会出现滚动条。

  • p有一个属性叫做contenteditable,设置contenteditable属性为true就可以实现,p内容可编辑。

  • 实现了内容可编辑以后,在css中设置好规定的高度,设置overflow-y属性为auto,即可实现滚动条。


4.移动设备忽略将页面中的数字识别为电话号码的方法?

  • 移动设备中经常会出现将一串数字识别为电话的情况,数字的颜色和样式都会变化,点击可以直接拨打。

  • 添加如下代码可以关闭识别。

   <meta name = "format-detection" content = "telephone=no">  

CSS

1.左右布局:左边定宽、右边自适应,不少于3种方法

  • 方法一:左边模块设置左浮动,右边模块宽度设置100%

  • 方法二:父容器设置display:flex;right部分设置flex:1。display:flex设置为弹性盒子,其子元素可以设置flex的数值来控制其所占空间的比例。

  • 方法三:使用负margin。设置左部分和右部分左浮动,并为right部分设置宽度100%。设置左部分左外边距为负100%。为了避免右部分的内容被覆盖,再为右部分设置添加左边距(左部分的宽度)。


2.CSS3有哪些新特性?

  • CSS3的选择器

    • E:last-child / E :nth-child(n) / E : nth-last-child(n) 倒数第n个元素

  • @Font-face特性用来加载字体样式,可以加载服务器端的字体,显示到客户端,即使客户端并没有安装该字体

  • 圆角:border-radius

  • 弹性盒子模式display:flex。 等等属性


3.BFC与IFC

相关推荐:

最新的百度前端面试题分享

Web前端面试题第八道—绝对定位与相对定位

分享一些前端面试题实例

以上就是前端面试题小结的详细内容,更多请关注其它相关文章!