2019届校招前端面试题整理——HTML、CSS篇

2018-08-10 admin

2019届校招陆陆续续开始了,整理了一些高频的面试题。

HTML部分

1. 什么是<!DOCTYPE>?

DOCTYPE是html5标准网页声明,且必须声明在HTML文档的第一行。来告知浏览器的解析器用什么文档标准解析这个文档。

文档解析类型有:

  • BackCompat:怪异模式,浏览器使用自己的怪异模式解析渲染页面。(如果没有声明DOCTYPE,默认就是这个模式)
  • CSS1Compat:标准模式,浏览器使用W3C的标准解析渲染页面。

2. meta标签

提供给页面的一些元信息(名称/值对),有助于SEO。

属性值:

  • name:名称/值对中的名称。author、description、keywords、generator、revised、others。 把 content 属性关联到一个名称。
  • http-equiv:没有name时,会采用这个属性的值。content-type、expires、refresh、set-cookie。把content属性关联到http头部
  • content : 名称/值对中的值, 可以是任何有效的字符串。 始终要和 name 属性或 http-equiv 属性一起使用
  • scheme : 用于指定要用来翻译属性值的方案

3. HTML语义化

  • 用正确的标签做正确的事情。
  • html语义化让页面的内容结构化,结构更清晰,便于对浏览器,搜索引擎解析;
  • 即使在没有样式CSS情况下也以一种文档格式显示,并且是容易阅读的;
  • 搜索引擎的爬虫也依赖于HTML标记确定上下文和各个关键字的权重,利于SEO;
  • 使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。

4. 常见的浏览器内核

  • Trident内核:IE,MaxThon,TT,The Word,360,搜狗浏览器等。
  • Gecko内核:Netscape6及以上版本,FF,MozillaSuite/SeaMonkey等;
  • Presto内核:Opera7及以上。[现为:Blink]
  • Webkit内核:Safari,Chrome等。[Chrome的:Blink(Webkit的分支)]

5. 简单介绍对浏览器内核的理解

主要分成两部分:渲染引擎和JS引擎。

  • 渲染引擎:将代码转换成页面。负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入CSS等)、以及计算网页的显示方式,然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其他需要编辑、显示网络内容的应用程序都需要内核。
  • JS引擎:解析和执行javascript来实现网页的动态效果。

最开始渲染引擎和JS引擎并没有区分得很明确,后来JS引擎越来越独立,内核就倾向于只指渲染引擎。

6. HTML5有哪些新特性,移除了哪些元素?如何处理HTML5新标签的浏览器兼容问题?

(1) 用于绘画的canvas元素; (2) 用于媒介回放的video和audio元素; (3) 对本地离线存储有更好的支持,localStorage长期存储数据,浏览器关闭后数据不丢失;sessionStorage的数据在浏览器关闭后自动删除; (4) 语意化更好的内容元素,比如header,nav,section,article,footer; (5) 新的表单控件:calendar,date,time,email,url,search; (6) 新的技术webworker,websockt、Geolocation;

(1) 纯表现的元素:basefont,big,center,font,s,strike,tt,u; (2) 对可用性产生负面影响的元素:frame,frameset,noframes;

IE8/IE7/IE6支持document.createElement方法产生的标签,可以利用这一特性让这些浏览器支持HTML5新标签,浏览器支持新标签后,还需要添加标签默认的样式。

7. html5哪些标签可以做SEO优化?

title、meta、header、footer、nav、article、aside

8. src和href的区别

  • src是指向外部资源的位置,指向的内容会嵌入到文档中当前标签所在的位置,在请求src资源时会将其指向的资源下载并应用到文档内,如js脚本,img图片和frame等元素。当浏览器解析到该元素时,会暂停其他资源的下载和处理,知道将该资源加载、编译、执行完毕,所以一般js脚本会放在底部而不是头部。
  • href是指网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,用于超链接。

9. 渐进增强和优雅降级

  • 渐进增强:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能,达到更好的用户体验。
  • 优雅降级:一开始就构建完整的功能,然后再针对低版本的浏览器进行兼容。

10. defer和async的区别

  • defer要等到整个页面在内存中正常渲染结束(DOM结构完全生成,以及其他脚本执行完成),才会执行。多个defer脚本会按照它们在页面出现的顺序加载。==“渲染完再执行”==
  • async一旦下载完,渲染引擎就会中断渲染,执行这个脚本以后,再继续渲染。多个async脚本是不能保证加载顺序的。==“下载完就执行”==

11. 如何实现浏览器内多个标签页之间的通信?

方法一:调用localstorge

标签页1:

<input id="name">  
<input type="button" id="btn" value="提交">

<script type="text/javascript">  
    $(function(){    
        $("#btn").click(function(){    
           var name=$("#name").val();    
            localStorage.setItem("name", name); //存储需要的信息 
        });     
   });    
