HTML、CSS 前端面试题收集

HTML

1. HTML5新特性，语义化

• 根据内容的结构化（内容语义化），选择合适的标签（代码语义化）
• 原因：便于开发者阅读和写出更优雅的代码；让浏览器的爬虫和机器很好地解析。
• section article aside header footer video audio

2.浏览器的标准模式和怪异模式

• 在标准模式下，浏览器按照HTML与CSS标准对文档进行解析和渲染；
• 而在怪异模式下，浏览器则按照旧有的非标准的实现方式对文档进行解析和渲染
• 这样的话，对于旧有的网页，浏览器启动怪异模式，就能够使得旧网页正常显示；对于新的网页，则可以启动标准模式，使得新网页能够使用HTML与CSS的标准特性。
• 对于没有文档类型声明（DOCTYPE）或者文档类型声明不正确的文档，浏览器就会使用怪异模式解析和渲染该文档。

3.盒模型的处理差异：

• 标准CSS盒模型的宽度和高度等于内容区的高度和宽度，不包含内边距和边框，
• 而IE6之前的浏览器实现的盒模型的宽高计算方式是包含内边距和边框的。
• 因此，对于IE，怪异模式和标准模式下的盒模型宽高计算方式是不一样的；

4.行内元素的垂直对齐：

• 标准模式下，在标准模式下，图片与父元素的下边框距离3px。
• 而怪异模式下，则不存在这个问题

5.xhtml和html的区别

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

6.使用data-的好处 (用于存储页面或应用程序的私有自定义数据)

1. 自定义属性，可以被js很好的操作
2. H5的新属性
3. 通过js的element.dataset.或jQuery的data(’’)拿到，*可以为url等字符
4. 框架的数据绑定，例如data-ng-if=“cs==1”

7.meta标签

• 它不会显示在页面上，但是对于机器是可读的。
• 可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
• viewport charset
• <meta http-equiv="Refresh" content="5;url=http://blog.yangchen123h.cn" />
• <meta name="renderer" content="webkit"/>

8.canvas

getContext()

有一个基于 JavaScript 的绘图 API，而 SVG 和 VML 使用一个 XML 文档来描述绘图。

9.HTML废弃的标签

<b>, <u>, <i>, <s>，<font>

<strong>=<b> :定义重要性强调的文字

<em>=<i> ：定义强调的文字

<ins>=<u>：定义插入的文字

<del>=<s>：定义删除的文字

10.IE6 bug，和一些定位写法

1. 双倍边距bug：使用float浮动时,在该元素中加入display:inline 或 display:block；
2. 3像素问题: 使用float浮动后，元素与相邻的元素之间会产生3px的间隙；需要使布局在同一行的元素都加上float浮动；
3. 图片链接的下方有间隙：将img标签定义为display:block 或定义vertical-align对应的属性。也可以为img对应的样式写入font-size:0；

11.css js放置位置和原因

说到css js放置位置的问题，我们就有必要先了解一下网站加载的整个完整过程了
。

• 首先浏览器从服务器接收到html代码，然后开始解析html
• 构建DOM树（根据html代码自顶向下进行构建），并且在同时构建渲染树
• 遇到js文件加载执行，将阻塞DOM树的构建；遇到css文件，将阻塞渲染树的构建
• script标签中的defer属性：构建DOM树的过程和js文件的加载异步（并行）进行，但是js文件执行需要在DOM树构建完成之后
• script标签中的async属性：构建DOM树、渲染树的过程和js文件的加载和执行异步（并行）进行
• 所以script标签最好放在标签的前面，因为放在所有body中的标签后面就不会出现网页加载时出现空白的情况，可以持续的给用户提供视觉反馈，同时在有些情况下，会降低错误的发生。
• 而css标签应该放在标签之间，因为如果放在标签的前面，那么当DOM树构建完成了，渲染树才构建，那么当渲染树构建完成，浏览器不得不再重新渲染整个页面，这样造成了资源的浪费。效率也不高。如果放在之间，浏览器边构建边渲染，效率要高的多。总的来说，就是提高性能，提高网页的可读性。

12.什么是渐进式渲染

在首次渲染的时候，只加载首屏的内容，随着用户滑动或者说时间的推移，才进行后面的加载。这样做的好处是：提高网页的性能，不会造成资源的浪费，按需加载。

13.html模板语言

模板包含：HTML的静态部分，动态插入内容部分

14.meta viewport原理

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

15.重构、回流

浏览器的重构指的是改变每个元素外观时所触发的浏览器行为，比如颜色，背景等样式发生了改变而进行的重新构造新外观的过程。
重构不会引发页面的重新布局，不一定伴随着回流。

回流指的是浏览器为了重新渲染页面的需要而进行的重新计算元素的几何大小和位置的，他的开销是非常大的，回流可以理解为渲染树需要重新进行计算，一般最好触发元素的重构，避免元素的回流；

比如通过通过添加类来添加css样式，而不是直接在DOM上设置，当需要操作某一块元素时候，最好使其脱离文档流，这样就不会引起回流了，比如设置position：absolute或者fixed，或者display：none，等操作结束后在显示。

