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

前端HTML+CSS面试经典题目合集(三)

极客题库 Geekerstar 11个月前 (05-24) 527次浏览 已收录 0个评论 扫描二维码
文章目录[隐藏]

列出display的值并说明他们的作用?

block:块级元素/显示

inline:行内元素

inline-block:行内块级元素

none:取消样式

normal:默认样式

flex:弹性盒模型

如何居中div, 如何居中一个浮动元素?

(1)、非浮动元素居中:可以设置 margin:0 auto 令其居中, 定位 ,父级元素text-align:center等等

(2)、浮动元素居中:

方法一:设置当前div的宽度,然后设置margin-left:50%; position:relative; left:-250px;其中的left是宽度的一半。

方法二:父元素和子元素同时左浮动,然后父元素相对左移动50%,再然后子元素相对左移动-50%。

方法三:position定位等等。

CSS中 link 和@import 的区别是?

(1)link属于HTML标签,而@import是CSS提供的;

(2)页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载;

(3)import只在IE5以上才能识别,而link是HTML标签,无兼容问题;

(4)link方式的样式的权重 高于@import的权重.

请列举几种清除浮动的方法(至少两种)?

(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和inlinke-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属性的表象。

什么叫优雅降级和渐进增强?

优雅降级: Web站点在所有新式浏览器中都能正常工作,如果用户使用的是老式浏览器,则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题,针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案,使之在旧式浏览器上以某种形式降级体验却不至于完全失效.

渐进增强: 从被所有浏览器支持的基本功能开始,逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时,它们会自动地呈现出来并发挥作用。

说说浮动元素会引起的问题和你的解决办法

问题:

(1)父元素的高度无法被撑开,影响与父元素同级的元素

(2)与浮动元素同级的非浮动元素会跟随其后

(3)若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构

解决方法:

使用CSS中的clear:both;属性来清除元素的浮动可解决问题(2)、(3),对于问题(1),添加如下样式,给父元素添加clearfix样式:

.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix{display: inline-block;} /* for IE/Mac */

清除浮动的几种方法:

(1)额外标签法,

(缺点:不过这个办法会增加额外的标签使HTML结构看起来不够简洁。)

(2)使用after伪类

#parent:after{
  content:" ";
  height:0;
  visibility:hidden;
  display:block;
  clear:both;
}

(3)浮动外部元素

(4)设置`overflow`为`hidden`或者auto

你有哪些性能优化的方法?


回答一:

(1)、减少http请求次数:CSS Sprites, JS、CSS源码压缩、图片大小控制合适;网页Gzip,CDN托管,data缓存 ,图片服务器。

(2)、前端模板 JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数

(3)、用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能。

(4)、当需要设置的样式很多时设置className而不是直接操作style。

(5)、少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。

(6)、避免使用CSS Expression(css表达式)又称Dynamic properties(动态属性)。

(7)、图片预加载,将样式表放在顶部,将脚本放在底部 加上时间戳。

回答二:

(1)、减少HTTP请求次数

(2)、使用CDN

(3)、避免空的src和href

(4)、为文件头指定Expires

(5)、使用gzip压缩内容

(6)、把CSS放到顶部

(7)、把JS放到底部

(8)、避 免使用CSS表达式

(9)、将CSS和JS放到外部文件中

(10)、避免跳转

(11)、可缓存的AJAX

(12)、使用GET来完成AJAX请求

为什么要初始化CSS样式?

因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化。
*最简单的初始化方法就是: * {padding: 0; margin: 0;} (不建议)

解释下浮动和它的工作原理?清除浮动的技巧?

浮动元素脱离文档流,不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

(1)、使用空标签清除浮动。

这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。

(2)、使用overflow。

给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。

(3)、使用after伪对象清除浮动。

该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0,否则该元素会比实际高出若干像素;

谈谈你对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是CSS3新增的一个相对单位(root em,根em),相对于根元素(即html元素)font-size计算值的倍数

只相对于根元素的大小

rem(font size of the root element)是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。

作用:利用rem可以实现简单的响应式布局,可以利用html元素中字体的大小与屏幕间的比值设置font-size的值实现当屏幕分辨率变化时让元素也变化,以前的天猫tmall就使用这种办法

em

文本相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸(默认16px)。(相对父元素的字体大小倍数)

em(font size of the element)是指相对于父元素的字体大小的单位。它与rem之间其实很相似,区别在。(相对是的HTML元素的字体大,默认16px)

em与rem的重要区别: 它们计算的规则一个是依赖父元素另一个是依赖根元素计算

