• 极客专栏正式上线!欢迎访问 https://www.jikewenku.com/topic.html
  • 极客专栏正式上线!欢迎访问 https://www.jikewenku.com/topic.html

前端面试常考系列五

技术杂谈 勤劳的小蚂蚁 4个月前 (01-06) 86次浏览 已收录 0个评论 扫描二维码

 

一、DIV元素是什么

 

DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的,其中所包含元素的特性由DIV标签的属性来控制,或者是通过使用样式表格式化这个块来进行控制。
简单来说:就是指定渲染 HTML 的容器。
 
 

 

二、如何居中一个元素

 

非浮动元素居中
设置 margin:0 auto 令其居中, 定位 ,父级元素 text-align:center
浮动元素居中
方法一:
使用position定位
方法二:
父元素和子元素同时左浮动,然后父元素相对左移动50%,再然后子元素相对左移动-50%。
方法三:
设置当前div的宽度,然后设置margin-left:50%;position:relative; left:-250px;其中的left是宽度的一半。
 

 

三、浮动的工作原理是什么

 

浮动的框可以左右移动,直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流(文档流),即脱离了文档流,当一个元素浮动之后,不会影响到 块级框的布局而只会影响内联框(通常是文本)的排列,文档中的普通流就会表现得和浮动框不存在一样,当浮动框高度超出包含框的时候,也就会出现包含框不会 自动伸高来闭合浮动元素(“高度塌陷”现象)。顾名思义,就是漂浮于普通流之上,像浮云一样,但是只能左右浮动。正是因为浮动的这种特性,导致本属于普通流中的元素浮动之后,包含框内部由于不存在其他普通流元素了,也就表现出高度为0(高度塌陷)。
 
 

 

四、浮动元素会引起哪些问题

 

问题一
与浮动元素同级的非浮动元素会跟随其后
问题二
父元素的高度无法被撑开,影响与父元素同级的元素
问题三
若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构
 
 

 

五、清除浮动常用的方法有哪些

 

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

 

六、如何调整元素的布局级别

 

方法一
display:block 
block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。 
block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。 
block元素可以设置margin和padding属性。
方法二
display:inline-block 
简言之就是将对象呈现为inline对象,但是对象的内容作为block对象呈现,后面的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。
方法三
display:inline 
inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。 
inline元素设置width,height属性无效。 
inline元素的margin和padding属性,水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果;但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
 
 

 

七、如何理解优雅降级和渐进增强

 

优雅降级:
Web站点在所有新式浏览器中都能正常工作,如果用户使用的是老式浏览器,则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题,针对不同版本IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案,达到能够在旧式浏览器上以某种形式降级体验的目的。
渐进增强:
所有浏览器支持的基本功能为基础,逐步添加些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能。当浏览器支持时,会自动地呈现出来并发挥作用。
 
 

 

八、如何优化性能

 

方法一
当需要设置的样式很多时设置className而不是直接操作style。
方法二
少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
方法三
图片预加载,将样式表放在顶部,将脚本放在底部加上时间戳。
方法四
innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能
方法五
减少http请求次数:CSS Sprites, JS、CSS源码压缩、图片大小控制合适;网页Gzip,CDN托管,data缓存,图片服务器。
方法六
前端模板JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数 
方法七
避免使用css表达式动态属性。
 
 

 

九、CSS样式分为哪几种

 

1、内联css样式
内联式css样式表就是把css代码直接写在现有的HTML标签中
2、嵌入式css样式
嵌入式css样式,就是可以把css样式代码写在标签之间。
3、外部式css样式
外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名(也可以为调用其他网站CSS)。
 

 

十、为什么要初始化css样式

 

1、浏览器的兼容问题
不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
2、提高编码质量
初始化CSS样式主要是提高编码质量,如果不初始化整个页面做完很糟糕,重复的CSS样式很多。
 
 

 

十一、如何理解css中的刻度

 

CSS中刻度用于设置元素尺寸的单位。
  特殊值0可以省略单位。例如:margin:0px可以写成margin:0 
  一些属性可能允许有负长度值,或者有一定的范围限制。如果不支持负长度值,那应该变换到能够被支持的最近的一个长度值。 
  长度单位包括:相对单位和绝对单位。 
  相对长度单位有: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与rem的区别是什么

 

em
文本相对长度单位。相对于当前对象内,文本字体的尺寸。如果当前对象内,文本字的体尺寸未设置,则相对于浏览器默认字体的尺寸(默认16px)。(相对父元素的字体大小倍数)
em(font size of the element)是指相对于父元素字体大小的单位。
rem
rem是CSS3新增的一个相对单位(root em,根em),相对于根元素(即html元素)font-size计算值的倍数,只相对于根元素的大小rem(font size of the root element)是指相对于根元素的字体大小的单位。
作用:利用rem可以实现简单的响应式布局,可以利用html元素中字体的大小与屏幕间的比值设置font-size的值实现当屏幕分辨率变化时让元素也变化
区别
em的计算规则依赖父元素rem的计算规则依赖根元素 

丨极客文库, 版权所有丨如未注明 , 均为原创丨
本网站采用知识共享署名-非商业性使用-相同方式共享 3.0 中国大陆许可协议进行授权
转载请注明原文链接:前端面试常考系列五
喜欢 (0)
[247507792@qq.com]
分享 (0)
勤劳的小蚂蚁
关于作者:
温馨提示:本文来源于网络,转载文章皆标明了出处,如果您发现侵权文章,请及时向站长反馈删除。

您必须 登录 才能发表评论!

  • 精品技术教程
  • 编程资源分享
  • 问答交流社区
  • 极客文库知识库

客服QQ


QQ:2248886839


工作时间:09:00-23:00