关于css:我在乐字节学习前端的第三天学习笔记H5CSS3面试题总结

H5+css3 面试题总结

一、html5 和 html 的区别：

1.html5 新增了语义化标签：footer、nav、section…

2.html5 齐全反对 css3

3. 反对本地离线存储

4. 新增了 canvas 标签

5. 新增视频和音频标签

HTML5 离线存储

localStorage 长期存储数据，浏览器敞开后数据不失落；sessionStorage 数据在浏览器敞开后主动删除。

如何辨别 HTML 和 HTML5？

• DOCTYPE 申明
  新增的构造元素
  性能元素
  123

二、对语义化标签的了解（长处）：

a. 去掉或者失落款式的时候可能让页面呈现出清晰的构造

b. 有利于 SEO：和搜索引擎建设良好沟通，有助于爬虫抓取更多的无效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；

c. 不便其余设施解析（如屏幕阅读器、盲人阅读器、挪动设施）以意义的形式来渲染网页；

d. 便于团队开发和保护，语义化更具可读性，遵循 W3C 规范的团队都遵循这个规范，能够缩小差异化。

三、浏览器的内核：

IE 浏览器的内核 Trident、Mozilla 的 Gecko、Chrome 的 Blink（WebKit 的分支）、Opera 内核原为 Presto，现为 Blink；

介绍一下你对浏览器内核的了解？

次要分成两局部：渲染引擎 (layout engineer 或 Rendering Engine) 和 JS 引擎。

渲染引擎：负责获得网页的内容（HTML、XML、图像等等）、整顿讯息（例如退出 CSS 等），以及计算网页的显示方式，而后会输入至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的成果也不雷同。所有网页浏览器、电子邮件客户端以及其它须要编辑、显示网络内容的应用程序都须要内核。

JS 引擎则：解析和执行 javascript 来实现网页的动态效果。

四、前端页面有哪三层形成，别离是什么？作用是什么？

a. 结构层：由 HTML 或 XHTML 之类的标记语言负责创立，仅负责语义的表白。解决了页面“内容是什么”的问题。

b. 表示层：由 CSS 负责创立，解决了页面“如何显示内容”的问题。

c. 行为层：由脚本负责。解决了页面上“内容应该如何对事件作出反应”的问题。

五、Doctype 作用? 严格模式与混淆模式如何辨别？它们有何意义?

申明位于文档中的最后面，处于 标签之前。告知浏览器以何种模式来渲染文档。

严格模式的排版和 JS 运作模式是，以该浏览器反对的最高规范运行。

在混淆模式中，页面以宽松的向后兼容的形式显示。模仿老式浏览器的行为以避免站点无奈工作。

DOCTYPE 不存在或格局不正确会导致文档以混淆模式出现。

六、你晓得多少种 Doctype 文档类型？

标签可申明三种 DTD 类型，别离示意严格版本、过渡版本以及基于框架的 HTML 文档。

七、HTML 与 XHTML——二者有什么区别

a. XHTML 元素必须被正确地嵌套。

b. XHTML 元素必须被敞开。

c. 标签名必须用小写字母。

d. XHTML 文档必须领有根元素。

八、讲讲输出完网址按下回车，到看到网页这个过程中产生了什么

a. 域名解析

b. 发动 TCP 的 3 次握手

c. 建设 TCP 连贯后发动 http 申请

d. 服务器端响应 http 申请，浏览器失去 html 代码

e. 浏览器解析 html 代码，并申请 html 代码中的资源

f. 浏览器对页面进行渲染出现给用户

九、网站重构的了解

重构：在不扭转内部行为的前提下，简化构造、增加可读性，而在网站前端保持一致的行为。

a. 使网站前端兼容于古代浏览器(针对于不合标准的 CSS、如对 IE6 无效的)

b. 对于挪动平台的优化，针对于 SEO 进行优化

c. 缩小代码间的耦合，让代码放弃弹性

d. 压缩或合并 JS、CSS、image 等前端资源

十、一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些办法优化这些图片的加载，给用户更好的体验。

a. 图片懒加载，滚动到相应地位才加载图片。

b. 图片预加载，如果为幻灯片、相册等，将以后展现图片的前一张和后一张优先下载。

c. 应用 CSSsprite，SVGsprite，Iconfont、Base64 等技术，如果图片为 css 图片的话。

