H5+CSS3面试题

rem和em
line-height
居中的几种方法
- 水平居中
- 垂直居中
解决子元素浮动带来的父元素塌陷
外边距塌陷问题
伪类和伪元素
超宽文本的省略号显示
BFC的理解
transition和animation的区别
几种隐藏元素方式的区别
脱离文档流
H5的新特性
CSS3有哪些新特性
浏览器页面有哪三层构成，分别是什么，作用是什么?
Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
href和src的区别
link和@import的区别
请你说说CSS有什么特殊性?（优先级、计算特殊值）
- 优先级
- 权重、特殊性计算法：
页面布局的方式有哪些？
iframe是什么？有什么缺点？
html解析渲染和CSS、JS的关系
inline-block、inline和block的区别
CSS实现固定宽高比
响应式开发和兼容性
- 不同web间
- 不同设备间
模糊（计算机视觉）
物理分辨率

rem和em

rem：若网页根html元素设置的font-size：16px，则1 rem=16px，2rem=32px以此类推。
em：先查找本元素的font-size，若没有设置则继承父元素的，假设也为16px，则1 em=16 px，2 em= 32px以此类推。
区别：根据谁的font-size来确定。

line-height

line-height就是两行文字的底边距离，因此行距=line-height减去font-size，即line-height=行距+font-size，可用来给单排文字设计垂直居中（即将line-height设置为和父元素的height一致）。

居中的几种方法

水平居中

1、text-align:center
2、margin:0 auto（块级元素默认占一行，所以使用auto可以自动分配剩余空间；而使用绝对定位后元素脱离文档流，只占用自身大小的空间，该方法失效，要想在绝对定位后使用该方法，需要扩展其占用空间：占用一行并水平居中（left：0；right：0；margin：0 auto）；占用一列并上下居中（top：0；bottom：0；margin：auto 0）；两个方法连用可以实现水平垂直居中）
3、绝对定位 left:50% 后在左移自己宽度的一半(margin-left:负一半宽度或者使用translateX(-50%)左移自己的一半宽度)
4、使用弹性布局设置居中 justify-content: center（取决于水平轴是主轴还是交叉轴）

垂直居中

1、inline-height和height设置相同
2、auto
3、绝对定位top:50%后在上移自己宽度的一半(margin-top:负一半宽度或者使用translateY(-50%)左移自己的一半宽度)
4、使用弹性布局设置居中 align-items: center（取决于水平轴是主轴还是交叉轴）

解决子元素浮动带来的父元素塌陷

1.在塌陷的父元素底部添加一个块级元素，并设置clear:both以消除浮动元素对它的位置影响，将父元素撑开
2.设置伪元素after（原理与1相似），也是在底部设置一个空的（content=’’）块级（display:block）元素，并设置clear float以消除浮动元素对它的位置影响，将父元素撑开
3.设置overflow:hidden或auto，引入BFC，将浮动元素的高度计算在内
4.为父元素设置float（较局限）

外边距塌陷问题

（只发生在垂直方向，与行内元素和行内块级元素无关）

解决方法：
1.同级元素间的塌陷主要靠计算解决
2.父子元素间：
1)设置border或padding
2)设置BFC
3)设置position（实质是触发BFC）
4)浮动（实质是触发BFC）

伪类和伪元素

（伪元素创建对象不占据DOM节点）

超宽文本的省略号显示

1.设置宽度 width
2.设置强制一行显示 white-space:nowrap
3.overflow:hidden
4.text-overflow:ellipsis

BFC的理解

BFC即块级格式化上下文，我的理解是它是一种规则，它将触发该规则的对象放入一个独立的区域中与其他区域隔离开来，并且该区域有自己的渲染规则
触发规则：
1、display不为none
2、float
3、position：absolute、fixed
4、overflow：不为visible

transition和animation的区别

几种隐藏元素方式的区别

display为none其实在页面和DOM树中还是存在的，只不过DOM树经过重置后不占空间了
transition其实不支持visibility属性的过度

脱离文档流

使用某些属性后可以让元素脱离标准文档流，例如float、absolute等不仅让元素脱标，还可以给行内元素设置宽高属性

H5的新特性

1.用于绘画 canvas 元素。
2.用于媒介回放的 video 和 audio 元素。
3.localStorage sessionStorage
4.语意化标签，比如 article、footer、header、nav、section。

CSS3有哪些新特性

1.过渡 transition
2.动画 animation
3.形状转换 transform
4.选择器
5.颜色 rgba
6.渐变
7.Flex grid
8.盒模型定义 box-sizing:border-box和content-box
9.媒体查询

浏览器页面有哪三层构成，分别是什么，作用是什么?

构成：结构层、表示层、行为层
分别是：HTML、CSS、JavaScript
作用：HTML实现页面结构，CSS完成页面的表现与风格，JavaScript实现一些客户端的功能与业务。

Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

