前端布局与响应式设计综合指南(二)

🌈个人主页：前端青山
🔥系列专栏：Css篇
🔖人终将被年少不可得之物困其一生

依旧青山,本期给大家带来Css篇专栏内容:前端布局与响应式设计综合指南(二)

23、行内元素和块级元素？img算什么？行内元素怎么转化为块元素？

24、将多个元素设置为同一行?清除浮动的几种方式？

25、怪异盒模型box-sizing？弹性盒模型|盒布局?

26、简述几个CSS hack?

27、 title和alt的区别？

28、什么是CSS3 transform? animation? 区别是什么？

29、nth-of-type和nth-child的区别是什么？

使用公式 (an + b)。描述：表示周期的长度,n 是计数器（从 0 开始）,b 是偏移值。

odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）

30、:before 和 ::before区别是什么？

31、如何让一个div 上下左右居中?

32、解释下 viewport

33、如何理解HTML结构语义化？

34 CSS3中引入的伪元素有什么？

35、HTML5有哪些新特性，移除了哪些元素？如何处理HTML5新标签兼容问题？如何区分HTML和HTML5？

36、常见浏览器兼容性问题？

37、简述前端优化方式

38、块级元素？行内元素？空元素？

39、media属性？

40、meta标签的name属性值?

23、行内元素和块级元素？img算什么？行内元素怎么转化为块元素？

1.行内元素一个行内元素只占据它对应标签的边框所包含的空间。

2.块级元素块级元素占据其父元素(容器)的整个空间,因此创建了一个“块”。

*img是什么元素？*

应是行内元素，判断一个元素是行内元素，还是块元素，无非就是看它是否是独占一行。img标签显然没有独占一行，固它是行内元素。这没有问题。

*既然img是行内元素，那为什么可以通过CSS设置框高呢？*

尽管img是行内元素，但同时它也是置换元素，置换元素一般内置框高属性，因此可以设置其框高。

那么什么又是“置换元素”呢？

置换元素就是会根据标签属性来显示的元素。反之就是非置换元素了。

比如img根据src属性来显示，input根据value属性来显示，因此可知道img和input是置换元素，当然同理textarea, select,也是置换元素；

行内如何转块级元素

以下汇总三种行内元素转为块级元素的方法：

（1）display

（2）float

（3）position（absolute和fixed）

 1 <!DOCTYPE html>2 <html lang="zh">3 <head>4     <meta charset="UTF-8" />5     <meta http-equiv="X-UA-Compatible" content="ie=edge" />6     <title>行内元素转为块级元素</title>7     <style type="text/css">8         *{9             margin: 0;
10             padding: 0;
11             font-size: 20px;
12             color: red;
13         }
14         div{
15             margin-top: 20px;
16         }
17         a{
18             display:block;
19         }
20         span{
21             float: left;            
22         }
23         i{
24             position:absolute;
25         }
26     </style>
27 </head>
28 <body>
29     <div>
30         方法一：使用display
31     </div>
32     <a href="#">a标签转为块级元素</a>
33     <div>
34         方法一：使用float
35     </div>
36     <span>span标签转为块级元素</span>
37     <div>
38         方法一：使用position（absolute和fixed）
39     </div>
40     <i>i标签转为块级元素</i>
41 </body>
42 </html>

24、将多个元素设置为同一行?清除浮动的几种方式？

1.将多个元素设置为同一行：float，inline-block

清除浮动的方式：

方法一：添加新的元素 、应用 clear：both；

方法二：父级div定义 overflow: hidden；

方法三：利用:after和:before来在元素内部插入两个元素块，从面达到清除浮动的效果。


.clear{zoom:1;}

.clear:after{content:””;clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}

25、怪异盒模型box-sizing？弹性盒模型|盒布局?

在标准模式下的盒模型：盒子总宽度/高度=width/height+padding+border+margin
在怪异模式下的盒模型下，盒子的总宽度和高度是包含内边距padding和边框border宽度在内的，盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;
box-sizing有两个值一个是content-box，另一个是border-box。
当设置为box-sizing:content-box时，将采用标准模式解析计算；
当设置为box-sizing:border-box时，将采用怪异模式解析计算。

26、简述几个CSS hack?

(1) 图片间隙

在div中插入图片，图片会将div下方撑大3px。

hack1：将<div>与<img>写在同一行。

hack2：给<img>添加display：block；

dt li 中的图片间隙。

hack：给<img>添加display：block；

(2) 默认高度，IE6以下版本中，部分块元素，拥有默认高度（低于18px）

hack1：给元素添加：font-size：0；

hack2：声明：overflow：hidden；

表单行高不一致

hack1：给表单添加声明：float：left；height：；border： 0；

