前端浏览器兼容性-uc浏览起器下载

原理：当样式表加载晚于结构化html时，加载到这个样式表时，页面会停止之前的渲染。 下载并解析此样式表后，将重新渲染页面，并会出现短暂的花屏。

解决方法：使用 LINK 标记将样式表放在文档 HEAD 中。

20、line-height的三种赋值方式有什么区别？ （带单位、纯数字、百分比）

with unit: px不需要计算，em会让元素根据父元素的font-size值计算自己的行高

纯数字：将比例传给后代，比如父元素行高为1.5，子元素字体为18px，则子元素行高为1.5*18=27px

百分比：将计算值传递给后代

21. :link、:visited、:hover、:active的执行顺序是什么？

LVHA，l(link)ov(visited)eh(hover)a(active)te，可以用喜欢和不喜欢两个词来概括

22. 经常遇到的浏览器兼容性有哪些？ 怎么解决？

A。 浏览器默认的margin和padding不一样

b. IE6 双边距错误

C。 在ie6和ie7中，元素的高度超过了自己设置的高度。原因是IE8之前的浏览器都会给元素设置默认行高的高度。

d. 最小高度在 IE6 下不起作用

e. 透明度IE使用filter:Alpha(Opacity=60)，而其他主流浏览器使用opacity:0.6

F。 输入边框问题，去除输入边框一般使用border:none;，但是由于IE6在解析输入样式时的BUG（优先级问题），在IE6下无效

23. 有没有办法在 DOM 上设置 CSS 样式？

A。 外部样式表：via

标签导入外部css文件

b. 内部样式表：将css代码放入

里面的标签

C。 内联样式：直接在HTML元素内部定义css样式

24. 什么是保证金重叠？ 重叠的结果是什么？

保证金重叠是保证金崩溃。

1、标签上的title属性和alt属性有什么区别？

alt 属性用于向无法看到文档中的图像的查看者提供文本描述。 并且长度必须小于100个英文字符或用户必须确保替换文本尽可能短。

这包括使用本身不支持图形或图形已关闭的浏览器的用户、视障用户和使用屏幕阅读器的用户等。

title 属性为设置它的元素提供咨询信息。 使用 title 属性提供非必要的额外信息。 参考《alt和title属性的区别及应用》

2、分别编写如下HTML标签：text bold, subscript, center, font

大胆的：，

下标：

中心：

字体:,

3. 请至少写出5个新的HTML5标签，并解释它们的语义和应用场景

section：定义文档中的一个部分

nav：定义一个只包含导航链接的部分

header：定义页面或章节的标题。 它通常包含徽标、页面标题和导航目录。

footer：定义页面或章节的页脚。 它通常包含版权信息、法律信息的链接以及反馈建议的地址。

aside：定义与页面内容不太相关的内容——如果去掉，剩下的内容还是很合理的。

4.请谈谈你对标签语义的理解？

A。 当样式被移除或丢失时，页面可以显示出清晰的结构

b. 有利于SEO：与搜索引擎建立良好的沟通有助于爬虫抓取更有效的信息：爬虫依靠标签来确定每个关键词的上下文和权重；

C。 促进其他设备（如屏幕阅读器、盲人阅读器、移动设备）的解释，以有意义的方式呈现网页；

d. 方便团队开发维护，语义可读性更强。 遵循W3C标准的团队遵循这个标准，可以减少差异化。

5、Doctype的作用是什么？ 如何区分严格模式和混合模式？ 他们的意思是什么？

声明在文档中排在第一位，在标签之前。 告诉浏览器在哪种模式下呈现文档。

严格模式下的排版和 JS 以浏览器支持的最高标准运行。

在混杂模式下，页面以轻松的向后兼容方式显示。 模拟旧浏览器的行为以防止网站无法正常工作。

不存在或格式错误的 DOCTYPE 将导致文档以混杂模式呈现。

6、你知道多少种Doctype文档类型？

标记可以声明三种 DTD 类型，分别代表严格的、临时的和基于框架的 HTML 文档。

