CSS和HTML面试必备知识全解析 - 前端八股文详解

CSS

1. 常见的块级元素和行内块元素，以及它们有何不同

块级元素和内联元素的区别：

1.块级元素，宽度默认是它容器的100%,各占据一行，垂直方向排列；内联元素，都是同一行，水平方向排列；

2.块级元素，能容纳其他块元素或者内联元素；内联元素，只能容纳文本或其他内联元素；

3.块级元素中height，line-height以及margin和padding都可以控制；行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效

2.行内元素和块级元素有哪些

常见的内联元素： a - 锚点 select - 项目选择 span - 常用内联容器，定义文本内区块 strong - 粗体强调 img - 图片 input - 输入框 label - 表格标签 textarea - 多行文本输入框 br - 换行

常见的块级元素

div ul ,li 非排序列表 form - 交互表单 table - 表格 h1 -h6 标题 hr - 水平分隔线 p - 段落 dl -dt-dd - 定义列表 address - 地址 blockquote - 块引用 fieldset - form控制组

2. 常见选择器

标签选择器

HTML标签名称作为选择器

//语法
标签名 {
	属性1:属性值1;
	属性2:属性值2;
	属性3:属性值3;
	...
}

类选择器

//语法
.类名 {
	属性1.属性值1;
	属性2.属性值2;
	属性3.属性值3;
	...
}

id选择器

#id名 {
	属性1:属性值1;
	...
}

口诀：样式#定义，结构id调用，只能调用一次，别人切勿使用

通配符选择器

选取页面中所有元素（标签）

* {
	属性名1: 属性名1;
	...
}

CSS的复合选择器

建立在基础选择器之上，对基础选择器进行组合形成的

后代选择器/包含选择器（重要）

<style>
	元素1 元素2 { 样式声明 }
</style>
#元素2只要包含在元素1里面即可，无论是儿子还是孙子

子选择器（重要）

只能选择某元素的最近一级的子元素

元素1>元素2 {样式声明}

并集选择器（重要）

可以选择多组标签为他们定义相同的样式，通常用于集体声明

标签1,标签2 {样式声明}

约定语法规范：并集选择器喜欢竖着写

伪类选择器

可以为某些选择器添加一些特殊的效果

链接伪类选择器

#写的时候按照顺序来
a:link	#选择未被访问的链接
a:visited	#选择所有已经被访问过的链接
a:hover		#选择鼠标指针位于其上的链接
a:active	#选择活动链接（鼠标按下未弹起的链接）

:foucus伪类选择器

用于选取获得焦点的表单元素

input:foucus {
	background-color: red;
}

3. px em 和 rem的区别

一、px是固定的像素，一旦设置了就无法因为适应页面大小而改变。

二、em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。

三、em是相对于其父元素来设置字体大小的，一般都是以的“font-size”为基准。这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而Rem是相对于根元素，这样就意味着，我们只需要在根元素确定一个参考值

总之：对于em和rem的区别一句话概括：

em相对于父元素，rem相对于根元素。

4. 水平垂直居中的几种方法

1 使用flex布局

利用flex的alignItems:center垂直居中，justifycontent:center水平居中

2 利用相对定位和绝对定位的margin:auto

相对定位下，使用绝对定位将上下左右都设置为0，再设置margin:auto即可实现居中

3 利用相对定位和绝对定位，再加上外边距和平移的配合

相对定位下，使用绝对定位，利用margin偏移外容器的50%，再利用translate平移回补自身宽高的50%即可

4 利用textAlign和verticalAlign

利用textAlign:center实现行内元素的水平居中，再利用verticalAlign:middle实现行内元素的垂直居中，前提是要先加上伪元素并给设置高度为100%，用过elementUI的可以去看看其消息弹窗居中实现方式就是如此

5 其他

上面都是在未知外容器和自身宽高下实现水平垂直居中的，如果已知其宽高，可以有更多种简单的方式实现居中，其原理无非是利用绝对定位的top/left偏移、margin偏移、padding填充，在此就不分析了。还有就是单纯文字的居中利用lineHeight和textAlign即可实现。

5. 盒模型的理解

盒模型包括margin、border、padding、content四个部分，主要的设置属性是margin、border、padding。
盒子模型又分为两种W3C和IE盒子。

