HTML、CSS面试题大全

HTML、CSS面试题大全（套题）

选择题	填空题	问答题	编程题	试题难度
0	0	40	2	一般

试题信息收集不易，转发请带上出处，不甚感谢！如果您对任何编程问题还有疑问，欢迎点击下方按钮向老师提问！

问答题

```
1、什么是盒子模型？
```
老师答案

盒子模型有两种，标准盒子和IE盒子。他们的区别是这样的，

标准盒子的宽度= width+padding+border

IE盒子的宽度= width

两种模型可以通过box-sizing属性相互转换：

标准模型为 box-sizing:content-box; IE模型为：box-sizing:border-box; 默认是标准模型，但有时为了布局更稳定采用IE盒子模型。

```
2、简述一下src和href的区别
```
老师答案

1、请求资源类型不同
（1） href是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。

（2）在请求 src 资源时会将其指向的资源下载并应用到文档中，常用的有script，img 、iframe；

2、作用结果不同
（1）href 用于在当前文档和引用资源之间确立联系；

（2）src 用于替换当前内容；

3、 浏览器解析方式不同
（1）若在文档中添加href ，浏览器会识别该文档为 CSS 文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式加载 CSS，而不是使用 @import 方式。

（2）当浏览器解析到src ，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等也如此，类似于将所指向资源应用到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因。

```
3、link和@import的区别
```
老师答案

两者都是外部引用 CSS 的方式，但是存在一定的区别：

（1）link除了应用样式还可以引入网站图标；而@import只用于加载CSS。

（2）加载时机不同，link在页面载入时同时加载样式；而@import需要页面完全载入以后再加载。

（3）兼容性不同：link无兼容问题；而@import则是在CSS2.1提出的，低版本的浏览器不支持。

（4）JavaScript操作不同：link可以当作DOM操作来改变样式；而@import不支持。

4、css中如何设置英文首字母大写？

老师答案

text-transform的属性值为text-transform:capitalize。

```
5、px、em、rem的区别
```
老师答案

一、px是像素，显示的大小依赖显示器的分辨率。

二、em相对于父元素的font-sze的比例，rem相对于<html>标签的font-size的比例。

```
6、写出几种解决IE6Bug的方法
```
老师答案

1）双边距BUG：float引起的，使用display:inline（在IE7,Firefox等浏览器下能正确解释左边距10px。但是在IE6下会理解为左边距20px。也就是说，在与浮动同方向的空白边会加倍，解决方法是为这个div的css中添加：display:inline，这样就可避免双倍边距bug）

2）3px空隙问题：float引起的，使用display：inline （当使用float浮动容器后，在IE6下会产生3px的空隙，因为是确切的3px，所以可以设置负边距来解决，比如.left{margin-right:-3px;}

3）超链接hover点击后失效：使用正确的书写顺序 link visited hover active

4）给子元素设置z-index不生效：给父级添加position:relative

5）min-height不生效：在min-height的末尾加上！important解决

6）IE6中奇数宽高的bug： IE6还有奇数宽高的bug，解决方案就是将外部相对定位的div宽度改为偶数

7）IE6下图片下方有空隙产生：解决这个bug的方法也有很多，可以是改变HTML的排版，或者定义img为display：block；或者定义vertical-align属性值为vertical-align：top | bottom | middle | text-bottom；可以设置父容器的字体大小为零，font-size:0

8）select 在ie6下遮盖使用iframe嵌套

9）为什么没有办法定义1px左右的宽度容器(IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px)

```
7、W3C的理解
```
老师答案

（1）web标准规范要求，书写标签必须闭合、标签小写、不乱嵌套，可提高搜索机器人对网页内容的搜索几率；

（2）建议使用外链css和js脚本，从而达到结构与行为、结构与表现的分离，提高页面的渲染速度，能更快地显示页面的内容；

（3）样式与标签的分离，更合理的语义化标签，使内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，从而降低维护成本、改版更方便；

（4）不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性；遵循w3c制定的web标准，能够使用户浏览者更方便的阅读，使网页开发者之间更好的交流。

```
8、页面渲染的原理是什么
```
老师答案

第一步：渲染引擎根据标签构建DOM节点

第二步：根据css样式构建渲染树，包括元素的大小、颜色，隐藏的元素不会被构建到该树中。

第三步：根据css样式构建布局树，主要是确定元素要显示的位置。

第四步：根据前面的信息，绘制渲染树。

```
9、页面优化有哪些方法
```
老师答案

