最近面试题总结 HTML+CSS篇

HTML

Doctype作用？严格模式与混杂模式如何区分？它们有何意义?

（1）<!DOCTYPE>声明位于HTML文档中的第一行，处于标签之前，用于告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。（2）标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作。（3）如果HTML文档包含形式完整的DOCTYPE，那么他一般以标准模式呈现。对于HTML4.01文档，包含严格DTD的DOCTYPE常常导致页面已标准模式呈现。DOCTYPE不存在或者格式不正确会导致文档已混杂模式呈现。

HTML5 为什么只需要写 <!DOCTYPE HTML>？

（1）HTML5不基于SGML，因此不需要对DTD进行引用，但是需要DOCTYPE来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；
（2）HTML4.01基于SGML，所以需要对DTD进行引用，才能让浏览器知道该文档所使用的文档类型。

介绍一下你对浏览器内核的理解？常见的浏览器内核有哪些？

浏览器最重要或者说核心的部分是“Rendering Engine”，可大概译为“渲染引擎”，不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释（如标准通用标记语言下的一个应用HTML、JavaScript）并渲染（显示）网页。所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同，这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。

Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML] Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等。 Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;] Webkit内核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）] EdgeHTML内核：Microsoft Edge。 [此内核其实是从MSHTML fork而来，删掉了几乎所有的IE私有特性]

html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 ?

新增了以下的几大类元素
内容元素，article、footer、header、nav、section。
表单控件，calendar、date、time、email、url、search。
控件元素，webworker, websockt, Geolocation。
移出的元素有下列这些
显现层元素：basefont，big，center，font, s，strike，tt，u。
性能较差元素：frame，frameset，noframes。
新的技术 canvas,svg,webworker, websocket, Geolocation….
HTML5已形成了最终的标准，概括来讲，它主要是关于图像，位置，存储，多任务等功能的增加。新增的元素有绘画 canvas ，用于媒介回放的 video 和 audio 元素，本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失，而sessionStorage的数据在浏览器关闭后自动删除

简述一下你对HTML语义化的理解。

（1）HTML语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；（2）即使在没有样式CSS的情况下也能以一种文档格式显示，并且是容易阅读的；（3）搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，有利于SEO；

（4）使阅读源代码的人更容易将网站分块，便于阅读、维护和理解。

请描述一下 cookies，sessionStorage 和 localStorage 的区别？

Web Storage有两种形式：LocalStorage（本地存储）和sessionStorage（会话存储）。这两种方式都允许开发者使用js设置的键值对进行操作，在在重新加载不同的页面的时候读出它们。这一点与cookie类似。（1）与cookie不同的是：Web Storage数据完全存储在客户端，不需要通过浏览器的请求将数据传给服务器，因此x相比cookie来说能够存储更多的数据，大概5M左右。（2）LocalStorage和sessionStorage功能上是一样的，但是存储持久时间不一样。 LocalStorage：浏览器关闭了数据仍然可以保存下来，并可用于所有同源（相同的域名、协议和端口）窗口（或标签页）； sessionStorage：数据存储在窗口对象中，窗口关闭后对应的窗口对象消失，存储的数据也会丢失。注意：sessionStorage 都可以用localStorage 来代替，但需要记住的是，在窗口或者标签页关闭时，使用sessionStorage 存储的数据会丢失。（3）使用 local storage和session storage主要通过在js中操作这两个对象来实现，分别为window.localStorage和window.sessionStorage. 这两个对象均是Storage类的两个实例，自然也具有Storage类的属性和方法。

iframe 有哪些缺点？

（1）iframe会阻塞主页面的Onload事件；（2）搜索引擎的检索程序无法解读这种页面，不利于SEO；（3）iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。（4）使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好通过JavaScript动态给iframe添加src属性值，这样可以绕开以上两个问题。

Label的作用是什么？如何使用？

label标签来定义表单控制间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。 Number: Date:

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

调用 localStorage、cookies 等本地存储方式
方法一：使用localStorage

使用localStorage.setItem(key,value);添加内容

使用storage事件监听添加、修改、删除的动作

