题目来自于牛客网题库-前端校招面试题目合集。
该题库共501题
学习目标:题库501道题目学习一遍。
学习目标:
- 学习进度:60/501
学习内容:
-
请列举几种清除浮动的方法.
(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时,会出现滚动条。
建议:不推荐使用,如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。 -
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属性的表象。 -
什么叫优雅降级和渐进增强?
优雅降级:一开始构建完整功能,再根据低版本浏览器进行兼容.
渐进增强:针对低版本浏览器进行构建页面,保证最基本功能,然后针对高级浏览器进行效果/交互等改进和追加功能,从而达到更好的用户体验. -
说说浮动元素会引起的问题和你的解决办法.
问题:
(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 -
谈谈性能优化的方法
网页内容:
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 -
为什么要初始化CSS样式?
因为浏览器兼容问题,不同的浏览器对有些标签的默认值不一样,所以为了减少不同浏览器的页面显示差异,就需要使用CSS初始化. -
解释以下浮动和它的工作原理.谈谈清除浮动的技巧.
浮动元素脱离文档流,不占据空间.
浮动元素碰到包含它的边框或者浮动元素的边框会停留.
清除技巧:额外标签法:末尾加空标签div clear:both
使用overflow,配置为auto ,或hidden.
使用伪类after.
浮动外部元素. -
CSS样式表根据所在网页的位置,可分为哪几种样式表?
外部样式表:使用Link标签
内嵌样式表:style标签内设置样式
行内样式表. 元素标签内设置样式 -
谈谈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不能直接修改,可以被用户样式覆盖。 -
说说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
寄语:
新旧交替,万物更新.
又是努力学习的一天,加油!