请求HTTP请求：合并文件、CSS精灵、inline Image
减少DNS查询
DNS查询完成之前浏览器不能从这个主机下载任何任何文件。方法：DNS缓存、将资源分布到恰当数量的主机名，平衡并行下载和DNS查询
避免重定向：多余的中间访问
重定向状态码：302Found被找到了，但不在原来的地址，临时重定向
状态码：301Move Permanently 永久重定向
对用户来说，301、302没有区别；对搜索引擎来说，区别很大
使Ajax可缓存
非必须组件延迟加载
未来所需组件预加载
减少DOM元素数量
优化DOM操作的方式：
1.1 用cssText来合并多次DOM操作。

  var el = document.getElementById('mydiv');   
  el.style.borderLeft = '1px';   
  el.style.borderRight = '2px';   
  el.style.padding = '5px';

改为：

	var el = document.getElementById('mydiv');   
	l.style.cssText = 'border-left: 1px; border-right: 2px; padding: 5px;';

1.2 将需要多次重排的元素position设置为absolute和fixed,这样元素就脱离了文档流，它的变化就不会影响其他元素的渲染。例如针对有动画效果的元素。

1.3 减少对DOM元素的查询和修改，查询时可将其赋值给局部变量。

	 divUpdate.innerHTML = "";
	 for ( var i=0; i<100; i++ )
	 {
	  divUpdate.innerHTML += "<SPAN>This is a slower method! </SPAN>";
	 }

改成：

将资源放到不同的域下：浏览器同时从一个域下载资源的数目有限，增加域可以提高并行下载量
减少iframe数量
不要404

Server方面

使用CDN
内容分发网络，就近使用服务器获得资源，减少网络拥塞。
添加Expires或者Cache-Control响应头
当服务器开启了expire模块的时候，浏览器发送请求，服务器机会返回一个带expire的http请求头
expire头的值是一个时间值，值就是资源在本地的过期时间、存在本地、在本地缓存阶段，找到一个对应的资源值，当前时间还没超过资源的过期时间，就直接使用这一个资源，不会发送http请求。
cache-control和expires类似，但是有更多的选项值。
对组件使用Gzip压缩
本地压缩
服务器压缩
配置实体标签ETag
Flush Buffer Early
Ajax使用GET进行请求
避免空src的img标签
Cookie方面
减小cookie大小
引入资源的域名不要包含cookie

css方面

将样式表放到页面顶部
不使用CSS表达式
css表达式：就是将CSS和javascript联系起来。
使用不使用@import
不使用IE的Filter

Javascript方面

将脚本放到页面底部
将javascript和css从外部引入
提高了复用性
减少页面体积
提高了可维护性
利大于弊，缺点是页面的渲染速度有下降
压缩javascript和css
在正式上线项目之前，将js和CSS都进行压缩，使线上版本是最轻量的。
删除不需要的脚本
减少DOM访问
合理设计事件监听器

图片方面

优化图片：根据实际颜色需要选择色深、压缩
优化css精灵
不要在HTML中拉伸图片
保证favicon.ico小并且可缓存

移动方面

保证组件小于25k

```
10、CSS有哪些继承属性
```
老师答案

关于文字排版的属性如：
font
text-align
text-shadow(文字阴影)
text-transform(控制文本的大小写)
text-indent（规定文本块中首行文本的缩进）
word-spacing（改变字（单词）之间的标准间隔）
letter-spacing（修改字符或字母之间的间隔）
word-break（）
line-height
color
visibility
cursor

```
11、元素定位有哪些？
```
老师答案

position是元素定位属性：

absolute绝对定位
相对位置为父元素为非static的第一个父元素进行定位。
fixed 固定定位（老IE6不支持）
相对于浏览器窗口进行定位。
relative相对定位
相对于其正常（默认布局）位置进行定位。
static
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）

所有的定位如果left、top、right、bottom属性都为默认值，则为默认定位 absolute定位会脱离文档，浮动起来，多个层重叠可以使用z-index属性改变层叠顺序 absolute定位忽略padding，相对位置为相对定位容器的左上角内边框

12、::before和：before有什么区别？

老师答案

相同点
都可以用来表示伪类对象，用来设置对象前的内容
:befor和::before写法是等效的
不同点
:befor是Css2的写法，::before是Css3的写法
:before的兼容性要比::before好，不过在H5开发中建议使用::before比较好

```
13、CSS的优先级是怎样的？
```
老师答案

!important>style>权重值，其中标签的权重值是1，class的权重值是10，id的权重值是100，如果权重值相同，则遵循就近原则。最后定义的那个属性起作用。

```
14、如何居中一个元素？
```
老师答案

我在项目中是使用弹性盒子的方式，让父容器display:felx,然后设置 justify-content: center; align-items:center;这样就让子元素水平垂直居中对齐

```
15、为什么要初始化样式？
```
老师答案

因为浏览器的兼容的问题，不同浏览器有些标签的默认值是不同的，如果没有CSS初始化往往会出现浏览器之间的

16、用纯CSS创建一个三角形的原理