请你说说box-sizing属性的的用法?

设置或检索对象的盒模型组成模式

a、box-sizing:content-box: padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和,即 ( Element width = width + border + padding,但占有页面位置还要加上margin ) 此属性表现为标准模式下的盒模型。

b、box-sizing:border-box: padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值,即使定义有border和padding也不会改变对象的实际宽度,即 ( Element width = width ) 此属性表现为怪异模式下的盒模型。

说说你对边距折叠的理解?

外边距折叠: 相邻的两个或多个外边距 (margin) 在垂直方向会合并成一个外边距(margin)

相邻: 没有被非空内容、padding、border 或 clear 分隔开的margin特性. 非空内容就是说这元素之间要么是兄弟关系或者父子关系

垂直方向外边距合并计算:

a、参加折叠的margin都是正值:取其中 margin 较大的值为最终 margin 值。

b、参与折叠的 margin 都是负值:取的是其中绝对值较大的,然后,从 0 位置,负向位移。

c、参与折叠的 margin 中有正值,有负值:先取出负 margin 中绝对值中最大的,然后,和正 margin 值中最大的 margin 相加。

内联与块级标签有何区别?

主要区别在于,行内元素不独占一行,设置宽度和高度无效,垂直方向上的margin,padding设置无效。

说说隐藏元素的方式有哪些?

a、使用CSS的display:none,不会占有原来的位置

b、使用CSS的visibility:hidden,会占有原来的位置

c、使用HTML5中的新增属性hidden=”hidden”,不会占有原来的位置

说说你对页面中使用定位(position)的理解?

使用css布局position非常重要,语法如下:

position:static | relative | absolute | fixed | center | page | sticky
默认值:static,center、page、sticky是CSS3中新增加的值。

(1)、static

可以认为静态的,默认元素都是静态的定位,对象遵循常规流。此时4个定位偏移属性不会被应用,也就是使用left,right,bottom,top将不会生效。

(2)、relative

相对定位,对象遵循常规流,并且参照自身在常规流中的位置通过top,right,bottom,left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。

(3)、absolute

a、绝对定位,对象脱离常规流,此时偏移属性参照的是离自身最近的定位祖先元素,如果没有定位的祖先元素,则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素,其margin不与其他任何margin折叠。

b、元素定位参考的是离自身最近的定位祖先元素,要满足两个条件,第一个是自己的祖先元素,可以是父元素也可以是父元素的父元素,一直找,如果没有则选择body为对照对象。第二个条件是要求祖先元素必须定位,通俗说就是position的属性值为非static都行。

(4)、fixed

固定定位,与absolute一致,但偏移定位是以窗口为参考。当出现滚动条时,对象不会随着滚动。

(5)、center

与absolute一致,但偏移定位是以定位祖先元素的中心点为参考。盒子在其包含容器垂直水平居中。(CSS3)

(6)、page

与absolute一致。元素在分页媒体或者区域块内,元素的包含块始终是初始包含块,否则取决于每个absolute模式。(CSS3)

(7)、sticky

对象在常态时遵循常规流。它就像是relative和fixed的合体,当在屏幕中时按常规流排版,当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。(CSS3)

如何解决多个元素重叠问题?

使用z-index属性可以设置元素的层叠顺序

z-index属性

语法:z-index: auto |

默认值:auto

适用于:定位元素。即定义了position为非static的元素

取值:

auto: 元素在当前层叠上下文中的层叠级别是0。元素不会创建新的局部层叠上下文,除非它是根元素。

整数: 用整数值来定义堆叠级别。可以为负值。

说明:检索或设置对象的层叠顺序。

z-index用于确定元素在当前层叠上下文中的层叠级别,并确定该元素是否创建新的局部层叠上下文。
当多个元素层叠在一起时,数字大者将显示在上面。

overflow :hidden是否形成新的块级格式化上下文?

会形成,触发BFC的条件有:

– float的值不为none。

– overflow的值不为visible。

– display的值为table-cell, table-caption, inline-block 中的任何一个。

– position的值不为relative 和static。


丨极客文库, 版权所有丨如未注明 , 均为原创丨
本网站采用知识共享署名-非商业性使用-相同方式共享 3.0 中国大陆许可协议进行授权
转载请注明原文链接:前端HTML+CSS面试经典题目合集(三)
喜欢 (0)
[247507792@qq.com]
分享 (0)
Geekerstar
关于作者:
本站技术支持

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

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

客服QQ


QQ:2248886839


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