鼠标指针

hack：若统一某一元素鼠标指针为手型：cursor：pointer；

当li内的a转化块元素时，给a设置float，IE里面会出现阶梯状

hack1：给a加display：inline-block；

hack2：给li加float：left；

27、 title和alt的区别？

alt属性

Alt属性（注意是“属性”而不是“标签”）包括替换说明，对于图像和图像热点是必须的。它只能用在img、area和input元素中（包括applet元素）。对于input元素，alt属性意在用来替换提交按钮的图片。
使用alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明。这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户，视觉障碍的用户和使用屏幕阅读器的用户。替换文字是用来替代图像而不是提供额外说明文字的。
文字的图像图片设置替换文字是最简单的，图像中包含的文字一般来说就可以作为alt属性值。Alt属性值得长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。

title属性

title属性为设置该属性的元素提供建议性的信息。
title属性可以用在除了base，basefont，head，html，meta，param，script和title之外的所有标签。但是并不是必须的。可能这正是为什么很多人不明白何时使用它。
使用title属性提供非本质的额外信息。大部分的可视化浏览器在鼠标悬浮在特定元素上时显示title文字为提示信息，然而这又由制造商来决定如何渲染title文字。一些浏览器会将title文字显示在状态栏里。
title属性有一个很好的用途，即为链接添加描述性文字，特别是当连接本身并不是十分清楚的表达了链接的目的。这样就使得访问者知道那些链接将会带他们到什么地方，他们就不会加载一个可能完全不感兴趣的页面。另外一个潜在的应用就是为图像提供额外的说明信息，比如日期或者其他非本质的信息。

28、什么是CSS3 transform? animation? 区别是什么？

CSS3属性中关于制作动画的三个属性：Transform,Transition,Animation。
1、transform：描述了元素的静态样式，本身不会呈现动画效果，可以对元素进行 旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。

div{transform:scale(2);
}

transition和animation两者都能实现动画效果
transform常常配合transition和animation使用

2、transition样式过渡，从一种效果逐渐改变为另一种效果
transition是一个合写属性

transition:transition-property transition-duration transition-timing-function transition-delay
从左到右分别是：css属性、过渡效果花费时间、速度曲线、过渡开始的延迟时间

div{width：100px;height:100px;transition:transform 2s;
}
div：hover{transform:rotate(180deg);
}

transition通常和hover等事件配合使用，需要由事件来触发过渡

我们知道 transition 虽然简单好用，但是我们会发现它受到各种限制。

1：transition需要一个事件来触发，比如hover，所以没法在网页加载时自动发生
2: transition是一次性的，不能重复发生，除非一再触发。
3： transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
4：一条transition规则，只能定义一个属性的变化，不能涉及多个属性。
3、animation动画 由@keyframes来描述每一帧的样式

div{animation:myAnimation 5s infinite
}
@keyframes myAnimation {0%{left:0;transform:rotate(0);}100%{left:200px;transform:rotate(180deg);}
}

区别：
-（1）transform仅描述元素的静态样式，常常配合transition和animation使用
-（2）transition通常和hover等事件配合使用，animation是自发的，立即播放
-（3）animation可设置循环次数
-（4）animation可设置每一帧的样式和时间，transition只能设置头尾
-（5）transition可与js配合使用，js设定要变化的样式，transition负责动画效果，如：

animation属性类似于transition，他们都是随着时间改变元素的属性值，

其主要区别在于：transition需要触发一个事件才会随着时间改变其CSS属性；
animation在不需要触发任何事件的情况下，也可以显式的随时间变化来改变元素CSS属性，达到一种动画的效果
1）动画不需要事件触发，过渡需要。
2）过渡只有一组（两个：开始-结束） 关键帧，动画可以设置多个。

29、nth-of-type和nth-child的区别是什么？

:nth-child(n)选择器，该选择器选取父元素的第n 个子元素，不论元素的类型。
:nth-of-type(n)选择器，选择器选取父元素的第 n 个指定类型的子元素。

<h1>这是标题</h1>

<p>第一个段落。</p>

<p>第二个段落。</p>

<p>第三个段落。</p>

<p>第四个段落。</p>

<p>第五个段落。</p>

1, p:nth-child(3n+1) 包含<h1>这是标题</h1> 2, p:nth-of-type(3n+1) 不包含<h1>这是标题</h1>，只选择p元素

使用公式 (an + b)。描述：表示周期的长度,n 是计数器（从 0 开始）,b 是偏移值。

odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）

30、:before 和 ::before区别是什么？

解答要点

相同点

1. 都可以用来表示伪类对象，用来设置对象前的内容
2. :befor和::before写法是等效的

不同点

