• 新版网站前后台即将上线,2019年将致力于提高文章质量,加大原创力度,打造一个更加舒适的阅读体验!
  • 极客文库小编@勤劳的小蚂蚁,为您推荐每日资讯,欢迎关注!
  • 新版网站前后台即将上线,2019年将致力于提高文章质量,加大原创力度,打造一个更加舒适的阅读体验!
  • 如果有任何体验不佳的地方,欢迎向客服反馈!

前端面试常考系列五

 

一、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