面试题搬运工

1、什么是渐进增强优雅降级

渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后在针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

2、从浏览器地址栏输入url到显示页面的步骤

· 浏览器根据请求的 URL 交给 DNS 进行域名解析，找到真实 IP 地址，向服务器发起请求；

· 服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、CSS、JS、images等）；

· 浏览器对加载到的资源（HTML、CSS、JS、images等）进行语法解析，建立相应的内部数据结构（如HTML的DOM）；

· 载入解析到的资源文件，渲染页面，完成。

3、CSS特性：继承性，层叠，优先级

1、继承性：子标签会继承父标签的某些样式，如文本颜色和字号。(text- font- color)

2、层叠性：样式冲突，遵循的原则是就近原则。

3、优先级：定义CSS样式时，经常出现两个或更多规则应用在同一元素上，此时，谁的权重高显示谁的样式。

（选择器相同，则执行层叠性；选择器不同，就会出现优先级的问题。）

     !Important > 行内式 > id > 类/伪类/属性 > 标签选择器  >  全局
    （对应权重：无穷大∞>1000>100>10>1>0）

4、定位有哪几种？分别举例？Z-index熟悉在使用的时候注意什么 ？

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

relative (相对定位):生成相对定位的元素,相对于其正常（原先本身）位置进行定位

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

fixed（固定定位）:生成绝对定位的元素，相对于浏览器窗口进行定位

sticky 粘性定位 当前元素设置了粘性定位，滚动到顶部就会吸附顶部，往下滑还回到原来位置。

 z-index规则

1、值可以是正整数、负整数或0，数值越大，盒子越靠上；

2、如果属性值相同，则按照书写顺序，后来居上；

3、数字后面不能加单位。

4、z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效

5、页面导入时，使用link和@import有什么区别

页面中使用CSS的方式主要有3种：行内添加定义style属性值，页面头部内嵌调用和外面链接调用，其中外面引用有两种：Link引入和@import导入，两者都是外部引用CSS的方式，但是存在一定的区别：

1. 从属关系: link是标签，@import是css提供的.

2. 加载差异: link： 结构和样式同时加载；而@import 先加载结构，后加载样式

3. 兼容性:link没有兼容问题，@import不兼容ie5以下的浏览器.

4.可操作性: link可以通过js操作dom插入link标签改变样式，而@import不能

6、简述src和href的区别 

src用于替换当前元素 ​

href用于在当前文档和引用资源之间确立联系.

扩展： ​ src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置 ​ href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接

 7、上下margin重合的问题

  1、相邻块元素垂直外边距的合并

解决方案：尽量给只给一个盒子添加margin值

  2、嵌套块元素垂直外边距的合并（塌陷） 

解决方案：

可以为父元素定义上边框。

可以为父元素定义上内边距

可以为父元素添加overflow:hidden。

8、浏览器常见的兼容性问题 

1、不同浏览器margin和padding不同

2、ie6中，父级元素浮动以后，内部元素内容撑不开宽度

3、标签嵌套不规范，如p和h1-h6里面嵌套div

4、ie6小于19px，会当成19px处理，也就元素宽高小于19px的bug

5、图片3像素问题

6、IE8下给图片添加超链接时，图片会有蓝色边框

7、鼠标滑过时，不显示小手

9、Html5新增的语义化标签

头部标签：<header></header>

导航标签：<nav></nav>

内容区块表签：<section></section>

页脚标签：<footer></footer>

侧边栏：<aside></aside>

页面内独立的内容区域：<article></article>

先到这。。还是要慢慢敲，顺便巩固一下