1. :befor是Css2的写法，::before是Css3的写法
2. :before的兼容性要比::before好，不过在H5开发中建议使用::before比较好

31、如何让一个div 上下左右居中?

【绝对定位50%-本身50%】

position:absolute; left:50%; top:50%;transform: translate(-50%,-50%);.div1{ width:400px; height:400px;border:#CCC 1px solid; background:#99f; position:absolute; left:50%; top:50%;/*绝对定位*/transform: translate(-50%,-50%); 
/*translate(x,y) 括号的百分比数据，会以本身的长宽做参考，比如，本身的长为100px，高为100px. 那填(50%,50%)就是向右，向下移动50px，添加负号就是向着相反的方向移动*/
} <div class="div1"></div>

32、解释下 viewport

大家知道手机的屏幕尺寸的尺寸较小，iphone5的话是320×568，然后iPhone6是375×667，这怎么小的宽度范围内，如果显示PC端的网页，如果没有做处理的话，那可能显示出来的网页会挤成一团，所以手机厂商为浏览器默认设置了一个虚拟的容器，叫布局视图(layout viewport)，这个容器足够宽，且不依赖于手机屏幕的宽度，能够直接把PC上的网页放进来而不变形，iPhone上这个容器大于等于980px，你能在这个网页上双击放大任意区域来显示局部最合适的大小。

这个时候介绍另外的东西，叫做可视视图(visual viewport)，这个是指你屏幕上浏览器显示区域的宽度，也就是它，决定一个屏幕能够显示的最大宽度（手指放大浏览器局部的时候，能够显示的宽度会变小），但是用户的放大缩小并不影响浏览器运行后的最大可视宽度，这个视图需要开发者进行设定，并且会受到网页内最长的可见元素的影响。

随着移动端的崛起，各个网站需要为移动端制作专门的网页，如果还是以手机虚拟容器的宽度为标准进行适配，那就是不合适的，我们需要让这个布局视图能够适应屏幕的大小，用户不用调整网页的大小就能看到一张尺寸合适的完整网页，而且能够保证显示效果的一致性，同样一个14px的文字或图片，在普通屏和高清屏上，我们看到的都是相对一致的大小。我们需要找到一个纽带，连接虚拟世界和真实世界的尺寸，进行适配。而设备自身的宽度是最合适的，确定的这个宽度的视图，被称为理想视图(ideal viewport)。

如果我们将能够显示的最大宽度设置为手机的宽度，并且将布局宽度也设定为手机的宽度，那不需要调整屏幕大小或者拖动页面，就能显示整张网页，而且屏幕的尺寸数值和屏幕的物理宽度组合在一起，就能够为CSS布局提供一把刻度相对一致的尺子，保证了显示效果。

可视视图的设定：

开发者可以用viewport的initial-scale来调整可视视图相对于屏幕真实宽度的大小比例，initial-scale=1时，可视视图的初始化最大宽度就等于屏幕宽度即理想视图的宽度，它会受到内部html节点的宽度影响，调整到最大的节点的长度(但是一般不超过1500px)。同时，如果设定user-scalable=no，那可视视图的宽度就会严格等于初始化时设定的宽度。

布局视图的设定：

布局视图的宽度等于viewport中设定的width以及可视视图的初始宽度中较大的一个，所以如果不写width属性，那布局视图的宽度也会等于屏幕的宽度，但是在可视视图初始化之后，布局视图的宽度只取决于viewport中设定的width，所以为了在旋转屏幕时能够改变布局视图的宽度，不能不写width或者将width设定为固定的数值，而是应该写上width=device-width

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">

33、如何理解HTML结构语义化？

什么是 HTML 语义化？

简单来说，我们可以理解为：用正确的标签做正确的事情。

例如：

段落用 p 标签，标题用 h 系列标签，边栏用 aside 标签，主要内容用 main 标签。

为什么要关注 HTML 语义化？

对人：

便于团队的开发和维护。
在没有加载 CSS 的情况下也能呈现较好的内容结构与代码结构，易于阅读。

对机器：

有利于 SEO ，搜索引擎的爬虫依赖于标签来确定上下文和各个关键字的权重。
方便其他设备的解析（如屏幕阅读器、盲人阅读器等），利于无障碍阅读，提高可访问性。

总结

语义化当然并不仅仅在 HTML 中有用处，写 CSS 的时候，写 JavaScript 代码的时候，都应该采用有语义的类名和变量，并且永远不要在这些地方使用拼音。

34 CSS3中引入的伪元素有什么？

CSS中的伪元素大家以前看过：:first-line,:first-letter,:before,:after;

那么在CSS3中，他对伪元素进行了一定的调整，在以前的基础上增加了一个“：”也就是现在变成了::first-letter,::first-line,::before,::after另外他还增加了一个::selection。