(1) 告知浏览器文档使用哪种规范。该标签可声明三种类型，分别表示严格版本、过渡版本以及基于框架的HTML 文档。
(2)标准模式：浏览器按 W3C 标准解析执行代码，排版和JS 运作模式是以该浏览器支持的最高标准运行；
怪异模式：则是使用浏览器自己的方式解析执行代码，是一种向后兼容的解析方法。
(3) Doctype声明定义了标准文档的类型（标准模式解析），忽略 DTD 声明，将使网页进入怪异模式。

href和src的区别

1、请求方式不同
（1） href(Hypertext Reference): 超文本引用，建立元素和文档的链接。常用的有：link、a。
（2）src在请求资源时会将其指向的资源下载并应用到文档中，直接替换。常用的有script，img 、iframe；

2、浏览器解析方式不同
（1）使用href ，可以并行下载资源。这也是为什么建议使用 link 方式加载 CSS，而不是使用 @import 方式。
（2）当浏览器解析到src ，会同步阻塞下面代码，类似于将所指向资源替换到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因。

link和@import的区别

XML/HTML代码

<link rel='stylesheet' rev='stylesheet' href='CSS文件 ' type='text/css' media='all' />

XML/HTML代码

<style type='text/css' media='screen'>
@import url('CSS文件 ');
</style>

两者都是外部引用 CSS 的方式，但是存在一定的区别：
（1）@import只可以加载CSS；link多样化。
（2）link异步加载；@import同步加载。
（3）link无兼容问题；@import有。

请你说说CSS有什么特殊性?（优先级、计算特殊值）

优先级

(1)、样式覆盖
(2)、优先级
1）!important（优先级最高）
2）id 选择器
3）class选择器、属性选择器、伪类选择器
4）标签选择器、伪元素选择器
5）通配符选择器、关系选择器（优先级最低）
(3)、就近 (内嵌样式 > 内部样式表 > 外联样式表)

权重、特殊性计算法：

CSS样式选择器分为4个等级，a、b、c、d
(1)、如果样式是行内样式（通过Style=“”定义），那么a=1，1,0,0,0
(2)、b为ID选择器的总数 0,1,0,0
(3)、c为属性选择器，伪类选择器和class类选择器的数量。0,0,1,0
(4)、d为标签、伪元素选择器的数量 0,0,0,1
(5)、!important 权重最高，比 inline style 还要高

页面布局的方式有哪些？

1.弹性布局（Flexbox）
2.瀑布流布局
3.响应式布局

iframe是什么？有什么缺点？

定义：iframe元素会创建包含另一个文档的内联框架
缺点：
1.会阻塞主页面的onload事件
2.搜索引擎无法解读这种页面，不利于SEO
3.iframe和主页面共享连接池，而浏览器对相同区域有限制所以会影响性能。

html解析渲染和CSS、JS的关系

1.css加载不阻塞解析DOM树，阻塞渲染（因为DOM树和CSSOM树才能组成Render树，而css不阻塞的话，将会首先渲染出一个原始样式，然后待css加载完成后再重新渲染该样式，会造成极差的用户体验）
2.JS 阻塞 DOM 解析和渲染，并且浏览器遇到没有defer或async属性的 script标签时，会触发页面渲染，因而如果前面CSS资源尚未加载完毕时，浏览器会等待它加载完毕在执行脚本。
3.解析DOM树过程中需要加载的图片、音频等资源可以并行请求但有个数限制（4-6）

inline-block、inline和block的区别

Block：前后换行，有宽高，margin/padding水平垂直方向都有效。
Inline：前后无换行，无宽高，margin在竖直方向上无效，padding在水平方向垂直方向都有效；高度与fontsize有关，即使没有内容，有fontsize也会有高度
Inline-block：前后无换行，有宽高，margin/padding水平垂直方向都有效，

CSS实现固定宽高比

1、设置父元素并设置width
2、设置子元素并将padding-top设置成百分比（按照父元素宽度计算）（也可以使用aspect-ratio：宽高比）
3、在子元素内设置孙子元素，并采用子绝父相的方式将孙子元素定位到子元素的起始点，在孙子元素中插入内容

响应式开发和兼容性

不同web间

1、默认的margin和padding不同（设为0）
2、图片默认有间距（float）

不同设备间

1、使用媒体查询对不同分辨率进行样式适配
2、针对手机和PC端分辨率不同问题，使用伪元素加transform对不同dpr下进行变换
3、单击300ms延迟（因为在移动端单击和双击有不同的响应（主要是双击缩放），而PC端通常可以单击的位置不支持双击，可以双击的位置没有单击响应，所以不用延迟去判断是单击还是双击）：禁用缩放、进行屏幕大小适配、fastClick等
4、点击穿透，使用touchend来代替click事件、preventDefault