d. 如果图片过大，能够应用非凡编码的图片，加载时会先加载一张压缩的特地厉害的缩略图，以进步用户体验。

title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区别？

title 与 h1 的区别 定义：title 是网站题目，h1 是文章主题 作用：title 概括网站信息，能够间接通知搜索引擎和用户这个网站是对于什么主题和内容的，是显示在网页 Tab 栏里的；h1 突出文章主题，面对用户，更突出其视觉效果，指向页面主体信息，是显示在网页中的。

b 与 strong 的区别 定义：b(bold) 是实体标签，用来给文字加粗，而 strong 是逻辑标签，作用是增强字符语气。区别：b 标签只是加粗的款式，没有理论含意，罕用来表白无强调或着重象征的粗体文字，比方文章摘要中的关键词、评测文章中的产品名称、文章的导言；而 strong 示意标签内字符重要，用以强调，其默认格局是加粗，然而能够通过 CSS 增加款式，应用别的款式强调。倡议：为了合乎 CSS3 的标准，b 应尽量少用而改用 strong

i 与 em 的区别 定义：i(italic) 是实体标签，用来使字符歪斜，而 em(emphasis)是逻辑标签，作用是强调文本内容 区别： i 标签只是斜体的款式，没有理论含意，罕用来表白无强调或着重象征的斜体，比方生物学名、术语、外来语；而 em 示意标签内字符重要，用以强调，其默认格局是斜体，然而能够通过 CSS 增加款式。倡议：为了合乎 CSS3 的标准，i 应尽量少用而改用 em

十一、iframe 的优缺点？

长处：

a. 解决加载迟缓的第三方内容如图标和广告等的加载问题

b. iframe 无刷新文件上传

c. iframe 跨域通信

毛病：

a. iframe 会阻塞主页面的 Onload 事件

b. 无奈被一些搜索引擎索引到

c. 页面会减少服务器的 http 申请

d. 会产生很多页面，不容易治理。

十二、请论述 table 的毛病

a. 太深的嵌套，比方 table>tr>td>h3，会导致搜索引擎读取艰难，而且，最间接的损失就是大大增加了冗余代码量。

b. 灵活性差，比方要将 tr 设置 border 等属性，是不行的，得通过 td

c. 代码臃肿，当在 table 中套用 table 的时候，浏览代码会显得异样凌乱

d. 凌乱的 colspan 与 rowspan，用来布局时，频繁应用他们会造成整个文档程序凌乱。

e. table 须要屡次计算能力确定好其在渲染树中节点的属性，通常要花 3 倍于等同元素的工夫。

f. 不够语义

十三、行内元素和块级元素有哪些：

行内元素：a b br i span input select strong

块级元素：div p h1—h6 from ul ol li

十四、行内元素和块级元素的区别：

行内元素：会在程度方向排列，不能蕴含块级元素，设置 width 有效，height 有效(能够设置 line-height)，margin 高低有效，padding 高低有效。

块级元素：各占据一行，垂直方向排列。从新行开始完结接着一个断行。

十五、革除浮动的形式：

（1）父级 div 定义 height。

（2）结尾处加空 div 标签 clear:both。

（3）父级 div 定义伪类:after 和 zoom。

（4）父级 div 定义 overflow:hidden。

（5）父级 div 定义 overflow:auto。

（6）父级 div 也浮动，须要定义宽度。

（7）父级 div 定义 display:table。

（8）结尾处加 br 标签 clear:both。

十六、Doctype 作用？规范模式与兼容模式各有什么区别：

1. 告知浏览器的解析器用什么文档规范解析这个文档。DOCTYPE 不存在或格局不正确会导致文档以兼容模式出现。

2. 规范模式的排版和 JS 运作模式都是以该浏览器反对的最高规范运行。在兼容模式中，页面以宽松的向后兼容的形式显示, 模仿老式浏览器的行为以避免站点无奈工作。

十七、引入 css 款式的形式：

1. 行内式：间接在 style 属性中设定 css 款式

2. 嵌入式：写在标签里

3. 导入式：

4. 链接式：

十八 页面导入款式时，应用 link 和 @import 有什么区别？

（1）link 属于 XHTML 标签，除了加载 CSS 外，还能用于定义 RSS, 定义 rel 连贯属性等作用；而 @import 是 CSS 提供的，只能用于加载 CSS;

（2）页面被加载的时，link 会同时被加载，而 @import 援用的 CSS 会等到页面被加载完再加载;