</script>  

标签页2:

$(function(){   
    window.addEventListener("storage", function(event){    
       console.log(event.key + "=" + event.newValue);    
    });     //使用storage事件监听添加、修改、删除的动作  
});  

方法二:使用cookie+setInterval

将要传递的信息存储在cookie中,每隔一定时间读取cookie信息,即可随时获取要传递的信息。

标签页1:

$(function(){    
    $("#btn").click(function(){    
        var name=$("#name").val();    
        document.cookie="name="+name;    
    });    
});    

标签页2:

 $(function(){   
    function getCookie(key) {    
       return JSON.parse("{\"" + document.cookie.replace(/;\s+/gim,"\",\"").replace(/=/gim, "\":\"") + "\"}")[key];    
    }     
    setInterval(function(){    
       console.log("name=" + getCookie("name"));    
    }, 10000);    
});  

CSS部分

1. css盒模型

  • IE盒模型 box-sizing:border-box;(怪异模式);
  • W3C标准盒模型 box-sizing:content-box;(标准模式)。

应用场景:

(1)表单: 表单中有一些input元素其实还是展现的是传统IE盒模型,带有一些默认的样式,而且在不同平台或者浏览器下的表现不一,造成了表单展现的差异。此时我们可以通过box-sizing属性来构建一个风格统一的表单元素。

(2)设置子类元素的margin或者border时,可能会撑破父层元素的尺寸,这时我就需要使用box-sizing: border-box来将border包含进元素的尺寸中,这样就不会存在撑破父层元素的情况了。

2. 行内元素和块级元素的区别?行内块级元素的兼容性使用?(IE8以下)

(1)各占一行,垂直方向排列; (2)可以包含其他块级或者行内元素; (3)高度、行高以及外边距和内边距都可控制; (4)默认宽度是它本身父容器的100%(和父元素的宽度一致),与内容无关。

  • 行内元素:span,a,label,input,img,strong,em

(1)水平方向排列,不会自动换行; (2)不可以包含块级元素,但是可以包含其他行内元素或者文本; (3)行内元素设置width、height无效(可以设置line-height),margin和padding上下无效; (4)宽度就是它的文字和图片的宽度,不可改变。

  • 行内块级元素在IE8以下的兼容性(块元素模拟inline-block)
div {
    display: inline-block;
    zoom: 1;   //在IE下触发hasLayout
    display:inline;//一旦触发了hasLayout设置display:inline和display:block效果相似。
}

haslayout 是IE7-浏览器的特有属性。hasLayout是一种只读属性,有两种状态:true或false。当其为true时,代表该元素有自己的布局,否则代表该元素的布局继承于父元素。 注意: 通过element.currentStyle.hasLayout可以得出当前元素的hasLayout情况。

3. 页面导入样式时,使用link和@import有什么区别?

(1)link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。 (2)link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。 (3)link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器(IE5以下)不支持。 (4)link支持使用Javascript控制DOM去改变样式;而@import不支持。

4. 清除浮动有哪些方式?

(1)在浮动元素下方添加一个非浮动元素

<div>
    <div style="float:left;width:45%;"></div>
    <div style="float:right;width:45%;"></div>
    <div style="clear:both;"></div>
</div>

父容器现在必须考虑非浮动子元素的位置,而后者肯定出现在浮动元素下方,所以显示出来,父容器就把所有子元素都包括进去了。这种方法比较简单,但是要在页面中增加冗余标签,违背了语义网的原则。

(2)将父容器也改成浮动定位

<div style="float:left;">
    <div style="float:left;width:45%;"></div>
    <div style="float:right;width:45%;"></div>
</div>

这种方法不用修改HTML代码,但是缺点在于父容器变成浮动以后,会影响到后面元素的定位,而且有时候,父容器是定位死的,无法变成浮动。

(3)父容器设置overflow: hidden或者auto。(开启BFC)

<div style="overflow: hidden;">
    <div style="float:left;width:45%;"></div>
    <div style="float:right;width:45%;"></div>
</div>

缺点:一个是IE6不支持,另一个是一旦子元素的大小超过父容器的大小,就会出显示问题。

(4)利用:after伪选择符,在父容器的尾部自动创建一个子元素 ==(推荐这种)==

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}
//兼容ie6:激活父元素的"hasLayout"属性,让父元素拥有自己的布局
.clearfix {
    zoom: 1;  //或者height:1%;
}

5. 简单介绍BFC和IFC

BFC —— 块级格式化上下文

(1)BFC触发条件:

  • 根元素或其他包含他的元素
  • 浮动元素 float:left/right
  • position:absolute/fixed
  • display:inline-block,table-cell,table-caption
  • overflow不为visible
  • 弹性盒子:display: flex 或 inline-flex