老师答案

采用的是均分原理,把矩形分为4等份,这4等份其实都是边框。核心就是给块级元素设置宽高为0,设置边框的宽度,不需要显示的边框使用透明色;

17、CSS样式-如何清除元素浮动？

老师答案

1、clear:both （常用）；

2、overflow:hidden；

3、浮动父元素；

4、在浮动元素的后面添加一个去除浮动的元素。

```
18、CSS3有哪些新特性？
```
老师答案

在项目中常用的有

过渡属性transition，动画属性animation，圆角border-radius，盒子阴影box-shadow，transform转换，可用于旋转，移动等特效，还有媒体查询，弹性盒子等

19、html5有哪些新特性、移除了那些元素？

老师答案

html5新特性有这些：
在HTML标签上新增了一些语义标签， 像<header> <footer> <nav> <section><article><aside>这些。还有视频<video>，音频<audeo>，以及画布<canvas>标签。
在CSS3新增了圆角演示border-radius ,弹性盒子 display:flex ,动画过渡transition，还新增了属性，并集、交集、子集这些选择器。
在JS方面新增了本地存储localStorage、sessionStorage，WebSocket通信，拖拽释放API。
 
移除的元素有：
<center>，<font>, <u> 以及框架集相关的标签<frame>，<frameset>，<noframes>；

20、img标签上title和alt属性的区别是什么？

老师答案

alt当图片不显示时是文字代表

title为该属性提供信息

```
21、前端要注意的SEO有哪些？
```
老师答案

合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；
description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；
keywords列举出重要关键词即可
语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取
重要内容不要用js输出：爬虫不会执行js获取内容
少用iframe：搜索引擎不会抓取iframe中的内容
非装饰性图片必须加alt
提高网站速度：网站速度是搜索引擎排序的一个重要指标

```
22、什么是WEB语义化？
```
老师答案

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

web语义化是指通过HTML标记表示页面包含的信息，包含了HTML标签的语义化和css命名的语义化。
HTML标签的语义化是指：通过使用包含语义的标签（如h1-h6）恰当地表示文档结构
css命名的语义化是指：为html标签添加有意义的class，id补充未表达的语义，如Microformat通过添加符合规则的class描述信息
为什么需要语义化：
去掉样式后页面呈现清晰的结构盲人使用读屏器更好地阅读搜索引擎更好地理解页面，有利于收录便团队项目的可持续运作及维护

```
23、css hack原理及常用hack
```
老师答案

由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样，以及CSS优先级对浏览器展现效果的影响，我们可以据此针对不同的浏览器情景来应用不同的CSS。

24、css sprite是什么,有什么优缺点

老师答案

概念：图片精灵，将多个小图片拼接到一个图片中。通过background-position和元素尺寸调节需要显示的背景图案。减少服务器对图片的请求数量。

优点：

减少HTTP请求数，极大地提高页面加载速度
增加图片信息重复度，提高压缩比，减少图片大小
更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现

缺点：

图片合并麻烦
维护麻烦，修改一个图片可能需要从新布局整个图片，样式

25、渐进增强和优雅降级的概念

老师答案

渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。.

26、display: none;与visibility: hidden;的区别

老师答案

display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见
display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；visibility: hidden;是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式
修改常规流中元素的display通常会造成文档重排。修改visibility属性只会造成本元素的重绘。
读屏器不会读取display: none;元素内容；会读取visibility: hidden;元素内容

```
27、什么是BFC?如何实现？
```
老师答案

(1)、什么是BFC与IFC

a、BFC（Block Formatting Context）即“块级格式化上下文”， IFC（Inline Formatting Context）即行内格式化上下文。常规流（也称标准流、普通流）是一个文档在被显示时最常见的布局形态。一个框在常规流中必须属于一个格式化上下文，你可以把BFC想象成一个大箱子，箱子外边的元素将不与箱子内的元素产生作用。

b、BFC是W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。也可以说BFC就是一个作用范围。

c、在普通流中的 Box(框) 属于一种 formatting context(格式化上下文) ，类型可以是 block ，或者是 inline ，但不能同时属于这两者。并且， Block boxes(块框) 在 block formatting context(块格式化上下文) 里格式化， Inline boxes(块内框) 则在 Inline Formatting Context(行内格式化上下文) 里格式化。

(2)、如何产生BFC

当一个HTML元素满足下面条件的任何一点，都可以产生Block Formatting Context：

a、float的值不为none    
b、overflow的值不为visible   
c、display的值为table-cell, table-caption, inline-block中的任何一个    
d、position的值不为relative和static

CSS3触发BFC方式则可以简单描述为：在元素定位非static，relative的情况下触发，float也是一种定位方式。

(3)、BFC的作用与特点

