html5和css3的选择题,前端开发面试题HTML5+CSS3

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

结构层 Html 表示层 CSS 行为层 js。

2.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?

Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]

Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等

Presto内核：Opera7及以上。      [Opera内核原为：Presto，现为：Blink;]

Webkit内核：Safari,Chrome等。  [ Chrome的：Blink(WebKit的分支)]

3.请描述一下 cookies，sessionStorage 和 localStorage 的区别？

cookie是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密)。

cookie数据始终在同源的http请求中携带(即使不需要)，记会在浏览器和服务器间来回传递。

sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

存储大小：

cookie数据大小不能超过4k。

sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

有期时间：

localStorage    存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；

sessionStorage  数据在当前浏览器窗口关闭后自动删除。

cookie          设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

4.HTML5 中的一些有趣的新特性：

1.用于绘画的 canvas 元素

2.用于媒介回放的 video 和 audio 元素

3.对本地离线存储的更好的支持

4.新的特殊内容元素，比如 article、footer、header、nav、section

5.新的表单控件，比如 calendar、date、time、email、url、search

5.行内元素有哪些?块级元素有哪些?CSS的盒模型?

1.块级元素：div p h1 h2 h3 h4 form ul

2.行内元素: a b br i span input select

3.Css盒模型:内容，border ,margin，padding

6.CSS引入的方式有哪些? link和@import的区别是?

1.内联 内嵌 外链 导入

2.区别 ：同时加载

前者无兼容性，后者CSS2.1以下浏览器不支持

Link 支持使用javascript改变样式，后者不可

7.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?

1.基本可以分为通配选择器，标签选择器，类选择器，ID选择器，简单属性选择，具体属性选择，根据部分属性值选择，特定属性选择，从结构上来分还有后代选择器，子元素选择器，相邻兄弟选择器以及伪类。

2.可以的有 font-size font-family color

不可以的有 border padding margin background-color width height等

3.行内样式优先级Specificity值为1,0,0,0，高于外部定义。

外部定义指经由或或

标签定义的规则；

!important声明的Specificity值最高；

Specificity值一样的情况下，按CSS代码中出现的顺序决定，后者CSS样式居上；

由继续而得到的样式没有specificity的计算，它低于一切其他规则(比如全局选择符*定义的规则)。

用!important可以改变优先级别为最高，其次是style对象，然后是id > class >tag ，另外在同级样式按照申明的顺序后出现的样式具有高优先级。

8.垂直居中设置

1.使用position:absolute(fixed),设置left、top、margin-left、margin-top的属性;

2.利用position:fixed(absolute)属性，margin:auto这个必须不要忘记了;

3.利用display:table-cell属性使内容垂直居中;

4.使用css3的新属性transform:translate(x,y)属性;

5.使用:before元素;

9.写出几种IE6 BUG的解决方法

1.双边距BUG float引起的 使用display

2.3像素问题 使用float引起的 使用dislpay:inline -3px

3.超链接hover 点击后失效 使用正确的书写顺序 link visited hover active

4.Ie z-index问题 给父级添加position:relative

5.Png 透明 使用js代码 改

6.Min-height 最小高度 ！Important 解决’

7.select 在ie6下遮盖 使用iframe嵌套

8.为什么没有办法定义1px左右的宽度容器(IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px)

10.介绍一下CSS的盒子模型

1.有两种， IE 盒子模型、标准 W3C 盒子模型；标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。

IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。

2.盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).

11.CSS3有哪些新特性？

CSS3实现圆角(border-radius:8px)，阴影(box-shadow:10px)，@Font-face(字体)

对文字加特效(text-shadow、)，线性渐变(gradient)，旋转(transform),css3多列布局(multi-column layout)动画(animation)

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

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

12.简述html语义化标签

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

13.CSS display:none和visibility:hidden的区别

visibility:hidden隐藏，但在浏览时保留位置

display:none视为不存在，且不加载

14.CSS清除浮动的几种方法

1、【.clr{clear:both;}】，设置了clear属性的元素，其上边框会紧贴着浮动元素的margin-bottom边界位置渲染，忽略其margin-top设置

2、空标签清浮动：【.clr{clear:both;height:0;overflow:hidden;}】，不推荐。

3、伪类after清浮动：【.clr:after{content:" ";clear:both;display:block;height:0;visibility:hidden;line-height:0;} .clr{zoom:1}】。

4、使用【display:table】。

5、使用overflow除visible，类似于激发haslayout。

6、使用浮动父元素清浮动。

15.SASS或是Less区别

1.编译环境不一样

2.变量符不一样，Less是@，而Scss是$，而且变量的作用域也不一样。

3.输出设置，Less没有输出设置，Sass提供4中输出选项：nested, compact, compressed 和 expanded。

4.Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持。

5. 引用外部CSS文件

scss引用的外部文件命名必须以_开头, 如下例所示:其中_test1.scss、_test2.scss、_test3.scss文件分别设置的h1 h2 h3。文件名如果以下划线_开头的话，Sass会认为该文件是一个引用文件，不会将其编译为css文件.

6.Sass和Less的工具库不同

Sass有工具库Compass, 简单说，Sass和Compass的关系有点像Javascript和jQuery的关系,Compass是Sass的工具库。在它的基础上，封装了一系列有用的模块和模板，补充强化了Sass的功能。

Less有UI组件库Bootstrap,Bootstrap是web前端开发中一个比较有名的前端UI组件库，Bootstrap的样式文件部分源码就是采用Less语法编写。