(2)BFC特性

  • 内部的Box会在垂直方向上一个接一个的放置;
  • 垂直方向的距离有margin决定(属于同一个BFC的两个相邻Box的margin会发生重叠,与方向无关);
  • 每个元素的margin box的左边, 与包含块border; box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此;
  • BFC的区域不会与float的元素区域重叠;
  • 计算BFC的高度时,浮动子元素也参与计算,可以解决父元素高度塌陷问题;
  • BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面元素,反之亦然;
  • 文档流中的BFC元素, width为auto时,会占满当前行的剩余宽度。

(3)应用

  • 阻止两个相邻的普通流中的块元素垂直方向上的margin折叠;
  • BFC可以包含浮动元素,撑开父元素;
  • BFC可以阻止元素被浮动元素覆盖。

(4)BFC与hasLayout

IE6-7不支持BFC,而是使用私有属性hasLayout,要用zoom:1触发hasLayout属性。Zoom用于设置或检索元素的缩放比例,值为“1”即使用元素的实际尺寸。

IFC —— 行内格式化上下文

(1)创建方式:

和BFC相比,它的创建方式是被动的、隐式的,是由所包含的子元素来创建:只有在一个区域内仅包含可水平排列的元素时才会生成,这些子元素可以是文本、inline-level元素或inline-block-level元素。

(2)特性:

  • IFC内部的元素,按从左到右、从上到下的顺序排布;
  • IFC内部的每个元素,都可以通过设置vertical-align属性,来调整在垂直方向上的对齐;
  • 包含这些内部元素的矩形区域,形成的每一行,被称为line box(行框)。

6. 选择器优先级

!important>行内样式>id选择器>类选择器>标签选择器>通配符>继承

权重算法:(0,0,0,0) ——> 第一个0对应的是important的个数,第二个0对应的是id选择器的个数,第三个0对应的类选择器的个数,第四个0对应的是标签选择器的个数,合起来就是当前选择器的权重。

比较:先从第一个0开始比较,如果第一个0大,那么说明这个选择器的权重高,如果第一个相同,比较第二个,依次类推。

7. 怎么实现水平垂直居中

(1)行内元素的水平居中

text-align: center;
line-height: 100px;

(2)块级元素水平居中

margin: 0 auto;

(3)已知高度宽度元素的水平垂直居中

