# CSS+HTML面试题回答

先说一句
掘友们好，这里是沉曦！一个前端的小学生。

你做的页面在哪些主流览器测试过？这些浏览器的内核分别是什么? 什么是浏览器内核？经常遇到的浏览器的兼容性有哪些？解决方法是？

主流浏览器、内核

名称	内核	公司
IE	Trident	微软
Chrome	WebKit、Blink	谷歌
Firefox	Gecko	Mozilla
opera（欧朋）	Presto、WebKit	Opera Software
safari	WebKit	苹果
Edge	Blink	微软

内核构成以及作用

渲染引擎：负责渲染HTML、CSS、图片等信息，然后输出到显示器
js引擎: 负责解析JavaScript脚本，实现页面动态效果

浏览器的兼容性

浏览器默认的样式不同(重要)

解决方案:（加一个全局的css样式来统一）

搜索css resert，拷贝这个重置代码，缺点是所有的样式都被统一了。

normalize css，可以以使用npm install,然后直接引入既可使用。清除默认样式的方法。

Firefox点击链接出现的虚线框：Firefox浏览器(重要)
问题描述：Firefox浏览器在点击链接时，会自动在元素周围添加一个虚线边框。

解决方法：我们为了和其他浏览器保持一致，需要去掉虚线框，我们可以给a标签设置outline属性，如下：
a{outline:none;}

a:focus{outline:none;}
复制代码
双外边距浮动问题：问题出现的浏览器：IE6及其更低的版本。

IE6不支持min: 问题出现的浏览器：IE6及其更低的版本

IE6不能定义1px左右宽度的容器: 问题出现的浏览器：IE6及其更低的版本

IE5-IE8不支持opacity: 问题出现的浏览器：IE8及其更低的版本

IE6不支持png-24透明图片: 问题出现的浏览器：IE6及其更低的版本

3像素问题: 问题出现的浏览器：IE6及其更低的版本

每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？

Doctype干嘛的？

doctype是一种标准通用标记语言的文档声明类型

该标签告知浏览器浏览文档要使用的HTML规范 , 告知浏览器以何种规范解析页面

声明对大小写不敏感

Doctype的意义

浏览器本身就分为两种模式，一种是严格模式（标准模式），一种是混杂模式（怪异模式），

浏览器就是通过doctype来区分这两种模式的， doctype在html中的作用就是触发浏览器的严格模式，如果省略doctype，浏览器就会进入到混乱模式。

严格模式的排版和要求都是以js运作模式是以该浏览器支持的最高的标准来运行程序的。

混乱模式中，页面以宽松的渐进增强的方式来兼容显示，先以老旧的浏览器的行为来渲染页面。在这种模式下，有些样式会和标准模式存在差异，而在不同的浏览器下，界面的显示也会不同，所以一定要在开头使用doctype。

Div+CSS的布局比较table布局有什么优点?，还有哪些布局？

Div+CSS布局优点

1.符合W3C标准，代码结构清晰明了，结构、样式和行为分离，带来足够好的可维护性。

2.布局精准，网站版面布局修改简单。

3.加快了页面的加载速度（最重要的）（在IE中要将整个table加载完了才显示内容）。

4.节约站点所占的空间和站点的流量。

5.用只包含结构化内容的HTML代替嵌套的标签，提高另外搜索引擎对网页的搜索效率

布局

普通流式布局
浮动布局
定位布局
flex布局

你能描述一下渐进增强和优雅降级之间的不同吗?

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

优雅降级：开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
//例如这样的写法叫做渐进增强
.transition{
  -webkit-transition: all .5s;
     -moz-transition: all .5s;
       -o-transition: all .5s;
          transition: all .5s;  
}

//例如这样的写法叫做优雅降级
.transition{ 
　　     transition: all .5s;
　　  -o-transition: all .5s;
  　-moz-transition: all .5s;
 -webkit-transition: all .5s;
}

复制代码
渐进增强则是从一个非常基础的、能够起作用的版本开始，并不断扩充，以适应未来环境的需要；优雅降级是从复杂的现状开始，并试图减少用户体验的供给。