16. 前端优化（提高网页的加载速度）

• 1、使用css sprites，可以有效的减少http请求数
• 2、使用缓存
• 3、压缩js，css文件，减小文件体积
• 4、使用cdn，减小服务器负担
• 5、懒加载图片
• 6、预加载css，js文件
• 7、避免dom结构的深层次嵌套
• 8、给DOM元素添加样式时，把样式放到类中，直接给元素添加类，减少重构，回流

CSS

17.盒模型，box-sizing

• IE盒子模型和W3C盒子模型：计算width和height时，IE盒子模型包含padding和border, W3C盒子模型则不包括；
• box-sizing: content-box; //指定盒子模型为W3C
• box-sizing: border-box; //指定盒子模型为IE盒子模型

18.CSS3新特性，伪类，伪元素，锚伪类

• 单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
• CSS伪类：用于向某些选择器添加特殊的效果。（:hover :active :visited）
• CSS伪元素：用于将特殊的效果添加到某些选择器。伪元素代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。（::before ::after）

19.CSS实现隐藏页面的方式

opacity: 0;
visibility: hidden;
display: none;

position: absolute;top: -9999px;left: -9999px 

20.如何实现水平居中和垂直居中。

1. margin和width实现水平居中；
2. inline-block,并且在元素的父容器中设置text-align的属性为“center”；
3. position: absolute; width: 宽度值; left: 50%; margin-left: -(宽度值/2);
4. flex

21.说说position，display

1. static、relative、absolute、fixed
2. none、inline、block、inline-block

22.请解释*{box-sizing:border-box;}的作用，并说明使用它的好处

设置以后，相当于以怪异模式解析，border和padding全会在你设置的宽度内部。

比如手机端设置两行并列的布局，宽度各为50%,如果不用这个属性，设置border后右边的div会下来错位，设置这个属性，宽度还是50%而不是50%+*px,两行可以并列显示

23.浮动元素引起的问题和解决办法？绝对定位和相对定位，元素浮动后的display值

问题：

1. 由于浮动元素已脱离文档流，所以父元素无法被撑开，影响与父级元素同级的元素
2. 与浮动元素同级的非浮动元素（内联元素）会跟随其后，也是由于浮动元素脱离文档流，不占据文档流中的位置。
3. 如果该浮动元素不是同级第一个浮动的元素，则它之前的元素也应该浮动，否则容易影响页面的结构显示。

解决方法：

clear：both；// 解决2。3

给父元素添加clearfix样式 //解决1

.clearfix:after{
    content: ".";       
    display: block;  
    height: 0;  
    clear: both;  
    visibility: hidden;
} 

overflow为hidden或者auto

24.link和@import引入css的区别

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

25.解释一下css3的flexbox，以及适用场景

一个用于页面布局的全新CSS3功能，Flexbox可以把列表放在同一个方向（从上到下排列，从左到右），并让列表能延伸到占用可用的空间。

常规布局是基于块和内联流方向，而Flex布局是基于flex-flow流可以很方便的用来做局中，能对不同屏幕大小自适应。

26.哪些是块级元素那些是行级元素，各有什么特点

27.grid布局

网格布局

28.table布局的作用

用于显示批量的数据

29.实现两栏布局有哪些方法？

1. absolute + padding + %
2. float + BFC
   .left{float: left; width: 200px;}.right{overflow: hidden;}
3. flex
   .container{display: flex;}.left{width: 200px;}.right{flex: 1;}

30.你知道attribute和property的区别么

property是DOM中的属性，是JavaScript里的对象；
attribute是HTML标签上的特性，它的值只能够是字符串；

HTML标签中定义的属性和值会保存该DOM对象的attributes属性里面；

attribute和property之间的数据绑定是单向的，attribute->property；
更改property和attribute上的任意值，都会将更新反映到HTML页面中；

31.css布局问题？css实现三列布局怎么做？如果中间是自适应又怎么做？

flex

32.流式布局如何实现，响应式布局如何实现

• 流式布局（Liquid）的特点（也叫"Fluid") 是页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。代表作栅栏系统（网格系统）

1. 设计方法：使用%百分比定义宽度，高度大都是用px来固定住，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。

• 响应式设计的目标是确保一个页面在所有终端上都能显示出令人满意的效果；

1. 设计方法：媒体查询+流式布局。通常使用 @media 媒体查询 和网格系统 (Grid System) 配合相对布局单位进行布局，实际上就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。

33.移动端布局方案

• 静态布局
• 流式布局
• 自适应布局
• 响应式布局
• 弹性布局

1. em是相对其父元素
2. rem是始终相对于html大小，即页面根元素

34.实现三栏布局（圣杯布局，双飞翼布局，flex布局）

• 圣杯布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>实现三栏水平布局之圣杯布局</title>
    <style type="text/css">
    .container {
        padding: 0 300px 0 200px;
    }
    .left, .main, .right {
        position: relative;
        min-height: 130px;
        float: left;
    }
    .left {
        left: -200px;
        margin-left: -100%;
        background: green;
        width: 200px;
    }
    .right {
        right: -300px;
        margin-left: -300px;
        background-color: red;
        width: 300px;
    }
    .main {
        background-color: blue;
        width: 100%;
    }
    </style>