（3）import 是 CSS2.1 提出的，只在 IE5 以上能力被辨认，而 link 是 XHTML 标签，无兼容问题。

十九、css 的三大个性：

1. 继承性

2. 成叠性

3. 优先级

二十、css 的选择符：

1. 标签选择器

2.ID 选择器

3. 类选择器

4. 相邻选择器

5. 子选择器

6. 后辈选择器

7. 通配符选择器

8. 属性选择器

9. 伪类选择器

二十一、css 中可继承的款式：

Font-size font-family color text-indent

不可继承的款式：

border padding margin width height ;

CSS 优先级算法如何计算？

•   优先级就近准则，同权重状况下款式定义最近者为准;
•   载入款式以最初载入的定位为准;

​
优先级为:
同权重: 内联样式表（标签外部）> 嵌入样式表（以后文件中）> 内部样式表（内部文件中）。
!important > id > class > tag
important 比 内联优先级高
1234567

二十三、标签上 title 与 alt 属性的区别：

title：为该属性提供信息

alt：当图片不显示时，用文字代替

二十四、简述一下 src 与 href 的区别。

src 用于替换以后元素，href 用于在以后文档和援用资源之间确立分割。

src 是 source 的缩写，指向内部资源的地位，指向的内容将会嵌入到文档中以后标签所在位置；在申请 src 资源时会将其指向的资源下载并利用到文档内，例如 js 脚本，img 图片和 frame 等元素。

二十五、css 中能够让文字在垂直和程度方向上重叠的两个属性是什么？

垂直方向：line-height

程度方向：letter-spacing

那么问题来了，对于 letter-spacing 的妙用晓得有哪些么？

答案: 能够用于打消 inline-block 元素间的换行符空格间隙问题。

二十六、display:none 与 visibility:hidden 的区别是什么？

display : 暗藏对应的元素但不挤占该元素原来的空间。

visibility: 暗藏对应的元素并且挤占该元素原来的空间。

介绍一下规范的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？

（1）有两种，IE 盒子模型、W3C 盒子模型；
（2）盒模型：内容(content)、填充(padding)、边界(margin)、边框(border)；
（3）区 别：IE 的 content 局部把 border 和 padding 计算了进去;
123

二十七、BFC 是什么?（Block Formatting Context）

BFC（块级格式化上下文），一个创立了新的 BFC 的盒子是独立布局的，盒子内元素的布局不会影响盒子里面的元素。

在同一个 BFC 中的两个相邻的盒子在垂直方向产生 margin 重叠的问题

BFC 是指浏览器中创立了一个独立的渲染区域，该区域内所有元素的布局不会影响到区域外元素的布局，这个渲染区域只对块级元素起作用

二十八、CSS3 新个性

1. CSS3 实现圆角（border-radius），暗影（box-shadow），
2. 对文字加特效（text-shadow、），线性突变（gradient），旋转（transform）
3. transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转, 缩放, 定位, 歪斜
4. 减少了更多的 CSS 选择器 多背景 rgba
5. 在 CSS3 中惟一引入的伪元素是 ::selection.
6. 媒体查问，多栏布局
7. border-image

二十九、、列出 display 的值，阐明他们的作用。position 的值，relative 和 absolute 定位原点是？

1、display 的值

block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。

none 缺省值。象行内元素类型一样显示。

inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。

inline-block 默认宽度为内容宽度，能够设置宽高，同行显示。

list-item 象块类型元素一样显示，并增加款式列表标记。

table 此元素会作为块级表格来显示。

inherit 规定应该从父元素继承 display 属性的值。

2、position 的值

absolute：生成相对定位的元素，绝对于 static 定位以外的第一个父元素进行定位。

fixed：（老 IE 不反对）生成相对定位的元素，绝对于浏览器窗口进行定位。

relative：生成绝对定位的元素，绝对于其失常地位进行定位。

static：默认值。没有定位，元素呈现在失常的流中

*（疏忽 top, bottom, left, right z-index 申明）。

• inherit 规定从父元素继承 position 属性的值。

三十、浏览器规范模式和怪异模式之间的区别是什么？

1）在严格模式中：width 是内容宽度，元素真正的宽度 = margin-left + border-left-width + padding-left + width + padding-right + border-right- width + margin-right;

