HTML/CSS 常见面试题汇总

：定义独立的内容；

：定义页面主区域之外的内容，比如侧边栏；

：定义

元素的标题，一般被放置在

元素内的第一个或最后一个位置处；

：定义独立的流内容，比如图形、图标、照片、代码等；

：定义文档的底部区域，描述文档的页脚，比如作者、著作权信息、联系方式等；

3、请说说你对标签语义化的理解？

（1）一个语义元素能够清楚的描述其意义给浏览器和开发者，即使在去掉或丢失样式的时候，也能够让页面呈现出清晰的结构；

（2）有利于SEO优化，让页面和搜索引擎建立良好的沟通，爬虫依赖于标签来确定上下文和各个关键词的权重，有助于爬虫抓取更多的有效信息；

（3）方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备等），并以具有意义的方式来渲染网页；

（4）便于团队开发和维护，语义化更具有可读性，遵循W3C标准的团队都遵循语义化标准，可以减少差异化；

4、简单描述 DOCTYPE 的作用？严格模式与混杂模式如何区分？它们有何意义？

DOCTYPE 的作用：DOCTYPE声明在文档的最前面，位于根元素 HTML 的起始标签之前，这样一来，在浏览器解析 HTML 文档正文之前就可以确定当前文档的类型，以决定其需要采用的渲染模式，不同的渲染模式会影响到浏览器对于 CSS 代码甚至 JavaScript 脚本的解析。

**严格模式与混杂模式：**严格模式的排版和JS运作模式是以浏览器支持的最高标准运行；而在混杂模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作；

当 DOCTYPE 不存在或者格式不正确时，会导致文档以混杂模式呈现。

5、HTML5 有哪些新特性，移除了哪些元素？

HTML5 现在已经不是 SGML 的子集，主要是关于图像、显示、存储、多任务等功能的增加：

拖拽释放API（Drag 和 Drop）
语义化更好的内容标签（header、footer、nav、article、section、aside）
音视频标签（audio、video）
画布API（Canvas）
地理API（Geolocation）
Web存储API（localStorage、sessionStorage）
表单控件（calendar、date、time、email、url、search，color、number、month等等）
通讯API（WebSocket）

HTML5中移除了纯表现的元素，例如：basefont、big、dir、center、font、tt、u等等；

还移除了对可用性产生负面影响的元素，例如：frame、frameset、noframes等；

6、iframe的优缺点有哪些？

优点：

iframe能够原封不动地把嵌入的网页展示出来；
提高页面代码的复用性；
解决加载缓慢的第三方内容，如图标和广告等的加载问题；
在处理上传或局部刷新时，避免了页面整体刷新；
iframe解决部分跨域问题；

缺点：

iframe会阻塞主页面的 onload 事件；
无法被一些搜索引擎索引到；
页面会增加服务器的http请求；
会产生很多页面，不便于管理；
很多移动设备无法完全显示框架，设备兼容性差；
会出现区域的上下、左右滚动条，滚动条会挤占页面空间；
使用框架时，要保证正确的使用导航链接，容易造成链接死循环；

随着前端技术的发展，逐渐使用ajax来代替iframe。

7、Quirks 模式是什么？它和 Standards 模式有什么区别？

**Quirks模式：**Quirks模式就是浏览器为了兼容早期针对旧版本浏览器设计、并未遵循W3C标准的网页而产生的一种页面渲染模式，这种模式又被成为“怪异模式”，简单来说就是一个新浏览器故意模拟许多在旧浏览器中存在的bug。

**与 Standards 模式的区别：**总体会有布局、样式解析和脚本执行三个方面的区别：

盒模型：在W3C标准中，如果设置了一个元素的高度和宽度，指的是元素内容的宽度和高度，而在Quirks模式下，IE的宽度和高度还包含了 padding 和 border ；
设置行内元素的宽高：在 Standars 模式下，给等行内元素设置 width 和 height 都不会生效，而 Quirks 模式下，则会生效；
设置百分比的宽高：在 Standars 模式下，一个元素的高度是其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的；
设置水平居中：在 Standars 模式下可以使用 margin:0px auto 来设置元素水平居中，但是这种设置在 Quirks 模式下是无效的；

8、请阐述 table 有哪些缺点？

