h5+css3基础面试题

h5+css面试题

一 HTML5中新增了那些内容?

1. 广义上的html5指的是最新一代前端开发技术的总称,包括html5,css3,新增的webAPi
2. html, 中新增了 header,footer,main,nav 等语义化标签,新增了 video,audio媒体标签, 新镇了canvas 画布. 新增了一些标签属性, 例如input 的 placeholder .
3. css 中新增了: 圆角, 阴影, 滤镜, vwvh单位, flex布局, 媒体查询, 过度和动画, 伪类.
4. webAPi, 新增了 localStorage(本地储存)和sessionStorage, querySelector, webSocket, requestAnimationFrame, Worker(类似分线程), 地理位置.

二 什么是HTMl语义化?HTMl语义化的好处是什么?

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

三 CSS中Position定位都有哪些方式?分别是什么效果

static: 静态定位, 流式布局.
relative: 相对定位,参与流式布局,可以使用top, left 等在原有位置上进行位置调整 .
absolute: 绝对定位,脱离文档流,相对于父级元素进行定位(相对于离自己最近的, position为非static的祖先级元素进行定位).
fixed: 固定定位,脱离文档流 ,相对于浏览器窗口定位,不随页面滚动而去改变位置
sticky: 粘性定位,可实现动态fixed.

四 absolute 定位的元素相对于那个元素进行定位?

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

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

transition: 简单的动画, 只需要在两个状态之间的动画
keyframAnimation: 适合需要在多个状态连续进行的动画
js动画: 功能最强的动画,但是效率最低

六 怎么隐藏页面中的某个元素?

display:none; (隐藏且不占用位置)
visibility:hidden; (隐藏但保留位置)
opacity:0; (隐藏但保留位置)

七 行元素和块元素的区别是什么?

• 行元素: 会在水平方向排列,设置宽高无效, 上下边距无效
• 块元素: 各占一行,垂直方向排列. 可设置宽高,内外边距
• 行内块元素: 会在水平方向排列,可设置宽高,内外边距同时,可通过display 属性修改标签元素类型

八 如何解决行内块间距问题

给父元素设置font-size:0
使用弹性布局或浮动布局
使用固定定位或者绝对定位

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

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

十 css3中transition和animation的区别

• transition只有开始和结束两个状态,并且需要通过事件触发
• animation 可以通过定义关键帧指定多个动画状态,可以自动播放

十一 单行文本溢出显示为省略号

text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap

十二 页面中常用的那些单位, 有什么区别?

• px: 以物理像素为基准
• em: 以当前元素font-size 为基准
• rem: 以html font-size 为基准
• -vw/vh: 以浏览器窗口狂傲为基准 100vh/vw=浏览器窗口宽高
• rex: 适用于小程序或uniapp中可以实现自适应 750rpx=屏幕宽度

十三 什么是响应式页面,是依赖什么技术实现的?

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

十四 怎么在页面上显示一条斜线?一条折线? 一条曲线?

• 使用canvas绘图话出来(比较麻烦)
• 使用div边框线+视图转换(旋转/倾斜)或变宽圆角实现(简单方便)
• 使用背景的线性渐变或径向渐变实现(比较耗性能)

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

使用 position:fixed 固定定位实现, 头部设置top属性, 左侧的设置left属性
并使用z-index属性设置显示层级, 值越大越不容易被覆盖

十六 怎么实现元素上下左右都居中?

• 实现元素本身内容居中: text-align:center+行高.
• 实现子元素在父元素中居中: 绝对定位+上下左右设置0+margin:auto
• 使用flex弹性布局
• 绝对定位+left ,top:50%;+transform:translate:-50%

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

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

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

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

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

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

二十 Less/Sass比css高级到哪了?

• 支持嵌套
• 支持变量定义
• 支持“模板函数

二十一 常见兼容性问题有哪些？

兼容问题大多出现老版本浏览器不支持新样式或渲染不统一的情况下
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边框问题，通过前后缀伪元素或者缩放解决

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

元素从结构上分为4层，内容，内间距，边框，外间距。
通过box-sizing设置计算方式，默认为content-box,及计算内容盒，可以设置为border-box,计算到边框盒。

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

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

二十四 常用的浏览器有哪些？他们分别是什么内核？

1. chrome、safari属于webkit内核。
2. 老IE(10和10以下) 属于Trident内核。
3. firefox属于Gecko内核。
4. 新IE属于Edge内核。
5. 360等特殊浏览器：多内核浏览器。

二十五 什么叫优雅降级和渐进增强？

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