在css3中，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。

::first-line选择元素的第一行，比如说改变每个段落的第一行文本的样式，我们就可以使用这个

p::first-line {font-weight:bold;}

::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常用"content"配合使用，见过最多的就是清除浮动，

            .clearfix:before,.clearfix:after {content: ".";display: block;height: 0;visibility: hidden;}.clearfix:after {clear: both;}.clearfix {zoom: 1;}

对于 IE8 及更早版本中的 :before，必须声明 <!DOCTYPE>。

:before 选择器在被选元素的内容前面插入内容。例如：

<div><h1>welcome</h1>
</div>

div:before{content:"hello world"
}

那么，被选元素是div，div的内容是h1，插入的内容就是content属性值“hello world”

::selection用来改变浏览网页选中文的默认效果

35、HTML5有哪些新特性，移除了哪些元素？如何处理HTML5新标签兼容问题？如何区分HTML和HTML5？

第一 HTML5有哪些新特性，移除了哪些元素

题目点评

题目涉及到范围非常的大，如果要面面俱到显然半天都答不完，可以先罗列出H5的一些新特性，不要回答那么具体，等面试官提具体的问题，所以在面试之前也要把这里的技术过一遍，至少每个技术也要做个小程序出来体验一下。

（一）.H5新特性

增强了图形渲染、影音、数据存储、多任务处理等处理能力主要表现在

*1)* *绘画 canvas;*

类似windows自带的画图板，可绘制线、框、路径、图……，InternetExplorer 9、Firefox、Opera、Chrome 以及 Safari 支持 <canvas> 及其属性和方法。

画图需要的要素

a) 笔，用笔可以画线、圆、矩形、文本等

b) 颜色

c) 画板

*2)* *本地离线存储 localStorage*

长期存储数据，浏览器关闭后数据不丢失;

1.特点

数据永久存储，没有时间限制；大小限制5M(够用了)；只存储字符串。

2.数据存取方式

localStorage.a = 3;//设置a为"3"



localStorage["a"] = "sfsf";//设置a为"sfsf"，覆盖上面的值



localStorage.setItem("b","isaac");//设置b为"isaac"



var a1 = localStorage["a"];//获取a的值



var a2 = localStorage.a;//获取a的值



var b = localStorage.getItem("b");//获取b的值



var b2= localStorage.key(0);//获取第一个key的内容



localStorage.removeItem("c");//清除c的值



localStorage.clear();//清除所有的数据

推荐使用：

getItem()

setItem()

removeItem()

3.事件监听

if(window.addEventListener){



window.addEventListener("storage",handle_storage,false);//



}else if(window.attachEvent){ //兼容IE



window.attachEvent("onstorage",handle_storage);



}



function handle_storage(e){



}

对象e为localStorage对象，Chrome、Firefox支持差，IE支持较好。

3) sessionStorage的数据在浏览器关闭后自动删除;操作参考localStorage

4) 用于媒介回放的 *video**和* *audio* 元素;

5) 语意化更好的内容元素，比如article、footer、header、nav、section;

6) 表单控件，calendar、date、time、email、url、search;

7) 新的技术webworker(专用线程)

8) websocketsocket通信

9) Geolocation 地理定位

**（二）移除的元素****

纯表现的元素

<basefont> 默认字体，不设置字体，以此渲染

<font> 字体标签

水平居中

<u> 下划线

<big> 大字体

<strike> 中横线

<tt> 文本等宽

框架集

<frameset>

<noframes>

<frame>

第二如何处理HTML5新标签兼容问题？

方法一 :

1、使用静态资源的html5shiv包

<!--[if lt IE9]>

<![endif]-->

2、载入后，初始化新标签的css

header, section, footer, aside, nav, main, article, figure { display: block; }

方法二：

IE6/IE7/IE8支持通过document方法产生的标签，利用这一特性让这些浏览器支持HTML5新标签

第三如何区分HTML和HTML5？

区分：

1、在文档bai声明上du，html有很长的一段代码，zhi并且很难记dao住这段代码，都是靠zhuan工具shu直接生成，而html5却是不同，只有简简单单的声明，也方便人们的记忆，更加精简。

2、在结构语义上；html4.0没有体现结构语义化的标签，这样表示网站的头部。html5在语义上却有很大的优势。提供了一些新的html5标签。

基本说明：

1、html5最先由WHATWG(Web 超文本应用技术工作组)命名的一种超文本标记语言，随后和W3C的xhtml2.0(标准)相结合，产生现在最新一代的超文本标记语言；

2、可以简单点理解成为HTML 5 ≈ HTML4.0+CSS3+JS+API。定义的这些标签，更加有利于优化，蜘蛛能识别。节省程序员写代码的时间。最主要还是在SEO的优化上。

