Web前端面试题——HTML/CSS部分
以下是我整理的一些HTML和css的基础面试体。
1.DOCTYPE有什么作用？标准模式与混杂模式如何区分？它们有何意义?
告诉浏览器使用哪个版本的HTML规范来渲染文档。DOCTYPE不存在或形式不正确会导致HTML文档以混杂模式呈现。
标准模式（Standards mode）以浏览器支持的最高标准运行；
混杂模式（Quirks mode）中页面是一种比较宽松的向后兼容的方式显示。
2.HTML5为什么只需要写 ？
HTML5不基于SGML（Standard Generalized Markup Language 标准通用标记语言），因此不需要对DTD（DTD 文档类型定义）进行引用，但是需要DOCTYPE来规范浏览器行为。
HTML4.01基于SGML，所以需要引用DTD，才能告知浏览器文档所使用的文档类型。
3.
alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的。且长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户，视觉障碍的用户和使用屏幕阅读器的用户等。
title属性为设置该属性的元素提供建议性的信息。使用title属性提供非本质的额外信息。
4.请写出至少5个html5新增的标签，并说明其语义和应用场景
header：定义页面或章节的头部。它经常包含 logo、页面标题和导航性的目录。
footer：定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。
aside：定义和页面内容关联度较低的内容——如果被删除，剩下的内容仍然很合理。
section：定义文档中的一个章节。
nav：定义只包含导航链接的章节。
5.请说说你对标签语义化的理解？
a. 去掉或者丢失样式的时候能够让页面呈现出清晰的结构
b. 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
c. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
d. 便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
6.介绍一下盒子模型
（1）盒子模型是什么：每个元素被表示为一个矩形的盒子，由四部分组成：内容（content）、内边距（padding）、边框（border）、外边距（margin）。它在页面中所占的实际大小（宽高）是content+padding+border+margin之和。
（2）盒模型有两种：标准盒模型（W3C盒模型）、IE盒模型。
（3）两种盒模型的区别：标准盒模型内容大小就是content大小，而IE盒模型内容大小则是content+padding+border总的大小。
（4）怎么设置两种盒模型：通过设置box-sizing属性为content-box（默认值，标准盒模型）、border-box（IE盒模型）。
7.CSS 选择符有哪些？哪些属性可以继承？
1.id选择器（# myid）
类选择器（.myclassname）
标签选择器（div、h1、p）
相邻选择器（h1 + p）
子选择器（ul > li）
后代选择器（li a）
通配符选择器（ * ）
属性选择器（a[rel = “external”]）
伪类选择器（a: hover, li: nth - child）
2.可继承： font-size font-family color, UL LI DL DD DT;
不可继承 ：border padding margin width height ;
8.如何居中div，如何居中一个浮动元素？
1.给div设置一个宽度，然后添加margin:0 auto属性
2.确定容器的宽高，在浮动元素添加定位进行居中
position: relative;
left: 0;
right: 0;
margin: auto;
9.为什么要初始化CSS样式？
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。
10.display有哪些值？说明他们的作用? 至少5个
inline：默认值。元素会被显示为内联元素。
none：元素不会被显示。
block：元素将显示为块级元素。
inline-block：行内块元素，即元素像行内元素一样显示，内容像块元素一样显示。
table：元素会作为块级表格来显示。
nherit：从父元素继承display属性。
11.为什么将CSS样式放在头部，将JS脚本放在底部
1.浏览器为了更好的用户体验，渲染引擎会尝试尽快在屏幕上显示内容，不会等到所有的HTML元素解析之后再构建和布局DOM树，所以部分内容将被解析并显示。
2.前端一般主要关心首屏的渲染速度，这也是为什么要提倡“图片懒加载”的原因。
3.其实外部的JS和CSS文件是并行下载的。随着JS技术的发展，JS也开始承担起页面的渲染工作了。如果JS加载需要很长时间，会影响用户体验。所以需要将JS区分为承担页面渲染工作的JS和承担事件处理的JS。渲染页面的JS放在前面，事务处理的JS放在后面。
12.用纯 CSS 创建一个三角形的原理是什么？
把上、左、右三条边隐藏掉（颜色设为 transparent）
#demo {
width:0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;
}
13.如何设计一个满屏“品”字布局？
第一种真正的品字：
a. 三块高宽是确定的；
b. 上面那块用margin: 0 auto;居中；
c. 下面两块用float或者inline-block不换行；
d. 用margin调整位置使他们居中。
第二种全屏的品字布局:
上面的div设置成100%，下面的div分别宽50%，然后使用float或者inline使其不换行。
14.CSS3新特性
a.边框：border-radius（圆角）、box-shadow（阴影）、border-image（边框图片）
b.背景：background-size（背景图片的尺寸）、background-origin（背景图片的定位区域）
c.文本效果：text-shadow（文本阴影）、word-wrap（文本换行）
d.转换和变形：transform（包括2D，3D转换，rotate(angle)，translate(x,y)，scale(x,y)）
e.过渡：transition
f.动画：animation
g.多列：column-count（元素被分隔的列数）、column-gap（列之间的间隔）、column-rule（洌之间的宽度，样式，颜色规则）
h.用户界面：resize（规定是否可由用户调整元素尺寸）、box-sizing（以确切的方式适应某个区域的具体内容）、outline-offset（对轮廓进行偏移）
15.清除浮动的方法
1.父级div定义height
2.结尾处加空div标签，样式clear:both
3.父级div定义伪类:after{content="";display:table;clear:bote;}
4.父级div定义overflow:hidden（同时还要定义width或zoom:1，不能定义height）
5.父级div定义overflow:auto（同时还要定义width或zoom:1，不能定义height）
6.父级也浮动，需要定义width（不推荐）
7.父级div定义display：table（不推荐）
8.结尾处加br标签，样式clear:both（父元素div定义zoom:1，不推荐）
16.iframe标签
1.优点：
a. iframe能够把嵌入的页面展示出来，如果有多个网页引用iframe，只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷
b. 网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用
c. 重载页面时不需要重载整个页面，只需要重载页面中的一个框架页，减少了数据的传输，增加了网页的下载速度
d. 方便制作导航栏
2.缺点：
a. 会产生很多页面，不利于管理
b. 浏览器的前进/后退按钮无效
c. 无法被一些搜索引擎索引到，现在搜索引擎爬虫还不能很好的处理iframe中的内容，所以不利于SEO
d. 多数小型的移动设备无法显示框架，兼容性差
e. 多框架的页面会增加服务器的http请求，对于大型网站是不可取的
17.请列举几种隐藏元素的方法
a. visibility: hidden；这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在。
b. opacity: 0；一个CSS3属性，设置0可以使一个元素完全透明，制作出和visibility一样的效果。与visibility相比，它可以被transition和animate
c. position: absolute；使元素脱离文档流，处于普通文档之上，给它设置一个很大的left负值定位，使元素定位在可见区域之外。
d. display: none；元素会变得不可见，并且不会再占用文档的空间。
e. transform: scale(0)；将一个元素设置为无限小，这个元素将不可见。这个元素原来所在的位置将被保留。
f. HTML5 hidden attribute；hidden属性的效果和display:none;相同，这个属性用于记录一个元素的状态
g. height: 0; overflow: hidden；将元素在垂直方向上收缩为0,使元素消失。只要元素没有可见的边框，该技术就可以正常工作。
h. filter: blur(0)；将一个元素的模糊度设置为0，从而使这个元素“消失”在页面中。
18.position 属性 有哪些只；每个值表示什么意思？？
1.static（默认）：按照正常文档流进行排列；
2.relative（相对定位）：不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位；
3.absolute(绝对定位)：参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位；
4.fixed(固定定位)：所固定的参照对像是可视窗口。
19.请解释一下CSS3的flexbox（弹性盒布局模型）,以及适用场景？
该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。
试用场景：弹性布局适合于移动前端开发，在Android和ios上也完美支持。
20.前端页面有哪三层构成，分别是什么？作用是什么？
最准确的网页设计思路是把网页分成三个层次，即：结构层、表示层、行为层。
1.网页的结构层（structural layer）由HTML或XHTML之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。”
2.网页的表示层（presentation layer）由CSS负责创建。 CSS对“如何显示有关内容”的问题做出了回答。
3.网页的行为层（behavior layer）负责回答“内容应该如何对事件做出反应”这一问题。这是JavaScript语言和DOM主宰的领域。