为什么利用多个域名来存储网站资源会更有效？

1.CDN缓存更方便
2.突破浏览器并发限制，浏览器一次能发送的http请求是有限的
3.节约cookie带宽
4.减少主域名的连接数，优化页面响应速度
5.防止不必要的安全问题

简述一下src与href的区别？

src

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

src将指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素

href

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

如果我们在文档中添加那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。

这也是为什么建议使用link方式来加载css，而不是使用@import方式

你知道的网页制作会用到的图片格式有哪些？

png-8、png-24、jpeg、gif、svg

WebP：谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%。
Apng：是PNG的位图动画扩展，可以实现png格式的动态图片效果。04年诞生，但一直得不到各大浏览器厂商的支持，直到日前得到 iOS safari 8的支持，有望代替GIF成为下一代动态图标准。

一次JS请求一般情况下有哪些地方会有缓存处理？

DNS缓存：短时间内多次访问某个网站，在限定时间内，不用多次访问DNS服务器。

CDN缓存：内容分发网络（人们可以在就近的代售点取火车票了，不用非得到火车站去排队）

浏览器缓存：浏览器在用户磁盘上，对最新请求过的文档进行了存储。

服务器缓存：将需要频繁访问的Web页面和对象保存在离用户更近的系统中，当再次访问这些对象的时候加快了速度

你如何理解HTML结构的语义化？

为什么要语义化?

a. 为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；

b. 用户体验：例如title、alt用于解释名词或解释图片信息的标签尽量填写有含义的词语、label标签的活用；

c. 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；

d. 方便其他设备解析以有意义的方式来渲染网页；

e. 便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化

写HTML代码时，应注意什么？

尽可能少的使用无语义的标签div和span；

在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；

不要使用纯样式标签，如：b、font、u等，改用css设置；

需要强调的文本，包含在strong或em标签中，strong默认样式是加粗（不要用b），em是斜体（不要用i）

使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；

表单域要用fieldset标签包起来，并用legend标签说明表单的用途；

每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

HTML5新增了哪些语义化标签？

header：定义文档的页眉头部

nav：定义导航链接的部分

main 标签规定文档的主要内容。

footer：定义文档或节的页脚底部

article：定义文章。

section：定义文档中的节（section、区段）

aside：定义其所处内容之外的内容侧

多媒体标签

canvas

你如何进行web性能优化？

性能优化是一个比较大的话题

服务器通信层面

减少请求次数(资源合并)

数据传输层面

缓存：浏览器缓存(强缓存)

协商缓存

压缩

数据压缩

代码文件压缩：HTML/CSS/JS 中的注释、空格、长变量等

静态资源：字体图标，去除元数据，缩小尺寸以及分辨率

头与报文

http1.1 中减少不必要的头

减少 cookie 数据量

代码层面

webpack 打包层面

样式抽离

js 压缩

图片压缩

使用 iconfont 矢量图

引入 dll 动态链接库文件，前置打包不经常改动的资源包，例如：vue / vuex/ vue-router / ant-design 等

多入口打包

技术层面

前端路由懒加载

数据懒加载

虚拟列表

数据处理

Http2

头部压缩：专门的 HPACK 压缩算法

链路复用

Http1 建立起 Tcp 连接，发送请求之后，服务器在处理请求的等待期间，这个期间又没有数据去发送，称为空挡期。链接断开是在服务器响应回溯之后

keep-alive 链接保持一段时间

HTTP2 可以利用空档期

不需要再重复建立链接

二进制帧

补充：采用 Http2 之后，可以减少资源合并的操作，因为首部压缩已经减少了多请求传输的数据量

框架的选择

SSR 服务器端渲染

Nuxt.js

Next.js

SPA 单页面应用

SSG 静态站点生成方案

谈谈以前端角度出发做好SEO需要考虑什么？

Meta 标签优化

主要包括主题（Title)，网站描述(Description)，和关键词（Keywords）。还有一些其它的隐藏文字比如 Author（作者）， Category（目录）， Language（编码语种）等。

