HTML、CSS面试题整理

面试

前言

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：

1
2
3
4
5
6
7
8
9
10
11
<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：

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

方法二：使用cookie+setInterval

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

标签页1：

1
2
3
4
5
6
$(function(){    
    $("#btn").click(function(){    
        var name=$("#name").val();    
        document.cookie="name="+name;    
    });    
});

标签页2：

1
2
3
4
5
6
7
8
 $(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以下）

  • 块级元素：div,p,h1,form,ul,li

（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）
    1
    2
    3
    4
    5
    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）在浮动元素下方添加一个非浮动元素

1
2
3
4
5
<div>
    <div style="float:left;width:45%;"></div>
    <div style="float:right;width:45%;"></div>
    <div style="clear:both;"></div>
</div>

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

（2）将父容器也改成浮动定位

1
2
3
4
<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）

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

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

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

1
2
3
4
5
6
7
8
9
.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）行内元素的水平居中

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

（2）块级元素水平居中

1
margin: 0 auto;

（3）已知高度宽度元素的水平垂直居中

  • 利用绝对定位和负边距实现

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    .container{
        width: 600px;
        height: 600px;
        position: relative;
    }
    .center{
        width: 300px;
        height: 300px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -150px 0 0 -150px;
    }

  • 利用绝对定位和margin

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.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元素

    1
    2
    3
    4
    5
    6
    7
    .container{
        width: 600px;
        height: 600px;
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }

  • css3的transform属性

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    .container{
        width: 100%;
        height: 600px;
        position: relative;
    }
    .center{
        position:absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

  • flex布局

    1
    2
    3
    4
    5
    6
    7
    .container{
        width: 100%;
        height: 600px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

  • 最简单的写法：

1
2
3
4
5
6
7
.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 允许单个项目有与其他项目不一样的对齐方式

之后仍会继续更新…

关于HTTP方面的相关知识，可以看我总结的这篇文章： HTTP协议知识点总结

JavaScript相关的基础知识可以看这两篇思维导图： 你不知道的JavaScript（上卷） ， 你不知道的JavaScript（中卷）第一部分

中卷第二部分和下卷还在整理中。