在怪癖模式中：width 则是元素的理论宽度，内容宽度 = width – (padding-left + padding-right + border-left-width + border-right-width)

2）能够设置行内元素的高宽

在 Standards 模式下，给 span 等行内元素设置 wdith 和 height 都不会失效，而在 quirks 模式下，则会失效。

3）可设置百分比的高度

在 standards 模式下，一个元素的高度是由其蕴含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是有效的。

4）用 margin:0 auto 设置程度居中在 IE 下会生效

应用 margin:0 auto 在 standards 模式下能够使元素程度居中，但在 quirks 模式下却会生效,quirk 模式下的解决办法，用 text-align 属性:

body{text-align:center};#content{text-align:left}

5）quirk 模式下设置图片的 padding 会生效

6）quirk 模式下 Table 中的字体属性不能继承下层的设置

7）quirk 模式下 white-space:pre 会生效

8）盒模型解释不同

三十一、在 css/js 代码上线之后开发人员常常会优化性能，从用户刷新网页开始，一次 js 申请个别状况下有哪些地方会有缓存解决？

dns 缓存，cdn 缓存，浏览器缓存，服务器缓存。

三十二、为什么利用多个域名来存储网站资源会更无效？

CDN 缓存更不便 冲破浏览器并发限度

节约 cookie 带宽

节约主域名的连接数，优化页面响应速度

避免不必要的平安问题

三十三、伪类和伪元素：

CSS 伪类：用于向某些选择器增加非凡的成果。

CSS 伪元素：用于将非凡的成果增加到某些选择器。

三十四：css3 新增伪类和伪元素

伪元素：

p:first-of-type

抉择属于其父元素的首个元素的每个元素。

p:last-of-type

抉择属于其父元素的最初元素的每个元素。

p:only-of-type

抉择属于其父元素惟一的元素的每个元素。

p:only-child

抉择属于其父元素惟一的子元素的每个元素。

伪类：

:hover

将款式增加到鼠标悬浮的元素

:active

将款式增加到被激活的元素

:focus

将款式增加到取得焦点的元素

:link

将款式增加到未被拜访过的链接

三十五、html5 布局的形式：

1. 浮动

2. 定位

3. 分栏布局

4. 弹性布局

5. 响应式布局

三十六、弹性布局的长处：

1 适应性强，在做不同屏幕分辨率的界面时十分实用

2 能够随便依照宽度、比例划分元素的宽高

3 能够轻松扭转元素的显示程序

4 弹性布局实现快捷，易保护

三十七、content-box 和 border-box，为什么看起来 content-box 更正当，但还是常常应用 border-box?

• content-box 是 W3C 的规范盒模型 元素宽度 +padding+border
• border-box 是 ie 的怪异盒模型，他的元素宽度等于内容宽度 内容宽度蕴含了 padding 和 border
• 比方有时候在元素根底上增加内边距 padding 或 border 会将布局撑破 然而应用 border-box 就能够轻松实现

三十八、实现三个 DIV 等分排在一行（考查 border-box)

1. 设置 border-box width 33.33%

2.flexbox flex:1

三十九、怎么实现一个 DIV 左上角到右下角的挪动，有哪些办法？怎么实现？

• 扭转 left 值为 window 宽度 -div 宽度 top 值为 window 高度 =div 高度
• jquery 的 animate 办法
• css3 的 transition

四十、rem 和 em 的区别？

em 绝对于父元素，rem 绝对于根元素

四十一、渐进加强和优雅降级

渐进加强：针对低版本浏览器进行构建页面，保障最根本的性能，而后再针对高级浏览器进行成果、交互等改良和追加性能达到更好的用户体验。

优雅降级：一开始就构建残缺的性能，而后再针对低版本浏览器进行兼容。

四十二、HTTP 和 HTTPS

HTTP 协定通常承载于 TCP 协定之上，在 HTTP 和 TCP 之间增加一个平安协定层（SSL 或 TSL），这个时候，就成了咱们常说的 HTTPS。

默认 HTTP 的端口号为 80，HTTPS 的端口号为 443。

四十三、性能优化问题

代码层面：防止应用 css 表达式，防止应用高级选择器，通配选择器。

缓存利用：缓存 Ajax，应用 CDN，应用内部 js 和 css 文件以便缓存，增加 Expires 头，服务端配置 Etag，缩小 DNS 查找等

