div+css布局的问题

1、常用那几种浏览器测试？有哪些内核(Layout Engine)?

　　答：

        (1) 浏览器：IE，Chrome，FireFox，Safari，Opera。

　　   (2) 内核：Trident，Gecko，Presto，Webkit。

 

 

2、 说下行内元素和块级元素的区别？行内块元素的兼容性使用？（IE8 以下）

答：

　　(1) 行内元素：会在水平方向排列，不能包含块级元素，设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。

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

　　(2) 兼容性：display:inline-block;*display:inline;*zoom:1;

　　

3、 谈谈浮动和清除浮动，清除浮动有哪些方式？比较好的方式是哪一种？

 

浮动的框可以向左或向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流的块框表现得就像浮动框不存在一样。浮动的块框会漂浮在文档普通流的块框上。

　 答：

        (一)

　　       （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。

　　 (二) 比较好的是第3种方式，好多网站都这么用。

　　

4、box-sizing常用的属性有哪些？分别有什么作用？

答：

　　(1)box-sizing: content-box|border-box|inherit;

　　(2)content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。

border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

 

5、Doctype作用？标准模式与兼容模式各有什么区别?

　　答：

(1) 告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

(2) 标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

 

6、HTML5 为什么只需要写 ？

答：

　　HTML5不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）。

而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

 

 

7、 页面导入样式时，使用link和@import有什么区别？

　　答：

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

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

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

　引入方式3种：行内添加定义style属性值，页面头部内内嵌调用和外链调用，

区别：

1.link是xhtml标签，除了加载css外，还可以定义RSS等其他事务，@import只能加载CSS

2.link引用CSS时候，页面载入的时候同时加载，@import需要页面网页完全载入后加载

3.link是XHTML标签，没有兼容问题，@import是在CSS2.1提出的，低版本的浏览器不支持。

4.link支持使用javascript控制DOM去改变样式，但是@import不支持。

 

8、介绍一下你对浏览器内核的理解？

　　答：

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

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

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

　　最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

　　

9、html5有哪些新特性？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？　　

答：

    (一)

　　HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。

　　(1)绘画 canvas;

　　(2)用于媒介回放的 video 和 audio 元素;

　　(3)本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;

　　(4)sessionStorage 的数据在浏览器关闭后自动删除;

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

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

(7)新的技术webworker, websocket, Geolocation;

 

 

　(二)

　　IE8/IE7/IE6支持通过document.createElement方法产生的标签，

　　可以利用这一特性让这些浏览器支持HTML5新标签，

　　浏览器支持新标签后，还需要添加标签默认的样式。

当然也可以直接使用成熟的框架、比如html5shim，

 

支持HTML5新标签：

 

    IE8/IE7/IE6支持通过document.createElement方法产生的标签，

 

    可以利用这一特性让这些浏览器支持HTML5新标签，

 

    当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

 

       

 

    如何区分： DOCTYPE声明\新增的结构元素\功能元素

 

　　

10、简述一下你对HTML语义化的理解？　　

答：

用正确的标签做正确的事情。

　　html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;

　　即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;

　　搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;

　　使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

 

 

11、position的值， relative和absolute分别是相对于谁进行定位的？

absolute :生成绝对定位的元素， 相对于最近一级的 定位不是 static 的父元素来进行定位。

fixed （老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口或 frame 进行定位。

relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。

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

sticky 生成粘性定位的元素，容器的位置根据正常文档流计算得出

 

 

12、 什么叫优雅降级和渐进增强？

答：

　　优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效。

　　渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。

 

13、display:none和visibility:hidden的区别？

display:none  隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就不存在。

visibility:hidden  隐藏对应的元素，但是在文档布局中仍保留原来的空间。

CSS中link 和@import的区别是？

(1) link属于HTML标签，而@import是CSS提供的;

(2) 页面被加载的时，link会同时被加载，而@import被引用的CSS会等到引用它的CSS文件被加载完再加载;

(3) import只在IE5以上才能识别，而link是HTML标签，无兼容问题;

(4) link方式的样式的权重 高于@import的权重.

 

 

14、position:absolute和float属性的异同

共同点：对内联元素设置float和absolute属性，可以让元素脱离文档流，并且可以设置其宽高。

不同点：float仍会占据位置，absolute会覆盖文档流中的其他元素。

 

15、介绍一下box-sizing属性？

box-sizing属性主要用来控制元素的盒模型的解析模式。默认值是content-box。

content-box：让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的宽度/高度决定，设置width/height属性指的是content部分的宽/高

border-box：让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置width/height属性指的是border + padding + content

标准浏览器下，按照W3C规范对盒模型解析，一旦修改了元素的边框或内距，就会影响元素的盒子尺寸，就不得不重新计算元素的盒子尺寸，从而影响整个页面的布局。

 

 