a、不和浮动元素重叠，清除外部浮动，阻止浮动元素覆盖

如果一个浮动元素后面跟着一个非浮动的元素，那么就会产生一个重叠的现象。常规流（也称标准流、普通流）是一个文档在被显示时最常见的布局形态，当float不为none时，position为absolute、fixed时元素将脱离标准流。

28、行内元素有哪些？块级元素有哪些？空元素有哪些？

老师答案

首先：CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，如div的display默认值为“block”，则为“块级”元素；span默认display属性值为“inline”，是“行内”元素。
（1）行内元素有：a b span img input select strong（强调的语气）
（2）块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
（3）常见的空元素：
    <br> <hr> <img> <input> <link> <meta>
    鲜为人知的是：
    <area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

```
29、XHTMl与HTMl的区别
```
老师答案

HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言最主要的不同：

XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。

30、网页验证码是干嘛的，是为了解决什么安全问题？

老师答案

防止恶意脚本的执行，网页验证码有不容易被计算机识别的图像。

```
31、Canvas和SVG的区别
```
老师答案

SVG是一种使用XML来描述2D图形的语言，Canvas通过JS来绘制2D图形。

SVG绘制的是矢量图，矢量图的特点是不随图形的放大缩小改变清晰度，不会出现锯齿形，而Canvas是逐像素渲染的，放大后可能出现锯齿形。

SVG的每个图形都被视为对象，如果对象的属性变化，那么浏览器能够自动重现图形。Canvas一旦图形绘制完成，就不会受到关注。如果其位置发生变化，那么整个场景也需要重新绘制。

Canvas能够以.png和.jpg格式保存结果图像。

Canvas适合图像密集型的游戏，其中很多对象会被频繁重绘，SVG适合带有大型渲染区域的应用程序（比如谷歌地图）。

32、margin-top和padding-top的值设置为百分比时是怎么计算的？

老师答案

margin-top的百分比是相对于父级元素的width,而padding-top是自身的width。

```
33、选择器有哪些？
```
老师答案

基本选择器：id、标签、类选择器

.组合选择器（如：.head .head_logo,注意两选择器用空格键分开）

全局选择器（如：*号）

后代选择器

并列选择器

伪类选择器

子选择器

相邻选择器

属性选择器

```
34、<meta>标签的作用
```
老师答案

meta标签是用来描述网页文档的属性，通常使用meta定义文档的编码，网页关键词以及在移动端的视窗viewpoint的定义。

```
35、怎么解决响应式布局
```
老师答案

首先在meta标签设置viewpoint，采用flex布局，使用媒体查询适配不同的终端设备样式

```
36、H5新特性
```
老师答案

新增了布局标签 <header> <footer> <nav> <section><article><aside>等
新增了音频和视频标签 <audeo> <video>
提供了<canvas>画布标签，可以绘制丰富的图形，<svg>绘制矢量图
新增了本地存储 localStorage、sessionStorage
新增了web Worker实现多线程处理
新增了web Socket可以实时通信

37、display-flex有哪些属性？/ flex有使用过吗,讲下它常用的属性。

老师答案

38、display-flex有哪些属性？/ flex有使用过吗,讲下它常用的属性。

老师答案

这个在移动端布局用得非常多，现代浏览器都是支持flex布局的。我常用的属性是

flex-wrap:wrap 弹性盒子换行

justify-content:center水平居中对齐

align-items:center 垂直居中对齐

```
39、什么是文档碎片 
```
老师答案

文档碎片是一种虚拟的DOM节点，使用document.createDocumentFragment()创建文档碎片

在进行DOM频繁操作过程中，可以先在文档碎片中操作，然后在更新到DOM中，这样会大大提升渲染性能。

```
40、png，jpg的区别
```
老师答案

png是无损压缩的图片，图片显示的质量高，所以文件通常会比较大，支持透明色。

jpg是有损压缩的图片，可以渐进式的加载，图片文件较小，通常用于网站的图片。

编程题

1、左右布局，一侧定宽，一侧自适应撑满

老师答案

//css

    html,

    body {

      height: 100%

    }

    .main {

      display: flex;

      height: 100%;

    }

    .left,

    .right {

      height: 100%;

      border: 1px solid red;

      box-sizing: border-box;

    }

    .left {

      width: 300px;

    }

    .right {

      width: 100%;

    }

//html

  <div class="main">

固定宽度300px</div>

自适应宽度</div>

</div>

```
2、未知高宽上下左右居中
```
老师答案

//css

    html,

    body {

      height: 100%

    }


    .main {

      display: flex;

      height: 100%;

      justify-content: center;

      align-items: center

    }


    .box {

      width: 300px;

      border: 1px solid red;

    }


  //html

   <div class="main">

未知高度上下左右居中</div>

  </div>