html+css史诗级面试题

1.什么叫优雅降级和渐进增强？

都是解决网站对于老旧版本浏览器的兼容问题。
优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效。
渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。

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

html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;
搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

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

Static(默认)， 静态定位，流式布局 四忒特克
Relative，相对定位，参与流式布局，可以使用left等在原有位置上进行位置调整。 瑞雷特务
Absolute，绝对定位，脱离文档流，相对于另一个元素进行定位。
Fixed，固定定位，脱离文档流，相对于浏览器窗口定位，不随页面滚动而改变位置。菲克斯特
Sticky，粘性定位，可实现动态fixed。 四忒k

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

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

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

Transition：简单的动画，只需要在两个状态之间变化的动画。太四谁醒
keyframeAnimation：适合需要在多个状态连续进行的动画。K付亚木 阿尼没醒
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.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] 合并指定分支到当前分支