HTML 4.01 指定了三种文档类型：Strict、Transitional 和 Frameset。

XHTML 1.0 指定了三种 XML 文档类型：Strict、Transitional 和 Frameset。

标准模式（也称为严格呈现模式）用于呈现遵循最新标准的页面，

Quirks（遏制）模式（也称为松散渲染模式或兼容模式）用于渲染为传统浏览器设计的网页。

7. HTML 与 XHTML——有什么区别

A。 XHTML 元素必须正确嵌套。

b. XHTML 元素必须是封闭的。

C。 标记名称必须为小写字母。

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

8、html5有哪些新特性，去掉了哪些元素？

A。 HTML5不再是SGML的一个子集，主要是增加了图像、定位、存储、多任务处理等功能。

b. 拖放 API

C。 更好的语义内容标签（页眉、导航、页脚、旁边、文章、部分）

d. 音频、视频API（音频、视频）

e. 画布API

F。 地理定位API

G。 本地离线存储localStorage长期存储数据，关闭浏览器后数据不会丢失

H。 sessionStorage的数据会在页面session结束时清空

我。 表单控件、日历、日期、时间、电子邮件、url、搜索

j. 新技术webworker、websocket等

删除的元素：

A。 纯表达元素：basefont, big, center, s, strike, tt, u；

b. 对可用性产生负面影响的元素：frame、frameset、noframes；

9、iframe的优缺点是什么？

优势：

A。 解决图标、广告等第三方内容加载慢的问题

b. iframe文件上传不刷新

C。 iframe跨域通信

缺点：

A。 iframe会屏蔽主页面的Onload事件

b. 某些搜索引擎无法收录

C。 页面会增加服务器的http请求

d. 会产生很多页面，不好管理。

10.什么是怪癖模式？ 它和标准模式有什么区别？

我们在写程序的时候也经常会遇到这样的问题，如何保证原有的界面不变，提供更强大的功能，尤其是新功能与旧功能不兼容的时候。 没有人会在IE6之前的页面上写DTD，所以IE6假设如果写了DTD，就意味着这个页面会采用更好支持CSS的布局，如果不支持就采用兼容上一个的布局。 这就是 Quirks 模式（怪癖模式，怪异模式，怪异模式）。

差异：总体来说，在布局、样式解析、脚本执行上存在三个差异。

A。 盒模型：在W3C标准中，如果给元素设置宽高，是指元素内容的宽高。 在Quirks模式下，IE的宽高还包括padding和border。

b. 设置内联元素的高和宽：在Standards模式下，为内联元素设置wdith和height不会生效，但在quirks模式下会生效。

C。 设置百分比高度：在标准模式下，元素的高度由其内容决定。 如果父元素没有设置百分比高度，那么给子元素设置百分比高度是无效的。

d. 设置水平居中：在标准模式下使用 margin:0 auto 使元素水平居中，但在 quirks 模式下会失败。

11.请说明table的缺点

A。 嵌套太深，比如table>tr>td>h3，会让搜索引擎难以阅读，最直接的损失就是大大增加了冗余代码量。

b. 灵活性差。 比如你要设置tr的border等属性，是不行的。 你必须通过 td

C。 代码臃肿，表格中应用表格时，阅读代码会显得极其混乱

d. 混淆colspan和rowspan，在用于布局时，频繁使用会导致整个文档的顺序混乱。

e. 语义不够

12.简述src和href的区别

src 用于替换当前元素； href 用于在当前文档和引用的资源之间建立链接。

src是source的缩写，指向外部资源的位置，指向的内容会嵌入到文档中当前标签的位置

href是Hypertext Reference的缩写，指向网络资源所在位置，与当前元素（锚点）或当前文档（链接）建立链接。

CSS

1.谈谈你对CSS布局的理解

常见布局方式：固定布局、流体布局、弹性布局、浮动布局、定位布局、margin和padding

2. 请列出几种清除浮动的方法（至少两种）