</head>
<body>
<div class="container"> 
　　<div class="main">main</div> 
　　<div class="left">left</div> 
　　<div class="right">right</div> 
</div>
</body>
</html>

• 双飞翼布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>实现三栏水平布局之双飞翼布局</title>
    <style type="text/css">
    .left, .main, .right {
        float: left;
        min-height: 130px;
        text-align: center;
    }
    .left {
        margin-left: -100%;
        background: green;
        width: 200px;
    }

    .right {
        margin-left: -300px;
        background-color: red;
        width: 300px;
    }
    .main {
        background-color: blue;
        width: 100%;
    }
    .content{
        margin: 0 300px 0 200px;
    }
    </style>
</head>
<body>
<div class="container"> 
　　<div class="main">
    　　<div class="content">main</div> 
    </div>
　　<div class="left">left</div> 
　　<div class="right">right</div> 
</div>
</body>
</html>

• flex布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>实现三栏水平布局之Flex布局</title>
    <style type="text/css">
    .container{
        display: flex;
        min-height: 130px;
    }
    .main{
        flex-grow: 1;
        background-color: blue;
    }
    .left{
        order: -1;
        flex-basis: 200px;
        background-color: green;
    }
    .right{
        flex-basis: 300px;
        background-color: red;
    }
    </style>
</head>
<body>
<div class="container"> 
　　<div class="main">main</div> 
　　<div class="left">left</div> 
　　<div class="right">right</div> 
</div>
</body>
</html>

35.清除浮动的原理

当元素设置了overflow样式，且值不为visible时，该元素就建构了一个BFC, BFC的高度是要包括浮动元素的，所以浮动元素的高度被撑起来，达到了清除浮动影响的目的

36.overflow:hidden有什么缺点？

当父元素的高度是靠子元素撑开的时候，子元素浮动时，则在父元素使用overflow: hidden可以清除浮动，使得父元素的高度依旧是靠子元素撑开。

当父元素自身设置了height属性值，则在父元素使用overflow: hidden可以使子元素超出父元素的那部分隐藏。

37.padding百分比是相对于父级宽度还是自身的宽度

父级宽度

38.css3动画，transition和animation的区别，animation的属性，加速度，重力的模拟实现

• transition用于设置四个过渡属性，定义了动画的属性、时间、速度曲线以及延迟时间 ；通常和hover等事件配合使用，由事件触发。tranistion 只能设定头尾

.one1{
    transition: width 3s linear 2s;
}
.one1:hover{
    width:300px;
}

• animation的使用必须结合@keyframes animation-name使用；可以设定每一帧的样式和时间

@keyframes  move{
   form{ left:0px;}   
   to{ left:200px;}
}

• 在需要动画的元素上面添加动画 div{animation:move 5s infinite;}
• animation: name duration timing-function delay iteration-count direction;（动画名称，动画执行时间，速度曲线，动画延迟时间，播放次数，是否反向播放）

39.CSS 3 如何实现旋转图片（transform: rotate）

@-webkit-keyframes rotation{
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}

.rotation{
    -webkit-transform: rotate(360deg);
    animation: rotation 3s linear infinite;
    -moz-animation: rotation 3s linear infinite;
    -webkit-animation: rotation 3s linear infinite;
    -o-animation: rotation 3s linear infinite;
}

40.sass less

Sass是对CSS（层叠样式表）的语法的一种扩充，诞生于2007年，最早也是最成熟的一款CSS预处理器语言，它 可以使用变量、常量、嵌套、混 入、函数等功能，可以更有效有弹性的写出CSS

41.对移动端开发了解多少？（响应式设计、Zepto；@media、viewport、JavaScript 正则表达式判断平台。）

42.什么是bfc，如何创建bfc？解决什么问题？

块级格式化上下文;
浮动元素会形成BFC

1. 高度塌陷问题;
2. div浮动兄弟遮盖问题;
3. margin塌陷问题

43.CSS中的长度单位（px,pt,rem,em,ex,vw,vh,vh,vmin,vmax）

44.CSS 选择器的优先级是怎样的？

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

45.媒体查询的原理是什么？

46.CSS 的加载是异步的吗？表现在什么地方？

47.常遇到的浏览器兼容性问题有哪些？常用的hack的技巧

1. margin 和padding差异较大: 通配符*来设置各个标签的内外补丁是0
2. 块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大: 在float的标签样式控制中加入 display:inline;
3. 设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度: 给超出高度的标签设置overflow:hidden;
4. 图片默认有间距: 使用float属性为img布局

48.外边距合并

• 两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠
• 解决方法：在写的时候尽量用同一方向的margin，比如都设置为top或者bottom

49.解释一下“::before”和“:after”中的双冒号和单冒号的区别-

• 都是CSS伪元素
• 单冒号是CSS2中提出来的，所以兼容性可能到IE8；
• 双冒号是CSS3中的写法，为了将伪类和伪元素区分开；