W3C的元素宽度=content的宽度
IE的元素宽度=content+padding+border

盒模型就是用来做容器，为了把内容打包和整理，为了不让页面显得杂乱无章。一个好的包装能够给用户不一样地体验。并且如果没有好的包装，再好的内容也不会也看下去的欲望。这就像一个干净整洁的桌面和堆满杂物的桌面给人的观感效果。
所以，合理灵活的应用好盒模型是前端的必要基础！！！

6. Flex布局

一、Flex 布局是什么？

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为 Flex 布局。

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

二、基本概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

三、容器的属性

以下6个属性设置在容器上。

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

7. 怎么解决浮动中塌陷的问题

第一种：开启BFC

根据W3C的标准，在页面中元素都有一个隐含的属性 Block Formatting Context,简称BFC，默认是关闭的；

开启元素BFC后，元素将会具有以下特性：

父元素的垂直外边距不会和子元素重叠 开启BFC的元素不会被浮动元素所覆盖 开启BFC的元素可以包含浮动元素 开启BFC的方法：。

** overflow【常见，副作用最小】**

overflow设置为非visible的值。推荐使用hidden（副作用最小）

a) auto （溢出显示滚动条）

b) scroll （默认就显示滚动条）

c) hidden （溢出隐藏）[常用]

注：但在IE6及以下的浏览器中不支持BFC，所以使用这种方式不兼容IE6。在IE6中有类似BFC的隐含属性 hasLayout，开启方式很多，推荐使用zoom:1

第二种：在浮动元素后添加元素，并设置其clear属性

第三种：br元素的clear属性

br元素本身没有高度，所以也就不会存在IE低版本下最小高度问题。只需要在浮动元素下添加一句 :

※第四种：after伪类【各大公司推荐】

可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，和第二种方法原理相同，可达到相同的效果，而且不会在页面中添加多余的div，这是最推荐的方式，几乎没有副作用

8. CSS3新特性

CSS3 是 CSS 规范的最新版本，在 CSS2.1 的基础上增加了很多强大的新功能，以帮助开发人员解决一些实际面临的问题，并且不再需要非语义标签、复杂的 JavaScript 脚本以及图片。 例如，CSS3 支持圆角、多背景、透明度、阴影、动画、图表等功能。 CSS1 和 CSS2.1 都是单一的规范，其中 CSS1 主要定义了网页对象的基本样式，如字体、颜色、背景、边框等，CSS2 添加了高级概念，如浮动、定位、高级选择器（如子选择器、相邻选择器和通用选择器等）。 整个 CSS3 的规范发布不会因为部分存在争论而影响其他模块的推进。 对于浏览器来说，可以根据需要，决定哪些 CSS 功能被支持。

9. 前端常见的布局方式

一、静态布局

静态布局是最为原始的布局方式，没有什么技术性可言，往往是计算机行业刚刚入门的小白使用的布局方式。制作的网页上的元素尺寸一律以px为单位

布局特点： 页面上的布局是按最初写代码时候的布局方式进行布局的，常规的pc网站是进行设置了宽度值进行布局的，不会随着pc端的屏幕的大小而变化。 优点: 这种布局方式不管是对资深的前端开发工程师还是刚入门的小白来说都是最简单的，最让人容易以接受、学习的，没有我们所说的兼容性的问题。这种布局方式大多用在门户网站和企业的官网上，这些官网的设备的尺寸是固定的，这种布局方式往往是最简单的方法。 缺点： 不会随着pc端的屏幕大小而变化。

二、弹性布局（flexbox）

弹性布局可以简便、完整、响应的实现各种页面上的布局。与静态不同的是，使用em或rem单位（lem=16px，1rem=10px）进行相对布局，相对使用百分比更加方便、灵活，相应同时支持浏览器的字体大小调整和缩放的等正常显示。 优点： 1.适应性强，在做多种不同的屏幕分辨率不同的界面是非常使用。 2.随意按照宽度、比例划分元素的宽高。 3.可以轻松的改变元素的显示顺序。 4.网页布局实现快捷，维护起来更加容易。 如果做移动端时，如果客户对细微的之处的要求不高，使用弹性布局进行制作是最好的选择，一份css+一份js调节font-size搞定。 缺点： 浏览器兼容性较差，只能兼容到IE9及以上。