float 会漂浮在正常流的上方前端浏览器兼容性，像云一样，但只有左右。 正是这个特性导致盒子显示高度为0（高度塌陷），因为盒子内部没有其他普通的流元素。

A。 添加额外的标签，例如

b. 使用 br 标签和它自己的 html 属性，例如

C。 父元素设置溢出：隐藏； 在IE6中，也需要触发hasLayout，比如zoom: 1;

d. 在父元素上设置 overflow: auto 属性； IE6也需要触发hasLayout

e. 父元素也设置为浮动

F。 父元素集显示：table

G。 使用 :after 伪元素； 由于IE6-7不支持:after，使用zoom:1触发hasLayout。

CSS2.1中有一个很重要的概念，就是Block formatting contexts（块级格式化上下文），简称BFC。

用BFC创建的元素是一个独立的盒子，里面的子元素在布局时不会影响外面的元素，而BFC在文档中仍然属于正常流。

IE6-7的显示引擎使用了一个内部概念，称为布局。

3、请列举几种隐藏元素的方法

A。 可见性：隐藏； 这个属性只是简单的隐藏了一个元素，但是元素所占的空间依然存在。

b. 不透明度：0； 一个 CSS3 属性，设置为 0 可以使元素完全透明，产生与可见性相同的效果。 与visibility相比，可以进行transition和animation

C。 位置：绝对； 使元素脱离文档流，在普通文档之上，为其设置一个大的左负值定位，使元素定位在可见区域之外。

d. 显示：无； 该元素将变得不可见，并且不再占用文档中的空间。

e. 变换：比例（0）； 将一个元素设置为无限小，这个元素将不可见。 该元素的原始位置将被保留。

F。 HTML5 隐藏属性； hidden属性的作用和display:none是一样的； 该属性用于记录元素的状态

G。 高度：0； 溢出：隐藏； 将元素在垂直方向收缩为0，使元素消失。 只要元素没有可见边框，这种技术就可以正常工作。

H。 过滤器：模糊（0）； 将一个元素的blur设置为0，让这个元素在页面中“消失”。

4.如何将一段文字中所有英文单词的首字母大写

文本转换：

无| capitalize（将每个单词的第一个字母转换为大写）| 大写（将每个单词转换为大写）| 小写（将每个单词转换为小写）

5.请简要描述CSS样式表继承

CSS 样式表继承意味着将特定的 CSS 属性传递给后代元素。 将被继承的属性如下：

文本相关：字体系列、字体大小、字体样式、字体变体、字体粗细、字体、字母间距、行高、颜色

列表相关：list-style-image, list-style-position, list-style-type, list-style

6.请简要描述CSS选择器

元素选择器：*、E、E#id、E.class

关系选择器：E、F、E>F、E+F、E~F

属性选择器：E[att], E[att="val"], E[att~="val"], E[att^="val"], E[att$="val"], E[ att *="val"], E[att|="val"]

伪类选择器：E:link, E:visited, E:hover, E:active, E:focus, E:lang(fr), E:not(s), E:root, E:first-child, E :last-chil 等

伪对象选择器：E:first-letter/E::first-letter, E:first-line/E::first-line, E:before/E::before, E:after/E::after, E ::选择

7. CSS伪类和CSS伪对象的区别

CSS引入了伪类和伪元素的概念来描述现有CSS无法描述的东西

根本区别在于：它们是否创建新元素（抽象）

伪类：最初用来表示一些元素的动态状态，后来CSS2标准扩大了它的概念范围，使其成为逻辑上存在但不需要在文档树中识别的“幽灵”类别

伪对象：表示一个元素的子元素，虽然逻辑上存在，但实际上不存在于文档树中

8.请简述CSS的权重规则

一个内联样式+1000，一个id+100，一个属性选择器/类/伪类选择器+10，一个元素名/伪对象选择器+1。

关系选择器将被拆分为两个选择器进行重新计算。

9. 请写多个等高线布局

A。 假等高列：使用一张背景图，在列的父元素上使用这张背景图进行Y轴布局，从而实现等高列的假图