CSS中可以通过哪些属性定义，使得DOM元素隐藏？（display :none与visibility :hidden的区别是什么？）

方式	书写位置区别	文档流区别	Dom区别
hidden=”hidden”	写在HTML标签属性中，	占用域的空间	隐藏不会删除节点会被CSS里面的display覆盖
visibility :hidden;	写在CSS	占用域的空间	隐藏不会删除节点
display ：none;	写在CSS	不占用域的空间	隐藏不会删除节点
hide() ; show();	写在JS	不占用域的空间	隐藏不会删除节点，相当于修改display属性
v-if/wx:if ;	写在HTML标签属性中，	不占用域的空间	隐藏会删除节点，有更高的切换消耗
v-show/wx:show;	写在HTML标签属性中，	不占用域的空间	隐藏不会删除节点，相当于修改display属性

行内元素，行内块元素、和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？

行内元素，行内块元素、和块级元素

名占行设置宽高嵌套规范

行内元素不占满整行不可以直接使用css设置宽度和高度行内元素可以嵌套行内元素

行内块元素不占满整行可以直接使用css设置宽度和高度一般装文本、图片内容

块级元素独占一行可以直接使用css设置宽度和高度块级元素可以嵌套块级元素、行内块元素、行内元素

注：p元素不能嵌套p元素，p元素不能嵌套h系列的元素，h系列的元素不能嵌套h系列的元素

常见行级

a,b, i, span, strong, del, em等

常见行内块级

img, input, button,textarea, select等等

常见块级

h1-h6, ul, ol, li ,div, p, form,table,tr等

名	占行	设置宽高	嵌套规范
行内元素	不占满整行	不可以直接使用css设置宽度和高度	行内元素可以嵌套行内元素
行内块元素	不占满整行	可以直接使用css设置宽度和高度	一般装文本、图片内容
块级元素	独占一行	可以直接使用css设置宽度和高度	块级元素可以嵌套块级元素、行内块元素、行内元素

对于padding和margin

行内元素的padding-top、padding-bottom、margin-top、margin-bottom属性设置是无效的
行内元素的padding-left、padding-right、margin-left、margin-right属性设置是有效的
即可以设置左右，不可设置上下

rgba()和opacity的透明效果有什么不同？

rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，

而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）

css优先级分配？

含有!important的css的优先级最高

在相同选择器精度情况下：

id选择器的优先级 > class选择器大 > 元素选择器
内联样式 > 内部样式
内联样式 > 外部样式

在不同选择器精度情况下：

可以根据权重计算规则，判断优先级

名称权重

内联样式，如: style=”…”，权值为1000

ID选择器，如：#content，权值为0100

类，伪类、属性选择器，如.content， :hover，[type=’text’] 权值为0010

标签选择器、伪元素选择器，如div p，::first-line 权值为0001

通配符、子选择器、相邻选择器等。如* > +，权值为0000

继承的样式没有权值

名称	权重
内联样式，如: style=”…”，	权值为`1000`
ID选择器，如：#content，	权值为`0100`
类，伪类、属性选择器，如.content， :hover，[type=’text’]	权值为`0010`
标签选择器、伪元素选择器，如div p，::first-line	权值为`0001`
通配符、子选择器、相邻选择器等。如`* > +`，	权值为`0000`
继承的样式	没有权值

什么是外边距重叠？重叠的结果是什么？如何解决？

外边距合并(重叠无非是左右结构的两个元素)

在垂直方向，两个元素相遇，会发生外边距合并，合并时取最大外边距

对于父子元素外边距合并

如果父级元素没有内边距和边框，此时设置子元素的外边距，该外边距会和父元素的外边距发生合并

解决方法：
父元素设置边框
父元素设置内边距替换子元素的外边距

对于同级元素外边距合并

在垂直方向, 前一个元素设置margin-bottom,后一个设置margin-top, 此时两个元素会发生外边距合并

解决方法: 只设置元素最大值的外边距

解决方案二

添加BFC范式

BFC可以解决如下问题：

外边距合并

