《HTML&CSS面试题》

1, HTML5中新增了哪些内容？

1.广义上的html5指的是最新一代前端开发技术的总称，包括html5，CSS3，新增的webAPI。

2.Html中新增了header,footer,main,nav等语义化标签，新增了video,audio媒体标签，新增了canvas画布。新增了一些标签属性，例如input的placeholder。

3.Css3中新增了：圆角，阴影，滤镜，vw/vh单位，flex布局，媒体查询，过渡和动画，伪类。

4.webAPI,新增了localStorage和sessionStorage，querySelector，webSocket，request

2, 什么是HTML语义化？HTML语义化的好处是什么？

1.html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;

2.即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;

3.搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

3, Css中Position定位都有哪些方式，分别是什么效果。

Static(默认)， 静态定位，流式布局

Relative，相对定位，参与流式布局，使用left等在原有位置上进行位置调整。

Absolute，绝对定位，脱离文档流，相对于另一个元素进行定位。

Fixed，固定定位，脱离文档流，相对于浏览器窗口定位，不随页面滚动而改变位置。

Sticky，粘性定位，可实现动态fixed。

 4, Absolute定位的元素相对于哪个元素进行定位。

 相对于离自己最近的、position为非static的祖先元素进行定位。

 5, 前端页面中动画都有哪些实现方式，各自分别适用于哪些场景？

Transition：简单的动画，只需要在两个状态之间变化的动画。

keyframeAnimation：适合需要在多个状态连续进行的动画。

js动画：功能最强的动画，但是效率最低。

6, 怎么隐藏页面中的某个元素？

Display:none;    隐藏且不占用位置。

Visibility:hidden; 隐藏但保留位置。

Opacity:0;      隐藏但保留位置。

7, 行元素和块元素的区别是什么？

行元素：会在水平方向排列，设置宽高无效，上下边距无效

块元素：各占据一行，垂直方向排列。可设置宽高,内外边距

行内块元素: 会在水平方向排列,可设置宽高,内外边距

同时,可通过display属性修改标签元素类型

8, 如何解决行内块间距问题

给父元素设置font-size:0

使用弹性布局或浮动布局

使用固定定位或者绝对定位

9, 标准盒模型和IE怪异盒模型的区别

在标准模式下，块总宽度= width + margin(左右) + padding(左右) + border(左右)

怪异模式下，块的总宽度= width + margin(左右)（即width已经包含了padding和border值）

10, Css3中transition和animation的区别

- transition只有开始和结束两个状态，并且需要通过事件触发

- animation可以通过定义关键帧指定多个动画状态，可以自动播放

11, 单行文本溢出显示为省略号

text-overflow: ellipsis;

overflow: hidden;

white-space: nowrap;

12, 页面中常用哪些单位, 有什么区别

- px以物理像素为基准

- em以当前元素font-size为基准

- rem以html font-size为基准

- vw/vh以浏览器窗口宽高为基准  100vw=浏览器窗口宽度

rpx 适用于小程序或uniapp中可以实现自适应   750rpx=屏幕宽度

13, 什么是响应式页面，是依赖什么技术实现的。

能够根据不同的浏览器尺寸，显示不同的布局方式。依赖媒体查询实现

14, 怎么在页面上显示一条斜线？一条折线？一线曲线？

方法一: 使用canvas绘图画出来 (比较麻烦)

方法二: 使用div边框线 + 视图转换(旋转/倾斜)或边框圆角实现(简单方便)

方法三: 使用背景的线性渐变或经向渐变实现(较耗性能)

15, 在页面头部显示导航条，不随页面滚动，在页面左侧显示垂直菜单栏，不随页面滚动，你会怎么实现？如何避免导航条、菜单栏盖住页面上的内容？

使用 position:fixed 固定定位实现,  头部设置top属性, 左侧的设置left属性

并使用z-index属性设置显示层级, 值越大越不容易被覆盖

16, 怎样实现元素上下左右都居中？