16、CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？

    1.id选择器（ # myid）

 

    2.类选择器（.myclassname）

 

    3.标签选择器（div, h1, p）

 

    4.相邻选择器（h1 + p）

 

    5.子选择器（ul > li）

 

    6.后代选择器（li a）

 

    7.通配符选择器（ * ）

 

    8.属性选择器（a[rel = "external"]）

 

    9.伪类选择器（a: hover, li:nth-child）

 

 

17、CSS3有哪些新特性？

CSS3实现圆角（border-radius），阴影（box-shadow），

对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）

transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜

增加了更多的CSS选择器  多背景 rgba

在CSS3中唯一引入的伪元素是::selection.

媒体查询，多栏布局

border-image

CSS3中新增了一种盒模型计算方式：box-sizing。盒模型默认的值是content-box, 新增的值是padding-box和border-box，几种盒模型计算元素宽高的区别如下：

content-box（默认）

布局所占宽度Width：

Width = width + padding-left + padding-right + border-left + border-right

布局所占高度Height:

Height = height + padding-top + padding-bottom + border-top + border-bottom

padding-box

布局所占宽度Width：

Width = width(包含padding-left + padding-right) + border-top + border-bottom

布局所占高度Height:

Height = height(包含padding-top + padding-bottom) + border-top + border-bottom

 

border-box

布局所占宽度Width：

Width = width(包含padding-left + padding-right + border-left + border-right)

 

布局所占高度Height:

Height = height(包含padding-top + padding-bottom + border-top + border-bottom)

 

 

18、对BFC规范的理解？

      BFC，块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个BFC中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的margin会发生折叠。

 

（W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行布局，以及与其他元素的关系和相互作用。

 

19、说说你对语义化的理解？

（1）去掉或者丢失样式的时候能够让页面呈现出清晰的结构

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

（3）方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；

（4）便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

 

 

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

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

（2）严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。

（3）在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。

（4）DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

 

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

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

 

 HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。

 

 XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。

 

Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks

 

 （包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。

 

 

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

区别：

 

（1）所有的标记都必须要有一个相应的结束标记

 

（2）所有标签的元素和属性的名字都必须使用小写

 

（3）所有的XML标记都必须合理嵌套

 

（4）所有的属性必须用引号""括起来

 

（5）把所有<和&特殊符号用编码表示

 

（6）给所有属性赋一个值

 

（7）不要在注释内容中使“--”

 

（8）图片必须有说明文字

 

 

23、常见兼容性问题？

png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.也可以引用一段脚本处理.

 

浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。

 

IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。

 

浮动ie产生的双倍距离（IE6双边距问题：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。）

 

#box{ float:left; width:10px; margin:0 0 0 100px;}

 

这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入

_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)

 

渐进识别的方式，从总体中逐渐排除局部。

 

 

  首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。

 

  接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。

 

  css

 

      .bb{

 

       /*所有识别*/

 

      . /*IE6、7、8识别*/

 

      +/*IE6、7识别*/

 

      _/*IE6识别*/

 

      }

 

 

怪异模式问题：漏写DTD声明，Firefox仍然会按照标准模式来解析网页，但在IE中会触发

怪异模式。为避免怪异模式给我们带来不必要的麻烦，最好养成书写DTD声明的好习惯。现在