.container{
    width: 600px;
    height: 600px;
    position: relative;
}
.center{
    width: 300px;
    height: 300px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -150px 0 0 -150px;
}
.container{
    width: 600px;
    height: 600px;
    position: relative;
}
.center{
    width: 300px;
    height: 300px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

(4)未知高度和宽度元素的水平垂直居中

  • 被居中的元素是inline或者inline-block元素
.container{
    width: 600px;
    height: 600px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.container{
    width: 100%;
    height: 600px;
    position: relative;
}
.center{
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.container{
    width: 100%;
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.container{
    display: flex;
    height: 600px;
}
.center{
    margin : auto;
}

8. 实现左边定宽,右边自适应布局

(1)左盒子左浮动,右盒子width=100% (2)左盒子左浮动,右盒子margin-left=左盒子宽度 (3)左盒子左浮动,右盒子右浮动,设置width: calc(100% - 左盒子宽度) (4)父容器设置display:flex,右盒子flex:1

9. 实现中间自适应宽度,左右两栏固定宽度布局

两招搞定三栏布局——圣杯布局、双飞翼布局

10. 脱离文档流

(1) 浮动脱离文档流:使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的文本依然会为这个元素让出位置,环绕在周围。 (2) 绝对定位脱离文档流:使用absolute: position | fixed 脱离文档流的元素,其他盒子与其他盒子内的文本都会无视它。

11. CSS3新特性

  • 颜色:新增RGBA、HSLA模式
  • 文字阴影(text-shadow)
  • 边框:圆角(border-radius)边框阴影:box-shadow
  • 盒子模型:box-sizing
  • 背景:background-size设置背景图片的尺寸,background-origin设置背景图片的原点,background-clip设置背景图片的裁剪区域,以“,”分隔可以设置多背景,用于自适应布局
  • 渐变:linear-gradient、radial-gradient
  • 过渡:transition可实现动画
  • 自定义动画
  • 在CSS3中唯一引入的伪元素是::selection
  • 多媒体查询、多栏布局
  • border-image
  • 2D转换:transform:translate(x,y)rotate(x,y)skew(x,y)scale(x,y)
  • 3D转换

12. display:none;与visibility:hidden的区别是什么?

(1) display:none; HTML元素(对象)的宽高,高度等各种属性值都将“丢失”,视为不存在,而且不加载。

(2) visibility:hidden; HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在,也即是说它仍然具有高度,宽度等属性值。

13. 响应式布局原理

媒体查询,查询到当前屏幕(媒介媒体)的宽度,针对不同的屏幕宽度设置不同的样式来适应不同屏幕。

14. flex布局

flex布局可以看阮一峰老师的这两篇文章: Flex 布局教程:语法篇Flex 布局教程:实例篇 ,讲的非常详细。

(1)设置在容器上的属性

  • flex-direction:row | row-reverse | column | column-reverse 项目的排列方向
  • flex-wrap:nowrap | wrap | wrap-reverse 是否换行
  • flex-flow:<flex-direction> || <flex-wrap> flex-direction和 flex-wrap的简写
  • justify-content:flex-start | flex-end | center | space-between | space-around 在水平方向上的对齐方式
  • align-items: flex-start | flex-end | center | baseline | stretch 定义在垂直方向上的对齐方式
  • align-content: flex-start | flex-end | center | space-between | space-around | stretch 定义了多根轴线的对齐方式,如果项目只有一根轴线,那么该属性将不起作用(item有多行时)

(2)设置在项目上的属性

  • order:<number> 定义项目在容器中的排列顺序,数值越小,排列越靠前,默认值为 0
  • flex-basis:<length> | auto 定义了在分配多余空间之前,项目占据的主轴空间,浏览器根据这个属性,计算主轴是否有多余空间
  • flex-grow: <number> 定义项目的放大比例。默认值为 0,即如果存在剩余空间,也不放大
  • flex-shrink: <number> 定义项目的缩小比例。默认值: 1,即如果空间不足,该项目将缩小,负值对该属性无效。
  • flex:none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]flex-grow, flex-shrink 和 flex-basis的简写 默认值:0 1 auto, 即不放大,可缩小,大小就是项目本身的大小。
  • align-self:auto | flex-start | flex-end | center | baseline | stretch 允许单个项目有与其他项目不一样的对齐方式

之后仍会继续更新…

原文链接:https://segmentfault.com/a/1190000015960009

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-37693.html

文章标题:2019届校招前端面试题整理——HTML、CSS篇

相关文章
css布局的各种FC简单介绍:BFC,IFC,GFC,FFC
什么是FC? Formatting Context,格式化上下文,指页面中一个渲染区域,拥有一套渲染规则,它决定了其子元素如何定位,以及与其他元素的相互关系和作用。 BFC 什么是BFC Block Formatting Context,块...
2018-05-17
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
破解前端面试(80% 应聘者不及格系列):从 闭包说起
不起眼的开始 招聘前端工程师,尤其是中高级前端工程师,扎实的 JS 基础绝对是必要条件,基础不扎实的工程师在面对前端开发中的各种问题时大概率会束手无策。在考察候选人 JS 基础的时候,我经常会提供下面这段代码,然后让候选人分析它实际运行的结...
2017-06-02
HTML5的5个不错的开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
2015-11-12
HTML5凭什么可以代替Flash
本世纪初,全球网络建设仍处于早期阶段,发达国家网民刚刚在从窄带向宽带网络过渡。由于网络带宽、PC运算速度等因素限制,早期的网站基本以静态文字和图片内容为主。但随着宽带网络在全球范围快速普及,网民对内容的需求也不断变化。死板的文字加图片的网站...
2015-11-12
前端交流QQ群
我们建立了一个前端交流QQ群供大家交流,有什么问题都可以在群里提问,欢迎你的加入,也希望我们大家能够在群里互帮互助,同时也能学到东西。 我们相信,前端有你更精彩! 为了让更多的小伙伴加入我们,欢迎大家转发扩散! 长按以上二维码加入我们 ...
2016-04-01
HTML5究竟会火到什么地步
这已经是第N次,HTML5火热了起来,这次的火热是否可以延续? H5的最大优势就是可以在网页上直接调试和修改,而且更重要的是,它几乎不用考虑用户的机型与适配性问题。智能手机主要被分裂为两大系统:Android和iOS,一个做应用的团队,怎么...
2015-11-12
2014年最流行前端开发框架对比评测
如今,各种开发框架层出不穷,各有千秋。哪些是去年较受开发者关注的呢?前不久,云适配根据Github上的流行程度整理了2014年最受欢迎的6个前端开发框架,并进行对比说明,希望帮助有需要的朋友选择合适自己的前端框架。 1. Bootstrap...
2015-11-12
必须记住的 30 类 CSS 选择器
开篇 有 30 个 CSS 选择器你必须烂熟于心,它们适应于当今各大主流浏览器。 1.* * { margin: 0; padding: 0; } *选择器选择的是每一个单一元素。很多程序员用上面的 CSS 将所有元素的 ma...
2015-11-16
CSS2.0帮助文档(参考手册)chm下载
下载地址:CSS2.0帮助文档(参考手册)chm下载 友情提示:如果打开空白,在手册上右键属性解除锁定即可。 ...
2015-11-12
回到顶部