window.addEventListener(“storage”,function(event){
$(“#name”).val(event.key+”=”+event.newValue);
});
方法二、使用cookie+setInterval

HTML代码

<inputid=”name”><input type=”button” id=”btnOK”value=”发送”>
JS代码-页面1

$(function(){
$(“#btnOK”).click(function(){
varname=$(“#name”).val();
document.cookie=”name=”+name;
});
});
JS代码-页面2

//获取Cookie天的内容
function getKey(key) {
    return JSON.parse("{\""+ document.cookie.replace(/;\s+/gim,"\",\"").replace(/=/gim, "\":\"") +"\"}")[key];
}
//每隔1秒获取Cookie的内容
setInterval(function(){
    console.log(getKey("name"));
 },1000);

CSS

怎么让一个不定宽高的 DIV，垂直水平居中?

使用Flex

只需要在父盒子设置：display: flex; justify-content: center;align-items: center;

使用 CSS3 transform

父盒子设置:display:relative

Div 设置: transform: translate(-50%，-50%);position: absolute;top: 50%;left: 50%;

使用 display:table-cell 方法

父盒子设置:display:table-cell; text-align:center;vertical-align:middle;

Div 设置: display:inline-block;vertical-align:middle;

position 几个属性的作用

position 的常见四个属性值: relative，absolute，fixed，static。一般都要配合”left”、”top”、”right” 以及 “bottom” 属性使用。

static:默认位置，在一般情况下，我们不需要特别的去声明它，但有时候遇到继承的情况，我们不愿意见到元素所继承的属性影响本身，从而可以用Position:static取消继承，即还原元素定位的默认值。设置为 static 的元素，它始终会处于页面流给予的位置(static 元素会忽略任何 top、 bottom、left 或 right 声明)。一般不常用。

relative:相对定位，相对定位是相对于元素默认的位置的定位，它偏移的 top，right，bottom，left 的值都以它原来的位置为基准偏移，而不管其他元素会怎么样。注意 relative 移动后的元素在原来的位置仍占据空间。

absolute:绝对定位，设置为 absolute 的元素，如果它的父容器设置了 position 属性，并且 position 的属性值为 absolute 或者 relative，那么就会依据父容器进行偏移。如果其父容器没有设置 position 属性，那么偏移是以 body 为依据。注意设置 absolute 属性的元素在标准流中不占位置。

fixed:固定定位，位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。不论窗口滚动与否，元素都会留在那个位置。它始终是以 body 为依据的。注意设置 fixed 属性的元素在标准流中不占位置。

清除浮动的方法

方法1：给父级div定义高度 原理：给父级DIV定义固定高度（height），能解决父级DIV 无法获取高度得问题。优点：代码简洁缺点：高度被固定死了，是适合内容固定不变的模块。（不推荐使用）

方法二：使用空元素，如
(.clear{clear:both}) 原理：添加一对空的DIV标签，利用css的clear:both属性清除浮动，让父级DIV能够获取高度。优点：浏览器支持好缺点：多出了很多空的DIV标签，如果页面中浮动模块多的话，就会出现很多的空置DIV了，这样感觉视乎不是太令人满意。（不推荐使用）

方法三：让父级div 也一并浮起来 这样做可以初步解决当前的浮动问题。但是也让父级浮动起来了，又会产生新的浮动问题。不推荐使用

方法四：父级div定义 display:table 原理：将div属性强制变成表格优点：不解缺点：会产生新的未知问题。（不推荐使用）

方法五：父元素设置 overflow：hidden、auto； 原理：这个方法的关键在于触发了BFC。在IE6中还需要触发 hasLayout（zoom：1）优点：代码简介，不存在结构和语义化问题缺点：无法显示需要溢出的元素（亦不太推荐使用）

方法六：父级div定义伪类:after 和 zoom
1
2
3
4
5
6
7
8
9
10
> .clearfix:after{
>     content:'.';
>     display:block;
>     height:0;
>     clear:both;
>     visibility: hidden;
> }
> .clearfix {zoom:1;}
> 复制代码
>

原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题优点：结构和语义化完全正确,代码量也适中，可重复利用率（建议定义公共类）缺点：代码不是非常简洁（极力推荐使用）

经益求精写法
1
2
3
4
5
6
7
8
> .clearfix:after {
>     content:”\200B”; 
>     display:block; 
>     height:0; 
>     clear:both;
>  }
> .clearfix { *zoom:1; } 照顾IE6，IE7就可以了
>

什么是 BFC
定义：BFC(Block formatting context)直译为”块级格式化上下文”。它是一个独立的渲染区域，只有 Block-level box 参与，它规定了内部的 Block-level Box 如何布局，并且与这个区域外部毫不相干。

BFC布局规则 BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
- BFC这个元素的垂直方向的边距会发生重叠，垂直方向的距离由margin决定，取最大值
- BFC 的区域不会与浮动盒子重叠（清除浮动原理）。
- 计算 BFC 的高度时，浮动元素也参与计算。
哪些元素会生成 BFC
- 根元素
- float 属性不为 none
- position 为 absolute 或 fixed
- display 为 inline-block， table-cell， table-caption， flex， inline-flex
- overflow 不为 visible
box-sizing

设置CSS盒模型为标准模型或IE模型。标准模型的宽度只包括content，二IE模型包括border和padding
box-sizing属性可以为三个值之一：

content-box，默认值，只计算内容的宽度，border和padding不计算入width之内

padding-box，padding计算入宽度内

border-box，border和padding计算入宽度之内
px，em，rem 的区别

px 像素(Pixel)。绝对单位。像素 px 是相对于显示器屏幕分辨率而言的，是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果 px 要换算成物理长度，需要指定精度 DPI。

em 是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固定的值。

rem 是 CSS3 新增的一个相对单位(root em，根 em)，使用 rem 为元素设定字体大小时，仍然是相对大小，但相对的只是 HTML 根元素。

CSS 引入的方式有哪些? link 和@import 的区别是?
有四种：内联(元素上的style属性)、内嵌(style标签)、外链(link)、导入(@import) link和@import的区别：
- link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
- link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
- link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
- link支持使用Javascript控制DOM去改变样式；而@import不支持。
流式布局与响应式布局的区别

流式布局 使用非固定像素来定义网页内容，也就是百分比布局，通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。

响应式开发 利用CSS3 中的 Media Query(媒介查询)，通过查询 screen 的宽度来指定某个宽度区间的网页布局。

超小屏幕(移动设备) 768px 以下

小屏设备 768px-992px

中等屏幕 992px-1200px

宽屏设备 1200px 以上

渐进增强和优雅降级

优雅降级一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。。
渐进增强针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
CSS隐藏元素的几种方式及区别
display:none
- 元素在页面上将彻底消失，元素本来占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘。
- 不会触发其点击事件
visibility:hidden
- 和display:none的区别在于，元素在页面消失后，其占据的空间依旧会保留着，所以它只会导致浏览器重绘而不会重排。
- 无法触发其点击事件
- 适用于那些元素隐藏后不希望页面布局会发生变化的场景
opacity:0
- 将元素的透明度设置为0后，在我们用户眼中，元素也是隐藏的，这算是一种隐藏元素的方法。
- 和visibility:hidden的一个共同点是元素隐藏后依旧占据着空间，但我们都知道，设置透明度为0后，元素只是隐身了，它依旧存在页面中。
- 可以触发点击事件