嵌套层级太深，会导致搜索引擎读取困难，而且会大大增加代码冗余；
灵活性差，比如要设置tr的border等属性是不行的，要在td上设置border属性；
代码臃肿，可读性差；
混乱的 colspan 和 rowspan ，用它们来实现网页布局时，会造成文档顺序混乱；
不够语义化；

9、简述一下 src 和 href 的区别？

src用于替换当前元素；href用于在当前文档和引用资源之间确立联系；

src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在的位置；

href是Hypertext Reference 的缩写，指向网络资源所在的位置，建立和当前元素（锚点）或当前文档之间的链接；

CSS面试题

1、谈谈你对CSS布局的理解

常见的布局方式：固定布局、流式布局、弹性布局、浮动布局、定位布局、margin和padding

2、请列举几个清除浮动的方法

（1）使用clear属性

<div style="clear:both">div>

（2）使用br标签和其自身的HTML属性

<br clear="all" />

（3）通过设置父元素的样式，实现清除浮动，例如：

父元素设置 overflow:hidden
父元素设置 overflow:auto
父元素设置 display:table
父元素也设置浮动样式

（4）使用 :after 伪元素

3、请列举几种隐藏元素的方法

visibility:hidden，这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在；

opacity:0，是CSS3的属性，设置元素为完全透明，和 visibility 的效果类似，但是该属性修饰的元素可以使用 transition 和 animate 设置动画效果；

display:none，设置元素为不可见，不会占用文档的空间；

hidden属性，该属性是HTML5中新增的属性，效果和 display 相同；

4、如何让一段文本中的所有英文单词的首字母大写

text-transform: none | capitalize（将每个单词的第一个字母转为大写） | uppercase（将每个单词都转为大写）| lowercase（将每个单词都转为小写）

5、请简述CSS样式表的继承

CSS样式表继承指的是，特定的CSS属性向下传递到子孙元素。会被继承下去的属性如下：

文本相关：font-family，font-size， font-style，font-variant，font-weight， font，letter-spacing，line-height，color；

列表相关：list-style-image，list-style-position，list-style-type， list-style；

6、请简述CSS的选择器

元素选择器：* 、E、 E#id、 E.class

关系选择器：E、F、E>F、E+F、E~F

属性选择器：E[att]、E[att=“val”]、E[att~=“val”]、E[att^=“val”]、E[att$=“val”]、E[att*=“val”]、E[att|=“val”]

伪类选择器：E:link、E:visited、E:hover、E:active、E:focus、E:lang(fr)、E:not(s)、E:root、E:first-child、E:last-chil等

伪对象选择器：E:first-letter/E::first-letter、E:first-line/E::first-line、E:before/E::before、E:after/E::after、E::selection

7、CSS伪类与CSS伪对象的区别

CSS引入伪类和伪元素的概念是为了描述一些现有CSS无法描述的东西，根本区别在于：它们是否创造了新的抽象元素；

伪类：描述了所有逻辑上存在但在文档树中无须标识的分类；

伪对象：代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中；

8、请简述CSS的权重规则

行内样式 > ID > 属性选择器/class类/伪类选择器 > 元素名/伪对象选择器；

关系选择器将拆分为两个选择器再计算权重。

9、请写出多种等高布局

假等高布局：使用背景图片，在列的父元素上使用这个背景图进行Y轴的铺放，从而实现一种等高列的假象
给容器div使用单独的背景色（固定布局、流体布局）：用元素中的最大高度撑大其他的容器高度
创建带边框的两列等高布局：用border-left来做，只能使用两列
使用正padding和负margin对冲实现多列布局方法：在所有列中使用正的上下padding和负的上下margin，并在所有列外面加上一个容器，设置overflow:hidden把溢出背景切掉
使用边框和定位模拟列等高：但不能使用在多列
模拟表格布局等高效果：兼容性不好，在IE6/7无法正常运行

10、在CSS样式中使用px、em，各有什么优势，在表现上有什么区别？

px是相对长度单位，相对于显示器屏幕分辨率而言的；

em是相对长度单位，相对于当前对象内文本的字体尺寸；

px定义的字体，无法用浏览器字体放大功能；em的值并不是固定，会继承父级元素的字体大小，

1 ÷ 父元素的font-size × 需要转换的像素值 = em值

11、CSS中link和@import 的区别是什么？

link属于HTML标签，而 @import 是CSS提供的，只能加载CSS；
页面被加载时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载；
@import只能在IE5以上才能识别，而link是HTML标签，无兼容问题；
link方式的样式权重高于@import的权重；
当使用javascript控制DOM去改变样式的时候，只能使用link方式，因为@import只有CSS才能识别，DOM无法控制；