申请数量：合并款式和脚本，应用 css 图片精灵，初始首屏之外的图片资源按需加载，动态资源提早加载。

申请带宽：压缩文件，开启 GZIP，

代码层面的优化

用 hash-table 来优化查找

少用全局变量

用 innerHTML 代替 DOM 操作，缩小 DOM 操作次数，优化 javascript 性能

用 setTimeout 来防止页面失去响应

缓存 DOM 节点查找的后果

防止应用 CSS Expression

防止全局查问

防止应用 with(with 会创立本人的作用域，会减少作用域链长度)

多个变量申明合并

防止图片和 iFrame 等的空 Src。空 Src 会从新加载以后页面，影响速度和效率

尽量避免写在 HTML 标签中写 Style 属性

挪动端性能优化

尽量应用 css3 动画，开启硬件加速。

适当应用 touch 事件代替 click 事件。

防止应用 css3 突变暗影成果。

能够用 transform: translateZ(0)来开启硬件加速。

不滥用 Float。Float 在渲染时计算量比拟大，尽量减少应用

不滥用 Web 字体。Web 字体须要下载，解析，重绘以后页面，尽量减少应用。

正当应用 requestAnimationFrame 动画代替 setTimeout

CSS 中的属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）会触发 GPU 渲染，请正当应用。过渡应用会引发手机过耗电减少

PC 端的在挪动端同样实用

四十四、ES6 的了解：

语法糖(箭头函数，类的定义，继承)，以及一些新的扩大（数组，字符串，对象，办法等），对作用域的从新定义，以及异步编程的解决方案（promise，async，await）、解构赋值的呈现

ES6 罕用个性

变量定义(let 和 const, 可变与不可变，const 定义对象的非凡状况) 解构赋值 模板字符串 数组新 API(例：Array.from(),entries(),values(),keys()) 箭头函数(rest 参数，扩大运算符，:: 绑定 this) Set 和 Map 数据结构(set 实例成员值惟一存储 key 值，map 实例存储键值对(key-value)) Promise 对象(前端异步解决方案进化史，generator 函数，async 函数) Class 语法糖(super 关键字)

es6 如何转为 es5？

应用 Babel 转码器，Babel 的配置文件是.babelrc，寄存在我的项目的根目录下。应用 Babel 的第一步，就是配置这个文件。

四十五、对 MVC 和 MVVM 的了解

MVC

View 传送指令到 Controller

Controller 实现业务逻辑后，要求 Model 扭转状态

Model 将新的数据发送到 View，用户失去反馈

所有通信都是单向的。

Angular 它采纳双向绑定（data-binding）：View 的变动，主动反映在 ViewModel，反之亦然。

组成部分 Model、View、ViewModel

View：UI 界面

ViewModel：它是 View 的形象，负责 View 与 Model 之间信息转换，将 View 的 Command 传送到 Model；

Model：数据拜访层

四十六、cookie 和 session 的区别：

1、cookie 数据寄存在客户的浏览器上，session 数据放在服务器上。

2、cookie 不是很平安，他人能够剖析寄存在本地的 COOKIE 并进行 COOKIE 坑骗

思考到平安该当应用 session。

3、session 会在肯定工夫内保留在服务器上。当拜访增多，会比拟占用你服务器的性能

思考到加重服务器性能方面，该当应用 COOKIE。

4、单个 cookie 保留的数据不能超过 4K，很多浏览器都限度一个站点最多保留 20 个 cookie。

四十七、为什么 HTTPS 平安

因为网络申请须要两头有很多的服务器路由器的转发。两头的节点都可能篡改信息，而如果应用 HTTPS，密钥在你和终点站才有。https 之所以比 http 平安，是因为他利用 ssl/tls 协定传输。它蕴含证书，卸载，流量转发，负载平衡，页面适配，浏览器适配，refer 传递等。保障了传输过程的安全性

四十八、请说出三种缩小页面加载工夫的办法。

• 1. 优化图片
• 2. 图像格式的抉择
• 3. 优化 CSS
• 4. 网址后加斜杠
• 5. 表明高度和宽度
• 6. 缩小 http 申请（合并文件，合并图片）。

四十九，什么是 FOUC？你如何来防止 FOUC？

因为 css 引入应用了 @import 或者存在多个 style 标签以及 css 文件在页面底部引入使得 css 文件加载在 html 之后导致页面闪动、花屏 用 link 加载 css 文件，放在 head 标签外面