三、自适应布局（bootstrap）

自适应布局分别为不同屏幕不同分辨率定义布局，即是创建多个静态页面，每个静态页面对应一个屏幕分辨率的一个范围内。在改变不同的屏幕分辨率可以切换到不同的静态布局上，但是布局中的元素位置会发生改变，但是在每个静态布局中，页面中的元素不会随着窗口大小的调整发生变化。使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同一个设备下实际还是固定的布局。 优点： 1.对网站的复杂程度兼容性更大； 2.对开发工程师来说制作的成本代价更低； 3.代码执行效果更高效； 4.测试时更加容易，运营相对更加精准。 缺点： 在现如今的移动端设计百花齐放的时期之下，同一个网站往往需要为不同的设备制作不同的页面，不但会增加开发成本，还会因为客户的需求改变时，可能会改动多套代码、流程相比较来说较繁琐。

四、流式布局（fluid）

流式布局的布局方式是页面的元素的宽度按照屏幕的分辨率进行适配的调整，但是整体布局不变，也称之为栅栏系统。使用%百分比定义宽度，高度大都是用px来固定住，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。 缺点： 屏幕大小变化时，页面元素也随之变化但是布局不变。这就会因为如果屏幕太大或太小都会布局时元素无法正常显示。

五、响应式布局

响应式布局是css3增加的新布局方式，该布局方式2010年提出来的一个概念，说白了就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。响应式几乎成为优秀页面布局的标准。 设计方法： 媒体查询+流式布局。通常使用@media媒体查询，和网格系统配合相对布局单位进行布局，实际上说白了就是综合响应式等技术通过css给单一网页不同设备分辨率返回不式时的技术。 优点： 适应pc端和移动端，如果有足够的耐心，页面效果会很完美。 缺点： 1.只能适应主流的宽高； 2.如果匹配足够多的设备屏幕的大小，对于工程师来说工作量不小，设计更需要多个版本，工作量增大。

六、浮动布局

浮动布局进行调用浮动属性改变页面中元素的位置，浮动布局应该是目前各大网站用的最多的一种布局方式了，但是也特别复杂。浮动元素是脱离文档流的，但不脱离文本流。浮动元素有左浮动（float : left）和右浮动（float : right）两种

优点： 兼容性比较好 缺点： 浮动带来的影响比较多，页面宽度不够的时候会影响布局。

七、定位布局

定位布局时利用position属性控制页面元素设置一些不规则布局。

HTML

1. HTML的语义化标签

2. 前端优化的解决方案

我们的优化原则有以下几个：

能缓存的，尽量强缓存。

引入外部资源时不要出现超时、404的状况。

减少HTTP请求数。

合理设置cookie的大小以及过期时间。

合理利用懒加载

网页内容的优化

1、懒加载数据。

首先根据标签的left和top属性判断是否显示在了屏幕中（如果显示在屏幕中，其left和top属性值应该是在0到窗口长宽之间）。 如果显示在屏幕中，则将src标签的内容替换为图片的url。

2、使用外部引入的css和js文件，并且引入的css和js越少越好（HTTP2.0不适用）。 这里可以使用webpack打包这些文件，也可以使用强缓存与协商缓存来缓存这些文件。

3、不要在中缩放图片。 img计算缩放也需要时间

4、避免重定向。 重定向会重新渲染网页。

5、尽量不要用iframe。 因为iframe会阻塞渲染。

6、使用base64编码将图片嵌入到样式表中，减少请求数（由于base64会比一般的图片大一点，只适用于那些体积比较小但是很常用的图片）。

7、使用雪碧图（精灵图）： 通过使用background-position：-xpx -ypx;来调整图片的位置，不过HTTP2不适用，原因为HTTP2实际上是多路复用的，只用一个TCP连接，所以多个图片的请求也是在同一个TCP连接里，这样能省下非常多的请求时间，但坏处就是单连接开销很大，如果要传多个大文件，就很麻烦。

8、要有网站小图标favicon.ico。 如果没有小图标，会引起404，拖慢网页加载进度。