(1，实现元素本身内容居中：text-align:center+行高。

(2，实现子元素在父元素中居中：绝对定位+上下左右设置0+margin:auto。

(3, 使用flex弹性布局

(4, 绝对定位+left,top:50%+transform:translate:-50%。

17, flex弹性布局很强大，可以实现几乎所有的布局效果，包括以往很难实现的弹性效果，但什么情况不能用flex弹性布局实现？

Flex布局是css3的新特性, 在一些低版本的浏览器上(如IE8)不支持flex布局

18, 怎样在不使用新元素的情况下清除浮动？

在浮动元素的父元素上添加一个class,为这个class添加后缀.after样式，其中写content:””;display:block;clear:both

19, Css文件中@import，@font-face，@keyframes,@media这4个关键字的作用是什么？

@import，导入另一个css文件，@font-face，导入一个字体文件，@keyframes声明一个关键帧动画，@media声明一个媒体查询条件。

20, Less/Sass比css高级到哪了？

支持嵌套

支持变量定义

支持“模板函数

21,常见兼容性问题有哪些？

兼容问题大多出现老版本浏览器不支持新样式或渲染不统一的情况下

png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.也可以引用一段脚本处理.

浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。

对于老IE浏览器使用css hack解决兼容问题。

IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。

浮动IE产生的双倍距离（IE6双边距问题：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。）

Retina屏幕手机浏览器的1px边框问题，通过前后缀伪元素或者缩放解决。

22, 什么是元素盒模型，包含哪几部分？计算元素尺寸时从哪部分开始计算？

元素从结构上分为4层，内容，内间距，边框，外间距。

通过box-sizing设置计算方式，默认为content-box,及计算内容盒，可以设置为border-box,计算到边框盒。

23, ::before 和 :after中双冒号和单冒号有什么区别?解释一下这2个伪元素的作用。

单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。:before 和 :after  这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before  ::after

24, 常用的浏览器有哪些？他们分别是什么内核？

(1，chrome、safari属于webkit内核。

(2，老IE(10和10以下) 属于Trident内核。

(3，firefox属于Gecko内核。

(4，新IE属于Edge内核。

(5，360等特殊浏览器：多内核浏览器。

25, 什么叫优雅降级和渐进增强？

都是解决网站对于老旧版本浏览器的兼容问题。

1.优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效。

2.渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。

26, 什么是SEO? 如何做SEO优化?

SEO，是英文SearchEngineOptimization的缩写，中文的意思: 搜索引擎优化。SEO的目的就是让网站或者网页在搜索结果中，处于靠前的位置。

实现SEO优化的方式有:

1、合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可；description把页面内容高度概括，不可过分堆砌关键词；keywords列举出重要关键词。

2、语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页

3、重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，保证重要内容一定会被抓取

4、重要内容不要用js输出：爬虫不会执行js获取内容

5、少用iframe：搜索引擎不会抓取iframe中的内容

6、非装饰性图片必须加alt

7、提高网站速度：网站速度是搜索引擎排序的一个重要指标。

27, Git常用指令

git init  初始化一个Git代码库

git clone [url]  从线上下载一个项目到本地

get config --list 显示当前的Git配置

git add [file1]/[dir]/. 添加指定文件/目录/所有到暂存区

git rm [file1] [file2] 删除工作区文件，并且将这次删除放入暂存区

git mv [file-original] [file-renamed] 改名文件，并将这个改名放入暂存区

git commit -m [message] 提交暂存区到仓库区 

git branch  /  git branch -r  列出所有本地/远程分支

git checkout -b [branch]  新建一个分支，并切换到该分支

git checkout [branch-name]   切换到指定分支，并更新工作区

git merge [branch]  合并指定分支到当前分支

git branch -d [branch-name]  删除分支

28, 如果git提交时,发生错误,什么原因,如何解决?

如果提交时和同事提交的的代码有冲突, 会报错首先,不要同时提交代码, 避免干涉, 另外,我们在提交代码之前,应该先把在线代码同步到本地,保证代码没有冲突之后,再提交

29, 解释移动端手势穿透现象? 如何解决?

原因: click事件触发后有300ms的延迟响应, 当点击遮罩层时,tap事件触发即立即响应,执行隐藏, 而click事件触发会在0.3s之后响应, 而在0.3s之后, 遮罩层已经隐藏, 则由下层输入框响应这个click事件, 而获取焦点

解决方案:

1, 阻止btn的touchend事件的默认行为,

2, 延迟300ms执行遮罩层cover的隐藏, 那click响应时,btn还在,即相应给btn

3, 使用插件 fastclick.js 防止手势穿透, 这个插件专为解决手势穿透现象而生

fastclick取消click事件300ms延迟的原理: fastclick监听了click事件的触发, 当body上触发了click事件时, fastclick会自定义一个事件,并立即触发, 并把监听到的系统click事件阻止掉