12、position的absolute与fixed共同点与不同点？

相同：

改变行内元素的呈现方式，display被置为block
让元素脱离普通流，不占据空间
默认会覆盖到非定位元素上

区别：

absolute的”根元素“是可以设置的，而fixed的”根元素“固定为浏览器窗口。
当你滚动网页，fixed元素与浏览器窗口之间的距离是不变的。

13、position的值，relative 和 absolute 分别是相对于谁进行定位的？

**absolute：**生成绝对定位的元素，相对于 static 定位以外的第一个祖先元素进行定位

**fixed：**生成绝对定位的元素，相对于浏览器窗口进行定位。（IE6不支持）

**relative：**生成相对定位的元素，相对于其在普通流中的位置进行定位

**static：**默认值。没有定位，元素出现在正常的流中

14、CSS3有哪些新特性？

新增特性有：圆角（border-radius）、阴影（box-shadow）、对文字加特效（text-shadow）、线性渐变（gradient）、变形（transform）；

增加了更多的CSS选择器，媒体查询，多栏布局，多背景rgba，引入伪元素::selection。

15、为什么要初始化CSS样式

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

CSS样式初始化之后会对SEO有一定的影响。

16、解释下 CSS sprites 原理，及优缺点？

CSS sprites 其实就是把网页中的一些背景图片整合到一张图片文件中，在利用CSS的 background-image，background-repeat，background-position的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。

优点：

减少网页的http请求
减少图片的字节
解决网页设计师在图片命名上的困扰，只需要对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名
更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变了

缺点：

在宽屏，高分辨率的屏幕下的自适应页面，如果背景图不够宽，很容易出现背景断裂
CSS sprites 在开发的时候，需要通过Photoshop或其他工具测量计算每一个背景单元的精确位置
在维护的时候比较麻烦，如果页面背景有少许改动，一般就要修改这张合并的图片

17、解释一下浮动及其工作原理？

浮动元素脱离文档流，不占据空间（引起“高度塌陷”现象）；

浮动元素碰到包含它的边框或者浮动元素的边框停留。

18、浮动元素引起的问题

父元素的高度无法被撑开，影响与父元素同级的元素
与浮动元素同级的非浮动元素会跟随其后
若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

19、什么是FOUC（无样式内容闪烁）？你如何来避免FOUC？

如果使用@import方式对CSS进行导入，会导致某些页面在windows下的IE出现一些奇怪的现象：
以无样式显示页面内容的瞬间闪烁，这种现象被称为文档样式短暂失效，简称FOUC

原理：当样式表晚于结构性html加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象。

解决方法：使用LINK标签将样式表放在文档HEAD中。

20、line-height 三种赋值方式有何区别？（带单位、纯数字、百分比）

**带单位：**px不用计算，em则会使元素以其父元素font-size值为参考来计算自己的行高；

**纯数字：**把比例传递给后代，例如父级行高为1.5，子元素字体为18px，则子元素行高为1.5*18=27px；

**百分比：**将计算后的值传递给后代；

21、:link、:visited、:hover、:active 的执行顺序是怎么样的？

:link > :visited > :hover > :active

22、经常遇到的浏览器兼容性有哪些？如何解决？

浏览器默认的 margin 和 padding 不同
IE6双边距bug
在IE6、IE7中元素高度超出自己设置高度，原因是IE8以前的浏览器中会给元素设置默认的行高的高度导致的
min-height 在IE6下不起作用
透明性IE用filter.Alpha(opcity=60)，而其他主浏览器用opacity:0.6
input边框问题，去掉input边框一般用 border:none 就可以了，由于IE6在解析input样式时的bug（优先级问题），在IE6下无效

23、有哪些方式可以对一个DOM设置它的CSS样式？

外部样式表，使用标签引入一个外部CSS样式
内部样式表，将CSS代码放在

HTML/CSS 常见面试题汇总

HTML面试题

1、标签上title属性与alt属性的区别是什么？

2、请写出至少5个HTML5新增的标签，并说明其语义和应用场景？

HTML/CSS 常见面试题汇总

HTML面试题

1、 标签上title属性与alt属性的区别是什么？

2、请写出至少5个HTML5新增的标签，并说明其语义和应用场景？

1、标签上title属性与alt属性的区别是什么？