模糊（计算机视觉）

模糊是由于渐变产生的。当你把一个像素放大时，边缘会由于软件算法产生一些中间颜色（介于像素本色和周围颜色之间的颜色），这是导致视觉失真的原因。而矢量图则是避免了软件算法导致的中间颜色，所以非黑即白，不会失真。

物理分辨率

一般所说的物理分辨率是指屏幕有多少个发光点，因为最佳分辨率即发光点和像素点成1比1的映射关系，所以物理分辨率也可以说成屏幕在最佳分辨率下有多少个像素点，物理分辨率即最佳分辨率。因为像素点个数不可能超过发光点个数（不可能一个发光点显示两个或多个像素），所以一般物理分辨率也代表着最高分辨率，但是可以选择比最高分辨率低的分辨率，此时就表明多个发光点映射一个像素点。

H5+CSS3面试题相关推荐

我在乐字节学习前端的第三天-学习笔记：H5+CSS3面试题总结
H5+css3面试题总结一.html5和html的区别: 1.html5新增了语义化标签:footer .nav.section- 2.html5完全支持css3 3.支持本地离线存储 4.新增了c ...
H5+css3面试题总结
H5+css3面试题总结哈喽,各位小伙伴们,又到了一年一度的毕业季,俗话说的话:毕业等于失业.一毕业就要面临着找工作的压力.我们程序员也是一样,程序员找工作更辛苦.因为还会有技术面试.所以我给大家总 ...
h5+css3基础面试题
h5+css面试题一 HTML5中新增了那些内容? 广义上的html5指的是最新一代前端开发技术的总称,包括html5,css3,新增的webAPi html, 中新增了 header,footer ...
小猿圈WEB前端之HTML5+CSS3面试题（一）
越来越多人喜欢前端岗位,毕业季已经悄然来临,很多毕业生面临找工作,那你们在狂欢快乐最后恋恋不舍之际,是否想着过几天招工作的危机.如果想要毕业之后,走向前端的岗位,那看到小编的文章后好好做一下这套题,今 ...
HTML5 + CSS3面试题整理
...
前端 input怎么显示null_小猿圈WEB前端之HTML5+CSS3面试题（一）
学习是一件非常充实的过程,特别是把自己的乐趣变成工作的时候,很多朋友就喜欢学习web前端,所以学习前端,也希望从事前端的工作,但是因为缺少实战经验,所以很多都是卡在面试这关上,下面小猿圈总结了web前 ...
登录页面html5 css3 js代码,H5+css3+js搭建带验证码的登录页面
本文实例为大家分享了H5+css3+js搭建带验证码的登录页面,供大家参考,具体内容如下 login.html EasyBuy后台管理系统 .main_bar{ width:1350px; heigh ...
h5+css3简单实现网页端五子棋游戏1.0版
H5+css3简单实现五子棋游戏原理主要使用H5的拖拽接口功能,通过拖拽移动棋子,目标位置通过接收拖拽棋子的拷贝元素,实现棋子摆放. 效果图如下步骤第一步:简单排版五子棋游戏页面,设定好棋盘排 ...
android窗帘拉开动画,H5+CSS3窗帘拉开收起动画特效源码
效果图今天给大家带来了一个简单的特效源码 H5+CSS3窗帘拉开收起动画特效源码废话不多说,上源码! html { box-sizing: border-box; } *, *::after, * ...
想学好前端 H5 CSS3 的小朋友们康康我~
嗨喽,各位亲爱的 CSDN 小伙伴们,欢迎来到实力至上主义的教室(简单为喜欢的动漫打个小广告). 以下呢是我对前端 H5 & CSS3 常用知识点历时两个多月的倾心整理,内容简练,通俗易懂(比 ...

H5+CSS3面试题

H5+CSS3面试题

rem和em

line-height

居中的几种方法

水平居中

垂直居中

解决子元素浮动带来的父元素塌陷

外边距塌陷问题

伪类和伪元素

超宽文本的省略号显示

BFC的理解

transition和animation的区别

几种隐藏元素方式的区别

脱离文档流

H5的新特性

CSS3有哪些新特性

浏览器页面有哪三层构成，分别是什么，作用是什么?

Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

href和src的区别

link和@import的区别

请你说说CSS有什么特殊性?（优先级、计算特殊值）

优先级

权重、特殊性计算法：

页面布局的方式有哪些？

iframe是什么？有什么缺点？

html解析渲染和CSS、JS的关系

inline-block、inline和block的区别

CSS实现固定宽高比

响应式开发和兼容性

不同web间

不同设备间

模糊（计算机视觉）

物理分辨率

H5+CSS3面试题相关推荐

最新文章

热门文章