可以使用[html5](http://www.w3.org/TR/html5/single-page.html)推荐的写法：``

上下margin重合问题

ie和ff都存在，相邻的两个div的margin-left和margin-right不会重合，但是margin-top和margin-bottom却会发生重合。

 

解决方法，养成良好的代码编写习惯，同时采用margin-top或者同时采用margin-bottom。

 

 

24、ie各版本和chrome可以并行下载多少个资源
IE6 两个并发，iE7升级之后的6个并发，之后版本也是6个
Firefox，chrome也是6个

 

 

25、谈谈你对重构的理解

网站重构：在不改变外部行为的前提下，简化结构、添加可读性，而在网站前端保持一致的行为。也就是说是在不改变UI的情况下，对网站进行优化， 
在扩展的同时保持一致的UI。

对于传统的网站来说重构通常是：

表格(table)布局改为DIV+CSS

使网站前端兼容于现代浏览器(针对于不合规范的CSS、如对IE6有效的)

对于移动平台的优化

针对于SEO进行优化

深层次的网站重构应该考虑的方面

减少代码间的耦合

让代码保持弹性

严格按规范编写代码

设计可扩展的API

代替旧有的框架、语言(如VB)

增强用户体验

通常来说对于速度的优化也包含在重构中

压缩JS、CSS、image等前端资源(通常是由服务器来解决)

程序的性能优化(如数据读写)

采用CDN来加速资源加载

对于JS DOM的优化

 

26、什么样的前端代码是好的

高复用低耦合，这样文件小，好维护，而且好扩展。

27、对web标准以及w3c的理解和认识

答:标签闭合，标签小写，不乱嵌套，提高搜索机器人搜索几率。使用外链css和js脚本，结构行为表现分离，内容能被更多广泛的设备所访问,更少的代码和组件，容易维护，改版方便，不需要变动页面内容。

28、.Html和xhtml有什么区别?

html是一种基本的web网页设计语言，xhtml是一个基于XML的置标语言。

最主要的不同:

XHTML元素必须正确的被嵌套，元素必须关闭，标签必须小写，必须有根元素。

29、.严格模式和混杂模式的区分，以及如何触发这2种模式?

严格模式就是浏览器根据web标准去解析页面，是一种要求严格的DTD，不允许使用任何表现层的语法，如

混杂模式是一种向后兼容的解析方法。

触发标准模式或者说严格模式很简单，就是Html前申明正确的DTD，出发混杂模式可以在html文档开始不声明DTD，或者在DOCTYPE前加入XML声明

30、.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

行内元素：a、b、span、img、input、strong、select、label、em、button、textarea

块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote

空元素:br、meta、hr、link、input、img

 

31、CSS选择符有哪些?优先级算法如何计算?内联和Important哪个优先级高

回答：CSS选择符有类选择符，属性选择符，ID选择符，优先级算法是基于特殊性值进行计算的。分别如下：ID属性 0.1.0.0

类属性选择器，属性选择器，伪类 0.0.1.0 元素选择符，伪元素选择符 0.0.0.1

通配选择器对特殊性没有任何贡献值。

important优先级高

32.前端页面有哪三层构成，分别是什么，作用是什么?

结构层：html 表示层:css 行为层：js

33、GET和POST的区别，何时使用POST？

    GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符

    POST：一般用于修改服务器上的资源，对所发送的信息没有限制。

    GET方式需要使用Request.QueryString来取得变量的值，而POST方式通过Request.Form来获取变量的值，

    也就是说Get是通过地址栏来传值，而Post是通过提交表单来传值。

然而，在以下情况中，请使用 POST 请求：

无法使用缓存文件（更新服务器上的文件或数据库）

向服务器发送大量数据（POST 没有数据量限制）

发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

 

34、HTML5的离线储存怎么使用，工作原理能不能解释一下？

在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。
原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

如何使用：
（1）页面头部像下面一样加入一个manifest的属性；
（2）在cache.manifest文件的编写离线存储的资源；
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
（3）在离线状态时，操作window.applicationCache进行需求实现。

 

35、浏览器是怎么对HTML5的离线储存资源进行管理和加载的

在线的情况下，浏览器发现Html头部有manifest属性，它会请求manifest文件，如果是第一次访问APP，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过APP并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。 离线的情况下，浏览器就直接使用离线存储的资源。

 

36、xhtml和html有什么区别
    HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言
    最主要的不同：①XHTML 元素必须被正确地嵌套；②XHTML元素必须被关闭；③标签名必须用小写字母；④XHTML 文档必须拥有根元素。

 

 

37、css的基本语句构成是?
    选择器{属性1:值1;属性2:值2;……}

 

38、写出几种IE6 BUG的解决方法
①双边距BUG float引起的 使用display
②3像素问题 使用float引起的 使用dislpay:inline -3px
③超链接hover 点击后失效 使用正确的书写顺序 link visited hover active
④Ie z-index问题 给父级添加position:relative
⑤Png 透明 使用js代码 改
⑥Min-height 最小高度 ！Important 解决’
⑦select 在ie6下遮盖 使用iframe嵌套
⑧为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）

39、标签上title与alt属性的区别是什么?
    Alt当图片不显示时用文字代表。Title为该属性提供信息。

40、描述css reset的作用和用途。
    Reset重置浏览器的CSS默认属性浏览器的品种不同，样式不同，然后重置，让他们统一。

41、解释css sprites，如何使用。
    CSS精灵把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量。

42、浏览器标准模式和怪异模式之间的区别是什么?
    盒子模型，渲染模式的不同；

使用 window.top.document.compatMode 可显示为什么模式。

43、你如何对网站的文件和资源进行优化?期待的解决方案包括：
    文件合并、文件最小化/文件压缩、使用CDN托管，缓存的使用。

44、什么是语义化的HTML?
    直观的认识标签，对于搜索引擎的抓取有好处。

 

46、iframe有那些缺点？

（1）页面样式调试麻烦，出现多个滚动条；
（2）浏览器的后退按钮失效；
（3）过多会增加服务器的HTTP请求；
（4）小型的移动设备无法完全显示框架；
（5）产生多个页面，不易管理；
（6）不容易打印；
（7）代码复杂，无法被一些搜索引擎解读。

 

 

47、HTML5的form如何关闭自动完成功能

HTML的输入框可以拥有自动完成的功能，当你往输入框输入内容的时候，浏览器会从你以前的同名输入框的历史记录中查找出类似的内容并列在输入框下面，这样就不用全部输入进去了，直接选择列表中的项目就可以了。
但有时候我们希望关闭输入框的自动完成功能，例如当用户输入内容的时候，我们希望使用AJAX技术从数据库搜索并列举而不是在用户的历史记录中搜索。
关闭输入框的自动完成功能有3种方法：
（1）在IE的Internet选项菜单里的内容--自动完成里面设置
（2）设置Form的autocomplete为"on"或者"off"来开启或者关闭自动完成功能
（3）设置输入框的autocomplete为"on"或者"off"来开启或者关闭该输入框的自动完成功能
测试代码：（在每个form输入文字然后提交，然后再回来看看能否自动完成，注意要提交后才能有历史记录，才可能自动完成；提交后页面可能出错，不用管它，后退回去即可）

xml 代码

打开自动完成功能的Form

打开自动完成功能的输入框

关闭自动完成功能的输入框

关闭自动完成功能的Form

打开自动完成功能的输入框

关闭自动完成功能的输入框

 

48、如何在页面上实现一个圆形的可点击区域？

使用Dreamweaver制作热点

49、实现不使用 border 画出1px高的线，在不同浏览器的Quirksmode和CSSCompat模式下都能保持同一效果。

 

50、tite与h1的区别、b与strong的区别、i与em的区别？

（1）b和strong的区别

盲人朋友使用阅读设备阅读网络时：会重读，不会

两者虽然在网页中显示效果一样，但实际目的不同。
这个标签对应 bold，即文本加粗，其目的仅仅是为了加粗显示文本，是一种样式／风格需求；
这个标签意思是加强字符的语气，表示该文本比较重要，提醒读者／终端注意。为了达到这个目的，浏览器等终端将其加粗显示；
总结：为了加粗而加粗，为了标明重点而加粗，也可以用其它方式来强调，比如下划线，比如字体加大，比如红色，等等，可以通过css来改变strong的具体表现。

（2）i和em的区别

同样，I是Italic(斜体)，而em是emphasize(强调)。

（3）title与h1的联系：

从网站角度看，title更重于网站信息。title可以直接告诉搜索引擎和用户这个网站是关于什么主题和内容的。

从文章角度看，h1则是用于概括文章主题。用户进入内容页，想看到的当然就是文章的内容，h1文章标题就是最重要的。文章标题最好只有一个，多个h1会导致搜索引擎不知道这个页面哪个标题内容最重要，导致淡化这个页面的标题和关键词，起不到突出主题的效果。

区别：

h1突出文章主题，面对用户，更突出其视觉效果，突出网站标题或关键字用title。一篇文章，一个页面最好只用一个h1，多个h1会稀释主题。一个网站可以有多个title,最好一个单页用一个title，以便突出网站页面主体信息，从seo看，title权重比h1高，适用性比h1广。标记了h1的文字页面给予的权重会比页面内其他权重高很多。一个好的网站是h1和title并存，既突出h1文章主题，又突出网站主题和关键字。达到双重优化网站的效果。

 

51、介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？

CSS盒子模型：由四个属性组成的外边距(margin)、内边距(padding)、边界(border)、内容区(width和height);

标准的CSS盒子模型和低端IE CSS盒子模型不同：宽高不一样

　　标准的css盒子模型宽高就是内容区宽高；

低端IE css盒子模型宽高 内边距﹢边界﹢内容区；

 

 

 

 

52、CSS3新增伪类有那些？

p:last-of-type         选择其父元素的最后的一个P元素

p:last-child            选择其父元素的最后子元素(一定是P才行)

 

p:first-of-type        选择其父元素的首个P元素

p:first-child           选择其父元素的首个p元素(一定是p才行)

 

p:only-child　　　　选择其父元素的只有一个元素(而且这个元素只能是p元素，不能有其他元素)

p:only-of-type　　　选择其父元素的只有一个p元素(不能有第二个P元素，其他元素可以有)　

 

选第N个

p:nth-child(n)    　　选择其父元素的第N个 刚好是p的元素

p:nth-last-child(n)    ..............................................从最后一个子元素开始计数

p:nth-of-type(n)　  选择其父元素的n个元素

p:nth-last-of-type(n)   ........................从最后一个子元素开始计数

 

53、如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？

（一）元素水平居中的方式

1）行级元素水平居中对齐（父元素设置 text-align:center）      

[html] view plain copy

1.     
2. 行级元素垂直居中     

   

          

2)   块级元素水平居中对齐（margin: 0 auto）

[html] view plain copy

1.   
2.  块级元素水平居中

  

  

 

3）浮动元素水平居中

• 宽度不固定的浮动元素

html代码

[html] view plain copy

1.   
2. 我是浮动的