9、能使用jpeg就不要用png，能使用png8就不要用png24。 （1）色彩丰富的、大的图片切成jpg的； （2）尺寸小的，色彩不丰富的和背景透明的切成gif或者png8的； （3）半透明的切成png24。

10、使用canvas压缩图片。

css的优化

1、避免使用@import。 使用@import相当于将引入的css放在了页面底部，因为使用@import引用的文件只有在引用它的那个css文件被下载、解析之后，浏览器才会知道还有另外一个css需要下载，这时才去下载，然后下载后开始解析、构建render tree等一系列操作。因此使用@import会拖慢渲染的过程。

2、将样式表放在head中。 如果放在body中，可能出现在浏览器下载好css样式表之前，组件就已经加载好了的情况，这可能会导致重新渲染。

3、避免使用css表达式。 如：expression((new Date()).getHours()%2 ? “#B8D4FF” : “#F08A00” ); 解析表达式和计算都需要时间。

JavaScript的优化

1、尽量减少DOM访问。

2、使用事件代理（减少DOM操作）。

3、把脚本放在底部（加载脚本时会阻塞页面渲染）。

4、合理使用节流函数和防抖函数。

使用CDN优化加载速度

CDN即内容分发网络。它依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。

针对webpack打包优化

针对webpack打包优化主要是减少打包后的代码体积，主要的措施有：

1、进行tree-shaking

2、使用UglifyJS等插件压缩代码

3、分割代码、按需加载

我们可以使用webpack-bundle-analyzer这个插件来查看每部分代码的加载耗时，进而分析可以优化的地方

3. HTML5新特性

html5总的来说比html4多了十个新特性，但其不支持ie8及ie8以下版本的浏览器

一、语义标签

二、增强型表单

三、视频和音频

四、Canvas绘图

五、SVG绘图

六、地理定位

七、拖放API

八、WebWorker

九、WebStorage

十、WebSocket

详细地址 www.cnblogs.com/binguo666/p…

4. 常见的浏览器兼容问题

1.不同浏览器的标签默认的外补丁（margin）和内补丁（padding）不同

解决方案：css里增加通配符*{margin：0；padding：0}

2.IE6双边距问题；在IE6中设置了float，同时又设置margin，就会出现边距问题

解决方案：设置display：inline；

3.当标签的高度设置小于10px，在IE6、IE7中会超出自己设置的高度

解决方案：设置display：inline；

4.图片默认有间距

解决方案：使用float为img布局

5.IE9以下浏览器不能使用opacity

解决方案：opacity：0.5；filter：alfha（opacity=50）；filter：progid：DXlmageTransform.Microsoft.Alfha(style=0,opacity=50);

6.边距重叠问题；

解决方案: 当相邻两个元素都设置了margin边距时，margin将取最大值，舍弃最小值；

7.cursor：hand显示手型在safari上不支持

解决方案：统一使用cursor：pointer；

8.两个块级元素，父元素设置了overflow：auto；子元素设置了position：relative；且高度大于父元素，在IE6、IE7会被隐藏而不是溢出；

解决方案：父级元素设置position：relative

9.const问题

说明：Firefox下，可以使用const关键字来定义常量；IE下，只能使用var关键字来定义常量。

解决方法：统一使用var关键字来定义常量。

10.event.srcElement问题

问题说明：IE下，event对象有srcElement属性，但是没有target属性；Firefox下，event对象有target属性，但是没有srcElement属性。

解决方法：使用srcObj = event.srcElement?event.srcElement:event.target;

11.事件绑定

IE:dom.attachEvent();

其他浏览器：dom.addEventListener();

标准浏览器采用事件捕获的方式对应IE的事件冒泡机制（即标准由最外元素至最内元素或者IE由最内元素到最外元素）最后标准方亦觉得IE这方面的比较合理，所以便将事件冒泡纳入了标准，这也是addEventListener第三个参数的由来，而且事件冒泡作为了默认值。

12.操作tr的html

在ie9以下，不能操作tr的innerHTML

13.ajax略有不同

IE：ActiveXObject

其他：xmlHttpReuest

14.对象宽高赋值问题

问题说明：FireFox中类似obj.style.height = imgObj.height的语句无效。