36、常见浏览器兼容性问题？

所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。

在学习浏览器兼容性之前，我想把前端开发人员划分为两类：第一类是精确按照设计图开发的前端开发人员，可以说是精确到1px的，他们很容易就会发现设计图的不足，并且在很少的情况下会碰到浏览器的兼容性问题，而这些问题往往都是浏览器的bug，并且他们制作的页面后期易维护，代码重用问题少，可以说是比较牢固放心的代码。第二类是基本按照设计图来开发的前端开发人员，很多细枝末节差距很大，不如间距，行高，图片位置等等经常会差几px。某种效果的实现也是反复调试得到，具体为什么出现这种效果还模模糊糊，整体布局十分脆弱。稍有改动就乱七八糟。代码为什么这么写还不知所以然。这类开发人员往往经常为兼容性问题所困。修改好了这个浏览器又乱了另一个浏览器。改来改去也毫无头绪。其实他们碰到的兼容性问题大部分不应该归咎于浏览器，而是他们的技术本身了。这篇文章主要针对的是第一类，严谨型的开发人员，因此这里主要从浏览器解析差异的角度来分析兼容性问题

浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。碰到频率:100% 解决方案：css里 {margin:0;padding:0;} 备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的css文件开头都会用通配符来设置各个标签的内外补丁是0。

浏览器兼容问题二：块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大问题症状:常见症状是ie6中后面的一块被顶到下一行碰到频率：90%（稍微复杂点的页面都会碰到，float布局最常见的浏览器兼容问题）解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性备注：我们最常用的就是div+css布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div float实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题。

浏览器兼容问题三：设置较小高度标签（一般小于10px），在ie6，ie7，遨游中高度超出自己设置高度问题症状：ie6、7和遨游里这个标签的高度不受控制，超出自己设置的高度碰到频率：60% 解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。备注：这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是ie8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高。

浏览器兼容问题四：行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，ie6间距bug（类似第二种）问题症状：ie6里的间距比超过设置的间距碰到几率：20% 解决方案：在display:block;后面加入display:inline;display:table; 备注：行内属性标签，为了设置宽高，我们需要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的margin后，在ie6下，他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签，所以我们再加上display:inline的话，它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe。

浏览器兼容问题五：图片默认有间距问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。碰到几率：20% 解决方案：使用float属性为img布局备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。

浏览器兼容问题六：标签最低高度设置min-height不兼容问题症状：因为min-height本身就是一个不兼容的css属性，所以设置min-height时不能很好的被各个浏览器兼容碰到几率：5% 解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;} 备注：在B/S系统前端开时，有很多情况下我们又这种需求。当内容小于一个值（如300px）时。容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题。

浏览器兼容问题七：透明度的兼容css设置方法是：每写一小段代码（布局中的一行或者一块）我们都要在不同的浏览器中看是否兼容，当然熟练到一定的程度就没这么麻烦了。建议经常会碰到兼容性问题的新手使用。很多兼容性问题都是因为浏览器对标签的默认属性解析不同造成的，只要我们稍加设置都能轻松地解决这些兼容问题。如果我们熟悉标签的默认属性的话，就能很好的理解为什么会出现兼容问题以及怎么去解决这些兼容问题。 /* css hack*/ 我很少使用hacker的，可能是个人习惯吧，我不喜欢写的代码ie不兼容，然后用hack来解决。不过hacker还是非常好用的。使用hacker 我可以吧浏览器分为3类：ie6 ；ie7和遨游；其他（ie8 chrome ff safari opera等） ie6认识的hacker 是下划线_ 和星号 * ie7 遨游认识的hacker是星号 * （包括上面问题6中的 !important也算是hack的一种。不过实用性较小。）比如这样一个css设置 height:300px;height:200px;_height:100px; ie6浏览器在读到 height:300px的时候会认为高时300px；继续往下读，他也认识heihgt，所以当ie6读到height:200px的时候会覆盖掉前一条的相冲突设置，认为高度是200px。继续往下读，ie6还认识_height,所以他又会覆盖掉200px高的设置，把高度设置为100px； ie7和遨游也是一样的从高度300px的设置往下读。当它们读到height200px的时候就停下了，因为它们不认识_height。所以它们会把高度解析为200px；剩下的浏览器只认识第一个height:300px;所以他们会把高度解析为300px。因为优先级相同且想冲突的属性设置后一个会覆盖掉前一个，所以书写的次序是很重要的。最后说一下，严谨型的开发人员会有一套合适自己的RESET.CSS。结合自己的经验尽量规避容易出现不兼容的问题。以减少hack的使用，尽量符合W3C的标准。

