H5+CSS3精选基础实⽤⾯试题
1, HTML5中新增了哪些内容？
⼴义上的html5指的是最新⼀代前端开发技术的总称，包括html5，CSS3，新增的webAPI。
Html中新增了header,footer,main,nav等语义化标签，新增了video,audio媒体标签，新增了canvas画布。新增了⼀些标签属性，例如input的placeholder。
Css3中新增了：圆⾓，阴影，滤镜，vwvh单位，flex布局，媒体查询，过度和动画，伪类。
webAPI，新增了localStorage和sessionStorage，querySelector，webSocket，requestAnimationFrame，Worker(类似分线程)，地理位置。
2, 什么是HTML语义化？HTML语义化的好处是什么？
html语义化让页⾯的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
即使在没有样式CSS情况下也以⼀种⽂档格式显⽰，并且是容易阅读的;
搜索引擎的爬⾍也依赖于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+⾏⾼。怎样设置ie为默认浏览器
(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, 什么叫优雅降级和渐进增强？
都是解决⽹站对于⽼旧版本浏览器的兼容问题。
优雅降级：Web站点在所有新式浏览器中都能正常⼯作，如果⽤户使⽤的是⽼式浏览器，则代码会检查以确认它们是否能正常⼯作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了，为那些⽆法⽀持功能的浏览器增加候选⽅案，使之在旧式浏览器上以某种形式降级体验却不⾄于完全失效。
渐进增强：从被所有浏览器⽀持的基本功能开始，逐步地添加那些只有新式浏览器才⽀持的功能，向页⾯增加⽆害于基础浏览器的额外样式和功能的。当浏览器⽀持时，它们会⾃动地呈现出来并发挥作⽤。