zoukankan      html  css  js  c++  java
  • 前端面试题

    一、HTML

          1.img标记属于什么类型元素?有什么特点?

           答案:行内元素,允许修改尺寸。

           2.结构标记有哪些?他们与div有什么相同之处,又有什么不同之处?

           答案: header、section、aside、nav、article、footer

                      相同:属于块级元素,用于做布局

                      不同:结构标记提升了代码的语义性

            3.行内元素,块级元素,空元素有哪些?

            答案:行内元素:span,i,u,a,b,s,img,sup,sub

                       块级元素:h1~h6,p,div,ul,ol,dl,dt,pre,等结构标记

                       空元素:br,hr

     二、CSS

             1.隐藏网页中的元素有几种方式?这些方法有什么区别?

              答案:三种

                        一种:display:none,不占页面空间,脱离文档流。

                        二种:visibility:hidden  占据页面空间,不会脱离文档流

                         三种:  opacity:0;该元素隐藏起来,但不会改变页面布局,并且设置绑定事件。

                

             2.如何解决子元素的上外边距溢出?

              答案:1.给父元素设置上边框

                        2.设置父元素的上内边距,

                        3.父元素的第一个子元素位置处理添加空的table标记(最优方式)

                          .top_margin:before{

                                content:"";

                                display:table;

                       }

                3.常用来设置透明度的方式有几种?他们之间有何区别?

                 答案:opacity和rgba();

                           opacity 设置当前元素相关的所有颜色的透明度。

                           rgba 设置当前某一种颜色的透明度。

                 4.浮动会对父元素的高度带来什么影响?如何解决这个问题?

                  答案:父元素的高度为0,

                       .clear:after{

                              content:"",

                              display:block;

                              clear:both;

                      }

                 5.哪些元素默认有外边距?

                  答案:p,h~h6,ul,body,ol,pre,dl

                 6.网页中如何定义锚点?如何连接到锚点位置?

                  答案:定义锚点的方式------两种

                        如果是a元素,用name属性定义锚点,其他所有元素都用id属性定义。

                        链接方式:如果实在当前网页“#锚点名称”

                                         如果是在其他网页“网页的url#锚点名称”

                7.框模型默认的计算方式是什么?要改变默认的计算方式用哪个属性及值?

                  答案:实际的宽度=左右外边距 + 左右边框 + 左右内边距 + width

                            实际的高度=上下外边距  + 上下边框 + 上下内边距 + height

                            属性:box-sizing:border-box

     

                8.实现时针转动效果需要用到CSS中哪些关键技术?

                   答案:转换,动画,定位

                9.设置行内元素水平居中对齐用什么属性?

                   答案:text-align:center;

                10.如果要将表单中控件的值提交给服务器必须为控件设置什么属性?

                   答案:name属性和value属性

                11.tansition和animation的区别?

                   答案:animation和transition大部分的属性是相同的,他们都是随时间改变元素的属性值,他们主要的区 别是transition需要触发事件才能改变属性,而animation不需要触发的情况下也会随着时间发生属性的变化。并且transition是2帧,from...to...,而animation是一帧一帧,可以将多帧连在一起,也可以理解为animation是将多个transition放到了一起。

                12.如何实现元素水平垂直居中?

                   答案:定位 + 外边距

                             定位  + transform

                             flex 布局

                13.盒子模型你是怎么理解的?

                 答案:元素框处理元素内容内边距外边距以及边框的计算方式。

                            盒子模型有两种情况:W3C和IE的盒子模型。

                            W3C标准:实际的宽度=左右外边距 + 左右边框 + 左右内边距 + width

                                              实际的高度=上下外边距 + 上下边框 +上下内边距 +  height

                             IE标准: width=content + padding + border

                                           height=content + padding + border

                                           与W3C标准设置box-sizing:border-box 一致

                 14.src和href的区别?

                   答案:href:HypterText  Reference的缩写,表示超文本引用,用来建立当前元素与文档之间的链接。

    并行下载该文档,不会停止对当前文档的处理。

                               src: 是source的缩写,src指向的内容会嵌入到文档标签所在的位置,如img,script,iframe当浏览器解析到该元素时,会暂停浏览器的渲染,直到该资源加载完毕。

                   15.说出link和import的区别?

                        答案:link在网页head标记中引入css文件,import一般定义在css内部,并且一定要在所有规则之前,也就是一般写在文件顶部,import比link延迟一些,它会等到下载完毕再加载,因而可能会产生闪烁。

                    16.改变页面元素位置的定位方式及他们的区别?

                        答案:float,position:relative/absolute/fixed;

                                  float:解决多个块级元素在一行中显示。

                                  相对定位:相对于元素自己做位置微调时使用

                                  绝对定位:堆叠效果,弹出菜单

                                  固定定位:页面滚动而元素不需要发生位置改变时使用

     

    三、AJAX

              1.用post方式异步向服务器提交数据时,需要在发送请求前设置什么?提交数据放在什么位置?

                     答案:xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded").

                     放在send(body);

              2.什么是异步数据加载?

                答案:浏览器向服务器发送请求时,不耽误用户在网页上做其他操作,可以同时开启多个任务,并且可以无刷新的效果来更改页面的局部数据。

              3.异步请求数据的步骤分为哪几步?

                答案:1.创建异步对象

                          2.绑定监听事件

                          3.打开连接

                          4.发送请求

              4.异步请求中满足什么条件时才能取出响应的结果数据?

                  答案:readyState ==4&&status==200

              5.如何理解JSON?

                  答案:JSON是js对象的一种表现形式,即以js对象的数据格式表现出来的字符串。

                            json中常用的API:

                            将json字符串转换为js对象/数组:JSON.parse();

                            将JS对象/数组转换为json字符串:JSON.stringify();

               6.http和https的区别?

                    答案:http传输的数据未加密,也就是明文显示,端口是80

                              http是加密传输,端口是:443

               7.列举几种常见的3和4开头的状态码以及他们的意义?

                    答案:301:永久重定向

                              302:临时重定向

                              304:命中缓存

                              404:请求资源路径找不到

                              400:请求不被理解

                              403:服务器拒绝请求

    四、Bootstrap

                   1.用bootstrap中的栅格布局做网页的基本结构是什么?默认将一行分为多少列?

                      答案:

                         盒子(container) -----------行(row)-------列(col-*)

                         默认将一行分为12列

                   2.如何编写响应式网页?

                      答案: 1.声明viewport 

                                 2.所有的容器/文本/图片使用相对尺寸

                                 3.使用弹性布局+流式布局

                                 4.使用媒体查询技术

                   3.同时监听多个scss文件的命令是什么?

                      答案:node-sass-w  scss文件夹名称   -o  CSS文件夹名称

                   4.在scss中如何定义混合器以及引用?

                      答案:@mixin 混合器名称{样式声明}

                                 通过@include来引用混合器

  • 相关阅读:
    day5 元组,字典,集合
    day4预习
    day4字符串、列表
    day3预习
    day3 数据类型
    day2 python 基础入门
    动态三角形(动态规划思想入门)
    百度之星资格赛
    Audiophobia(Floyd算法)
    Hat’s Words(字典树的运用)
  • 原文地址:https://www.cnblogs.com/sna-ling/p/12308526.html
Copyright © 2011-2022 走看看