37、简述前端优化方式

前端性能优化是个巨大的课题，如果要面面俱到的说的话，估计三天三夜说不完。所以我们就从实际的工程应用角度出发，聊我们最常遇见的前端优化问题。

1. 减少HTTP请求次数

尽量合并图片、CSS、JS。比如加载一个页面，如果有5个css文件的话，那么会发出5次http请求，这样会让用户第一次访问你的页面的时候会长时间等待。而如果把这个5个文件合成一个的话，就只需要发出一次http请求，节省网络请求时间，加快页面的加载。

2. 使用CDN

网站上静态资源即css、js全都使用cdn分发，图片亦然。

3. 避免空的src和href

当link标签的href属性为空、script标签的src属性为空的时候，浏览器渲染的时候会把当前页面的URL作为它们的属性值，从而把页面的内容加载进来作为它们的值。所以要避免犯这样的疏忽。

4. 为文件头指定Expires

Exipres是用来设置文件的过期时间的，一般对css、js、图片资源有效。他可以使内容具有缓存性，这样下回再访问同样的资源时就通过浏览器缓存区读取，不需要再发出http请求。如下例子：

新浪微博的这个css文件的Expires时间是2016-5-04 09:14:14.

5. 使用gzip压缩内容

gzip能够压缩任何一个文本类型的响应，包括html，xml，json。大大缩小请求返回的数据量。

6. 把CSS放到顶部

网页上的资源加载时从上网下顺序加载的，所以css放在页面的顶部能够优先渲染页面，让用户感觉页面加载很快。

7. 把JS放到底部

加载js时会对后续的资源造成阻塞，必须得等js加载完才去加载后续的文件，所以就把js放在页面底部最后加载。欢迎加入前端直播学习群一起学习交流：512676244

8. 避免使用CSS表达式

举个css表达式的例子

HTML复制全屏

