前端校招面试题目合集练习-6

题目来自于牛客网题库-前端校招面试题目合集。
该题库共501题
学习目标：题库501道题目学习一遍。

学习目标：

• 学习进度:60/501

---

学习内容：

1. 请列举几种清除浮动的方法.
   (1)父级div定义height
   原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
   优点：简单、代码少、容易掌握
   缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题
   建议：不推荐使用，只建议高度固定的布局时使用
   (2)结尾处加空div标签clear:both
   原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度
   优点：简单、代码少、浏览器支持好、不容易出现怪问题
   缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好
   建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法
   (3)父级div定义伪类:after和zoom
   原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题
   优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）
   缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。
   建议：推荐使用，建议定义公共类，以减少CSS代码。
   (4)父级div定义overflow:hidden
   原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
   优点：简单、代码少、浏览器支持好
   缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。
   建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。
   (5)父级div定义overflow:auto
   原理：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度
   优点：简单、代码少、浏览器支持好
   缺点：内部宽高超过父级div时，会出现滚动条。
   建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。

2. block,inline和inline-block细节对比.
   • display:block
   a、block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
   b、block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
   c、block元素可以设置margin和padding属性。
   • display:inline
   a、inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
   b、inline元素设置width,height属性无效。
   c、inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
   • display:inline-block
   a、简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。
   补充说明
   a、一般我们会用display:block，display:inline或者display:inline-block来调整元素的布局级别，其实display的参数远远不止这三种，仅仅是比较常用而已。
   b、IE（低版本IE）本来是不支持inline-block的，所以在IE中对内联元素使用display:inline-block，理论上IE是不识别的，但使用display:inline-block在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表象。

3. 什么叫优雅降级和渐进增强?
   优雅降级:一开始构建完整功能,再根据低版本浏览器进行兼容.
   渐进增强:针对低版本浏览器进行构建页面,保证最基本功能,然后针对高级浏览器进行效果/交互等改进和追加功能,从而达到更好的用户体验.

4. 说说浮动元素会引起的问题和你的解决办法.
   问题：
   （1）父元素的高度无法被撑开，影响与父元素同级的元素
   （2）与浮动元素同级的非浮动元素会跟随其后
   （3）若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构
   解决方法：
   使用CSS中的clear:both;属性来清除元素的浮动可解决问题(2)、(3)，对于问题(1)，添加如下样式，
   给父元素添加clearfix样式：
   .clearfix:after{content: “.”;display: block;height: 0;clear: both;visibility: hidden;}
   .clearfix{ zoom:1;} /* for IE/Mac */
   清除浮动的几种方法：
   (1)额外标签法，div style=“clear:both;”（缺点：不过这个办法会增加额外的标签使HTML结构看起来不够简洁。）
   (2)使用after伪类
   #parent:after{
     content:" ";
     height:0;
     visibility:hidden;
     display:block;
     clear:both;
   }
   (3)浮动外部元素
   (4)设置overflow为hidden或者auto

5. 谈谈性能优化的方法
   网页内容：
   1.减少http请求: http协议是无状态的应用层协议，意味着每次http请求都要建立通信链路、进行数据传输。减少http的主要手段是合并css、合并javascript、合并图片。
   2.减少DNS查询次数
   3.避免页面跳转
   4.使用浏览器缓存：缓存AJAX
   5.延迟加载：LazyLoad Images。刚加载的时候减少http请求。
   6.提前加载
   7.减少DOM元素数量
   8.根据域名划分内容
   9.减少iframe数量
   10.避免404
   服务器：
   1.使用CDN
   2.添加Expires或Cache-Control报文头
   3.Gzip压缩传输文件
   4.配置ETags
   5.使用GET AJAX请求
   6.避免空的图片src
   cookie：
   1.减少cookie的大小和传输次数
   2.页面内容使用无cookie域名
   CSS：
   1.将样式表放在head中：网页会在全部加载完成CSS后渲染页面。
   2.避免CSS表达式
   3.用link代替@import
   4.避免使用Filters
   Javascript：
   1.脚本置底
   2.使用外部的Javascript和CSS文件
   3.精简Javascript和CSS
   4.去除重复脚本
   5.减少DOM访问
   6.使用智能事件处理
   7.慎用with
   8.减少作用域查找
   图片：
   1.优化图片
   2.使用CSS Sprites
   3.不要在HTML中缩放图片
   4.使用小且可缓存的favicon.ico

6. 为什么要初始化CSS样式?
   因为浏览器兼容问题,不同的浏览器对有些标签的默认值不一样,所以为了减少不同浏览器的页面显示差异,就需要使用CSS初始化.

7. 解释以下浮动和它的工作原理.谈谈清除浮动的技巧.
   浮动元素脱离文档流,不占据空间.
   浮动元素碰到包含它的边框或者浮动元素的边框会停留.
   清除技巧:额外标签法:末尾加空标签div clear:both
   使用overflow,配置为auto ,或hidden.
   使用伪类after.
   浮动外部元素.

8. CSS样式表根据所在网页的位置,可分为哪几种样式表?
   外部样式表:使用Link标签
   内嵌样式表:style标签内设置样式
   行内样式表. 元素标签内设置样式

9. 谈谈CSS中刻度.

   在CSS中刻度是用于设置元素尺寸的单位。
   a、特殊值0可以省略单位。例如：margin:0px可以写成margin:0
   b、一些属性可能允许有负长度值，或者有一定的范围限制。如果不支持负长度值，那应该变换到能够被支持的最近的一个长度值。
   c、长度单位包括：相对单位和绝对单位。
   相对长度单位有：
   em, ex, ch, rem, vw, vh, vmax, vmin
   绝对长度单位有： cm, mm, q, in, pt, pc, px
   绝对长度单位：
   1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px

   文本相对长度单位：em
   相对长度单位是相对于当前对象内文本的字体尺寸，如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(相对父元素的字体大小倍数)
   body { font-size: 14px; }
   h1 { font-size: 16px; }
   .size1 p { font-size: 1em; }
   .size2 p { font-size: 2em; }
   .size3 p { font-size: 3em; }

   文本相对长度单位：rem
   rem是CSS3新增的一个相对单位（root em，根em），相对于根元素(即html元素)font-size计算值的倍数.只相对于根元素的大小.
   浏览器的默认字体大小为16像素，浏览器默认样式也称为user agent stylesheet，就是所有浏览器内置的默认样式，多数是可以被修改的，但chrome不能直接修改，可以被用户样式覆盖。

10. 说说em与rem的区别.
    rem
    rem（root em，根em），相对于根元素(即html元素)font-size计算值的倍数.

    em
    em（font size of the element）是指相对于父元素的字体大小的单位。浏览器的默认字体尺寸(默认16px)
    em与rem的重要区别：
    em依赖父元素字体大小,
    rem依赖根元素html字体大小

---

学习时间：

2021/1/13 12:50-13:20
花费时间:30min

---

寄语：

新旧交替,万物更新.
又是努力学习的一天，加油！