b. 为容器div使用单独的背景色（固定布局）（流体布局）：使用元素中的最大高度来扩展其他容器的高度

C。 创建一个带边框的两列等高布局：使用border-left来做，只能使用两列。

d. 使用positive padding和negative margin对冲实现多列布局方法：在所有列中使用positive top and bottom padding和negative top and bottom margin，并在所有列外添加一个container，设置overflow:hiden防止溢出背景切

e. 使用边框和定位来模拟列高：但不是在多列中

F。 模仿表格布局等高栏效果：兼容性差，无法在ie6-7正常运行

10.px和em经常用在CSS样式中。 各自的优缺点是什么，性能上有什么区别？

px 是相对长度单位，相对于显示器的屏幕分辨率。

em 是一个相对长度单位，相对于当前对象中文本的字体大小。

px定义的字体不能使用浏览器的字体放大功能。

em的值不固定，会继承父元素的字体大小，1÷父元素的font-size×待转换的像素值=em值。

11. CSS中的link和@import有什么区别？

A。 link是HTML标签，而@import是CSS提供的，只能加载CSS

b. 页面加载的时候会同时加载链接，@import引用的CSS会等到页面加载完毕再加载

C。 import只能被IE5及以上识别，link是HTML标签，不存在兼容性问题

d. 链接样式的权重高于@import

e. 使用Javascript控制DOM改变样式时，只能使用link方式，因为@import只关心CSS，不关心DOM。

12. position的absolute和fixed的共同点和区别

相同的：

A。 改变内联元素的渲染方式，display设置为block

b. 让元素与众不同的流动，不占空间

C。 默认情况下，它会覆盖在非定位元素上

区别：

可以设置绝对的“根元素”，而固定的“根元素”固定在浏览器窗口。

当你滚动页面时，固定元素和浏览器窗口之间的距离是恒定的。

13、position的值，relative和absolute是相对于谁定位的？

absolute：生成绝对定位的元素，相对于第一个祖先元素定位而不是静态定位

fixed：生成绝对定位的元素，相对于浏览器窗口定位。 (IE6不支持)

relative：生成相对定位的元素，相对于它们在正常流中的位置定位

static：默认值。没有定位，元素出现在正常流中

14、CSS3有哪些新特性？

CSS3实现border-radius、box-shadow、text-shadow、gradient、transform

添加了更多的CSS选择器多背景rgba，CSS3中唯一引入的伪元素是::selection，媒体查询，多列布局

15.为什么要初始化CSS样式？

由于浏览器兼容性问题，不同的浏览器对某些标签的默认值不同。 如果不对CSS进行初始化，浏览器之间的页面显示往往会存在差异。

当然，初始化样式会对SEO产生一定的影响前端浏览器兼容性，但不能两者兼有，而是尽量以影响最小的方式进行初始化。

16.详解CSS sprites的原理及优缺点

CSS Sprites其实就是将网页中的一些背景图片整合成一个单一的图片文件。

然后结合CSS“background-image”、“background-repeat”、“background-position”进行背景定位，

background-position 可以使用数字来准确定位背景图片的位置。

优势：

在 CSS 中，两个相邻框（可能是兄弟或祖先）的边距可以合并为一个边距。 这种组合边距的方式称为折叠，因此组合边距称为折叠边距。

折叠结果遵循以下计算规则：

A。 当两个相邻的边距均为正时，折叠结果是它们之间较大的值。

b. 当相邻两个边距均为负值时，折叠结果为两个绝对值中较大的值。

C。 当两个边距为正负时，折叠结果为两个边距之和。

25、rgba()的透明效果和opacity有什么区别？

A。 opacity作用于元素，元素内所有内容的透明度，rgba()只作用于元素的颜色或其背景色。

b. 设置rgba透明度的元素的子元素不会继承透明效果！

26、css属性内容的作用是什么？ 应用是什么？

css的content属性专门应用于before/after伪元素，用于插入生成的内容。

可以使用自定义字体显示特殊符号。