1 font-color: expression( (new Date()).getHours()%3 ? “#FFFFFF" : “#AAAAAA" ); 2 这个表达式会持续的在页面上计算样式，影响页面的性能。并且css表达式只被IE支持。

9. 将CSS和JS放到外部文件中

目的是缓存文件，可以参考原则4。但有时候为了减少请求，也会直接写到页面里，需根据PV和IP的比例权衡。

10. 权衡DNS查找次数

减少主机名可以节省响应时间。但同时，需要注意，减少主机会减少页面中并行下载的数量。

IE浏览器在同一时刻只能从同一域名下载两个文件。当在一个页面显示多张图片时，IE 用户的图片下载速度就会受到影响。所以新浪会搞N个二级域名来放图片。

下面是新浪微博的图片域名，我们可以看到他有多个域名，这样可以保证这些不同域名能够同时去下载图片，而不用排队。不过如果当使用的域名过多时，响应时间就会慢，因为不用响应域名时间不一致。

11. 精简CSS和JS

这里就涉及到css和js的压缩了。比如下面的新浪的一个css文件，把空格回车全部去掉，减少文件的大小。现在的压缩工具有很多，基本主流的前端构建工具都能进行css和js文件的压缩，如grunt，glup等。

12. 避免跳转

有种现象会比较坑爹，看起来没什么差别，其实多次了一次页面跳转。比如当URL本该有斜杠（/）却被忽略掉时。例如，当我们要访问 http://baidu.com 时，实际上返回的是一个包含301代码的跳转，它指向的是 http://baidu.com/（注意末尾的斜杠）。在nginx服务器可以使用rewrite；Apache服务器中可以使用Alias 或者 mod_rewrite或者the DirectorySlash来避免。

另一种是不用域名之间的跳转，比如访问 http://baidu.com/bbs 跳转到http://bbs.baidu.com/。那么可以通过使用Alias或者mod_rewirte建立CNAME（保存一个域名和另外一个域名之间关系的DNS记录）来替代。

13. 删除重复的JS和CSS

重复调用脚本，除了增加额外的HTTP请求外，多次运算也会浪费时间。在IE和Firefox中不管脚本是否可缓存，它们都存在重复运算JavaScript的问题。

14. 配置ETags

它用来判断浏览器缓存里的元素是否和原来服务器上的一致。比last-modified date更具有弹性，例如某个文件在1秒内修改了10次，Etag可以综合Inode(文件的索引节点(inode)数)，MTime(修改时间)和Size来精准的进行判断，避开UNIX记录MTime只能精确到秒的问题。服务器集群使用，可取后两个参数。使用ETags减少Web应用带宽和负载欢迎加入前端全栈开发交流圈一起学习交流：512676244

15. 可缓存的AJAX

异步请求同样的造成用户等待，所以使用ajax请求时，要主动告诉浏览器如果该请求有缓存就去请求缓存内容。如下代码片段, cache:true就是显式的要求如果当前请求有缓存的话，直接使用缓存

HTML复制全屏

1 $.ajax( 2 { 3 url : 'url', 4 dataType : "json", 5 cache: true, 6 success : function(son, status){ 7 } 8

16. 使用GET来完成AJAX请求

当使用XMLHttpRequest时，浏览器中的POST方法是一个“两步走”的过程：首先发送文件头，然后才发送数据。因此使用GET获取数据时更加有意义。

17. 减少DOM元素数量

这是一门大学问，这里可以引申出一堆优化的细节。想要具体研究的可以看后面推荐书籍。总之大原则减少DOM数量，就会减少浏览器的解析负担。

18. 避免404

比如外链的css、js文件出现问题返回404时，会破坏浏览器的并行加载。

19. 减少Cookie的大小

Cookie里面别塞那么多东西，因为每个请求都得带着他跑。

20. 使用无cookie的域

比如CSS、js、图片等，客户端请求静态文件的时候，减少了 Cookie 的反复传输对主域名的影响。

21. 不要使用滤镜

IE独有属性AlphaImageLoader用于修正7.0以下版本中显示PNG图片的半透明效果。这个滤镜的问题在于浏览器加载图片时它会终止内容的呈现并且冻结浏览器。在每一个元素（不仅仅是图片）它都会运算一次，增加了内存开支，因此它的问题是多方面的。

完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式来代替，这种格式能在IE中很好地工作。如果你确实需要使用AlphaImageLoader，请使用下划线_filter又使之对IE7以上版本的用户无效。

22. 不要在HTML中缩放图片

比如你需要的图片尺寸是50* 50

那就不用用一张500*500的大尺寸图片，影响加载

23. 缩小favicon.ico并缓存

以上是Yslow的23个优化原则，基本可以涵盖现在前端大部分的性能优化原则了，很多更加geek和精细优化方法都是从这些原则里面延伸出来的。具体想了解更多优化细则的童鞋建议去看看下面的一本书，毕竟页数多讲的也细嘛：

38、块级元素？行内元素？空元素？

块元素(block element)一般是其他元素的容器元素，能容纳其他块元素或内联元素。块元素就好比一个四方块，可以放其他的四方块，并可以呈现在页面上任何地方。

默认情况下块元素，是独占一行的
常见的块元素：div、p、h1-h6、form（只能用来容纳其他块元素）、hr、table、ul、ol等
高度，行高以及外边距和内边距都可控制
宽度缺省是它的容器的100%，除非设定一个宽度
它可以容纳内联元素和其他块元素

行内元素(inline element)也叫内嵌元素或内联元素，一般都是基于语义级(semantic)的基本元素。行内元素只能容纳文本或者其他行内元素，常见行内元素有a、span、img。CSS权威指南》中文字显示：任何不是块级元素的可见元素都是行内元素。其表现的特性是“行布局”形式，这里的“行布局”的意思就是说其表现形式始终以行进行显示。比如，我们设定一个内联元素border-bottom:1px solid #000;时其表现是以每行进行重复，每一行下方都会有一条黑色的细线。如果是块级元素那么所显示的的黑线只会在块的下方出现。

和其他元素都在一行上
高，行高及外边距和内边距不可改变
宽度就是它的文字或图片的宽度，不可改变
行内元素只能容纳文本或者其他行内元素

块元素和行内元素的区别

块元素，总是在新行上开始；行内元素，和其他元素都在一行上
块元素，能容纳其他块元素或行内元素；而内联元素，只能容纳文本或者其他行内元素
块元素中高度，行高以及顶和底边距都可控制；内联元素中高，行高及顶和底边距不可改变
说白了，行内元素就好像一个单词；块级元素就好像一个段落，如果不另加定义的话，它将独立一行出现

文档流

将窗体自上而下分成一行行，并在每行中按从左至右的顺序排放元素，即为文档流
每个非浮动块级元素都独占一行，浮动元素则按规定浮在行的一端。若当前行容不下，则另起新行再浮动
内联元素也不会独占一行。几乎所有元素(包括块级，内联和列表元素）均可生成子行，用于摆放子元素
有三种情况将使得元素脱离文档流而存在，分别是浮动，绝对定位，固定定位。但是在IE中浮动元素也存在于文档流中
浮动元素不占任何正常文档流空间，而浮动元素的定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后，仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。
基于文档流，我们可以很容易理解以下的定位模式：相对定位（relative），即相对于元素在文档流中位置进行偏移，但保留原占位。绝对定位（absolute），即完全脱离文档流，相对于position属性非static值的最近父级元素进行偏移。固定定位（fixed），即完全脱离文档流，相对于视区进行偏移。

空元素

空元素的意思bai是：在HTML元素中，没有内容的 HTML 元素被称为空元素。基本概述： 1，在用来描述网页的计算机语言中，有一种超文本标记语言，被称为HTML(Hyper Text Markup Language) 。而构成HTML内容的标记语言是由一套标记标签组成。这套标记标签通常被称为 HTML 标签 (HTML tag)。, 2，HTML 标签是由尖括号包围的关键词，比如 <html> ，通常是成对出现的，比如和。 3，这些成对出现的HTML 标签，第一个标签是开始标签，第二个标签是结束标签。大多数HTML 标签在开始标签和结束标签之间都具有内容，而某些标签则没有内容。, 4，HTML中，从开始标签(start tag)到结束标签(end tag)的所有代码，被称为HTML元素。 5，由于HTML元素的内容是开始标签与结束标签之间的内容。而某些 HTML 元素具有空内容。(empty content)，那些含有空内容的HTML元素，就是空元素。空元素是在开始标签中关闭的。举例说明： 1，就是没有关闭标签的空元素( 标签定义换行)。, 2，在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。 3，在开始标签中添加斜杠，比如，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。

39、media属性？

媒体类型

all -- 所有设备。如没有only和not限定可以省略，省略不写时默认为all print -- 打印机 screen -- 计算机屏幕等等

and & not & only & 逗号操作符

and -- 所有媒体属性表达式为真时，媒体查询结果才为真。

not -- 对媒体结果求值取反。如果有逗号操作符，其作用范围至逗号处为止

@media not all and (min-width:800px){...}
等价于
@media not (all and (min-width:800px)){...}
而不是
@media (not all) and (min-width:800px){...}
@media not screen and (color), print and (color)
等价于
@media (not (screen and (color))), print and (color)

不支持媒体查询的浏览器会解析成media=screen，媒体属性不会求值。从而错误地应用样式。

, -- 逗号相当于or（或者）

常用媒体属性

width : 可视宽度 height : 可视高度 device-width: 设备宽度 device-height: 设备高度 orientation: 方向 aspect-ratio: 宽高比 color: 颜色 device-aspect-ratio：设备宽高比

详细信息参考MDN文档：css媒体查询

40、meta标签的name属性值?

就是头文件里的meta标签及其属性等等。（之前只知道utf-8还有Author）

于是去网上查找了相关资料，在这里简单描述一下：

name是描述网页的，对应于Content（网页内容）。ame的value值（name=""）指定所提供信息的类型。有些值是已经定义好的。例如description(说明)、keyword(关键字)、refresh(刷新)等。还可以指定其他任意值，如：creationdate(创建日期) 、document ID(文档编号)和level(等级)等。

name的content指定实际内容。如：如果指定level(等级)为value，则Content可能是beginner(初)、intermediate(中)、advanced(高)。

1.Keywords(关键字)*

说明：为搜索引擎提供关键字列表（content里的关键字记得要用逗号隔开）

eg:<meta name="Keywords" content="关键词1,关键词2,关键词3,关键词4,……">

2.Copyright (版权)

说明：标注声明相关版权

eg:<meta name="xxx" content="版权归xxx.xxx所有">

3.Robots (机器人向导)

说明：Robots用来告诉搜索机器人页面需要或者不需要索引。Content的參数有all、none、index、noindex、follow、nofollow，默认是all。

all：文件将被检索，且页面上的链接能够被查询。

none：文件将不被检索。且页面上的链接不能够被查询。(和 "noindex, no follow" 起同样作用)

index：文件将被检索；（让robot/spider登录）

follow：页面上的链接能够被查询；

noindex：文件将不被检索，但页面上的链接能够被查询；(不让robot/spider登录)

nofollow：文件将不被检索，页面上的链接能够被查询。(不让robot/spider顺着此页的连接往下探找)

4.Renderer（指定默认渲染内核）

说明：指定双核浏览器默认以哪种方式渲染页面

eg:<meta name="renderer" content="webkit"> //强制指定webkit内核

5.Viewport（视窗/移动端）

说明：是用户网页的可视区域，即“视区”。

eg:<meta name="viewport" content="width=device-width, initial-scale=1.0">

width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。

height：和 width 相对应，指定高度。

initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。

maximum-scale：允许用户缩放到的最大比例。

minimum-scale：允许用户缩放到的最小比例。

user-scalable：用户是否可以手动缩放。

eg：

a. 设置屏幕宽度为设备宽度，禁止用户手动调整缩放

b. 设置屏幕密度为高频，中频，低频自己主动缩放，禁止用户手动调整缩放)<meta name="viewport" content="width=device-width, target-densitydpi=high-dpi, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>