外边距叠加

浮动

脱标后的覆盖问题

px、em和rem 的区别?

像素，绝对单位

px是相对于显示器屏幕分辨率而言的

相对长度单位

一般继承父级元素的字体大小

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px

rem

css3新增的一个相对长度单位

继承HTML根元素的字体大小

rem多数用于手机端布局

css中可以让文字在垂直和水平方向上居中？

水平

text-align

垂直

使用display和vertical-align对容器里的文字进行垂直居中

使用line-height对单行文本进行垂直居中

使用flex布局

使用padding实现子元素的垂直居中

绝对定位结合margin: auto

使用绝对定位和负外边距对块级元素进行垂直居中

CSS中link和@import的区别是？

<link href="CSSurl路径" rel="stylesheet" type="text/css" />
//link属于HTML标签，页面被加载的时，link会同时被加载，ink是HTML标签，无兼容问题，
 @import url(CSSurl路径);
//而@import是CSS提供的; @import引用的CSS会等到页面被加载完再加载;import只在IE5以上才能识别，

link方式的样式的权重高于@import的权重.：
在link标签引入的 CSS 文件中，@import引入的这个样式将被该 CSS 文件本身的样式层叠掉，
复制代码

b标签和strong标签的区别？i标签和em标签的区别？img的alt与title有何异同？ strong与em的异同？

strong:粗体强调标签，强调，表示内容的重要性
em:斜体强调标签，更强烈强调，表示内容的强调点

简介盒子模型？（CSS的盒模型由什么组成？）

标准模型指的是

box-sizing :content-box的盒子模型，

盒子大小= content + padding + border+margin

IE模型指的是

box-sizing ：border-box的盒子模型。

盒子大小= content （content+padding+border）+margin；

也就是相当于宽度包含了（内容+内边距+边框）

html常见兼容性问题？

对WEB标准以及W3C的理解与认识？

1.对于结构要求：（标签规范可以提高搜索引擎对页面的抓取效率，对SEO很有帮助）

标签字母要小写

标签要闭合

标签不允许随意嵌套

2.对于css和js来说

尽量使用外链css样式表和js脚本。是结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。

样式尽量少用行间样式表，使结构与表现分离，标签的id和class等属性命名要做到见文知义，标签越少，加载越快，用户体验提高，代码维护简单，便于改版

HTML、XHTML、XML、HTML5有什么区别？

HTML: 超级文本标记语言，标签对大小写不敏感
XHTML: 严格的HTML，标签必须小写，标签必须闭合，标签必须嵌套正确

所有的 XHTML 元素都必须被正确地嵌套，XHTML 必须拥有良好的结构，所有的标签必须小写，并且所有的 XHTML 元素必须被关闭。所有的 XHTML 文档必须拥有 DOCTYPE 声明，并且 html、head、title 和 body 元素必须存在。虽然代码更加的优雅，但缺少容错性，不利于快速开发。

XML: 可扩展的标记语言，标签可以自定义，比如

对于XML最好的形容可能是: XML是一种跨平台的，与软、硬件无关的，处理与传输信息的工具

XML被设计用来描述数据，其焦点是数据的内容。HTML被设计用来显示数据，其焦点是数据的外观

HTML5: HTML4.0.1升级版

前端页面有哪三层构成，分别是什么?作用是什么?

构成：结构层、表示层、行为层

分别是：HTML、CSS、JavaScript

作用：HTML实现页面结构，CSS完成页面的表现与风格，JavaScript实现一些客户端的功能与业务。

如何居中div？如何居中一个浮动元素? 如何垂直居中一个浮动元素？

情况一：无父盒子的块级元素居中
position+margin（不移动，外边距自适应）
.box {
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;//加定位并且上下左右都给0，即可实现垂直居中
 margin: auto;//水平居中
}
复制代码
position+transform（移动到屏幕中间，外边距给自身宽高的一半）
.box {
    position: absolute;
    top: 50%;
    left: 50%;//先移动视窗的50%，再移动自身的50%

  transform: translate(-50%, -50%);//x、y方向，平移自身50%

    margin-top: -100px;//让其向上，实现垂直居中
    margin-left: -100px;//让其向左，实现水平居中
}
复制代码
flex(主轴居中，侧轴居中)
情况二：父盒子的块级元素居中
flex(主轴居中，侧轴居中)

css3新增属性 table-cell，vertical-aligen: middel +margin
.parent {
     display: table-cell;
     vertical-align: middle;//可以使不同高度的子元素，垂直居中
}
.child {
    margin: auto;//水平居中
}
复制代码
position +translate （先定位，在移动自身的一半)

text-align+display+vertical-align(父级加上这段代码，子级是行内块，块级元素也能居中)

CSS都有哪些选择器？哪些css属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？

选择器

1、元素选择器标签名{ }

2、id选择器 #id属性值{ }

3、类选择器 ·class属性值{ }

4、并集选择器选择器1，选择器2，选择器n{ }

5、交集选择器选择器1选择器2选择器n{ }

6、通配选择器 *{ }

7、后代元素选择器祖先元素后代元素{ }

8、子元素选择器父元素>子元素

9、伪类选择器 :hover(移入时元素的状态 ) :visited(已被访问过后的元素的状态) :active(被点击时元素的状态)

10、属性选择器

[属性名=“属性值”]选取含指定属性值的元素

[属性名^=”属性值”] 选取属性值以指定内容开头的元素

[属性名$=”属性值”] 选取属性值以指定内容结尾的元素

[属性名*=”属性值”] 选取属性值包含指定内容的元素

CSS继承

字体系列属性

属性名描述

font：组合字体

font-family：规定元素的字体系列

font-weight：设置字体的粗细

font-size：设置字体的尺寸

font-style：定义字体的风格

font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写

文本系列属性

属性名描述

text-indent：文本缩进

text-align：文本水平对齐

line-height：行高

word-spacing：增加或减少单词间的空白（即字间隔）

letter-spacing：增加或减少字符间的空白（字符间距）

text-transform：控制文本大小写

direction：规定文本的书写方向

元素可见性：

visibility

光标属性：

cursor

表格布局属性：

caption-side、border-collapse、border-spacing、 empty-cells、table-layout

列表属性：

list-style-type、list-style-image、list-style-position、list-style

所有元素可以继承的属性：

元素可见性：visibility、opacity

光标属性：cursor

行内可以继承的属性:

字体系列属性

文本系列属性: 除text-indent、text-align之外

块级元素可以继承的属性:

text-indent、text-align

属性名	描述
font：	组合字体
font-family：	规定元素的字体系列
font-weight：	设置字体的粗细
font-size：	设置字体的尺寸
font-style：	定义字体的风格
font-variant：	设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写

属性名	描述
text-indent：	文本缩进
text-align：	文本水平对齐
line-height：	行高
word-spacing：	增加或减少单词间的空白（即字间隔）
letter-spacing：	增加或减少字符间的空白（字符间距）
text-transform：	控制文本大小写
direction：	规定文本的书写方向

CSS优先级匹配

含有!important的css的优先级最高

在相同选择器精度情况下：

id选择器的优先级 > class选择器大 > 元素选择器
内联样式 > 内部样式
内联样式 > 外部样式

在不同选择器精度情况下：

可以根据权重计算规则，判断优先级

名称权重

内联样式，如: style=”…”，权值为1000

ID选择器，如：#content，权值为0100

类，伪类、属性选择器，如.content， :hover，[type=’text’] 权值为0010

标签选择器、伪元素选择器，如div p，::first-line 权值为0001

通配符、子选择器、相邻选择器等。如* > +，权值为0000

继承的样式没有权值

名称	权重
内联样式，如: style=”…”，	权值为`1000`
ID选择器，如：#content，	权值为`0100`
类，伪类、属性选择器，如.content， :hover，[type=’text’]	权值为`0010`
标签选择器、伪元素选择器，如div p，::first-line	权值为`0001`
通配符、子选择器、相邻选择器等。如`* > +`，	权值为`0000`
继承的样式	没有权值