HTML&CSS题目

渐进增强和优雅降级？

渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

display：none和visibility：hidden的区别？

• display：none 隐藏对应的元素，在文档布局中不再给他分配空间，它各边的元素会合拢，就当他从来不存在。
• visibility：hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。

css中link和@import 的区别是？

• link属于HTML标签，而@import是css提供的；
• 页面被加载时link会同时被加载，而@import被引用的css会等到引用他的css文件被加载完再加载；
• import只在IE5以上才能识别，而link是HTML标签，无兼容问题；
• link方式的样式的权重高于@import的权重。

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）

优先级为：

！important > id >class > tag
important比内联优先级高，但内联比id要高

css3新增伪类举例：

• p:first-of-type选择属于其父元素的首个<p>元素的每个<p>元素。
• p:last-of-type 选择属于其父元素的最后<p>元素的每个<p>元素。
• p:only-of-type 选择属于其父元素的唯一的<p>元素的每个<p>元素。
• p:only-child 选择属于其父元素的唯一子元素的每个<p>元素。
• p:nth-child(2)选择属于其父元素的第二个子元素的每个<p>元素。
• :enabled :disabled 控制表单控件的禁用状态。
• :checked 单选框或复选框被选中。

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
• 媒体查询，多栏布局
• border-image

css3中新增了一种盒模型计算方式：box-sizing。盒模型默认的值是content-box，新增padding-box和border-box

对BFC规范对理解？

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

说说你对语义化的理解？

1.去掉或者丢失样式的时候能够让页面呈现出清晰的结构
2.有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
3.方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染页面；
4.便于团队开发和维护，语义化更具可读性，遵循w3c标准的团队都遵循这个标准，可以减少差异化。

常见兼容性问题？

• png24位的图片在ie6浏览器上出现背景，解决方案是做成png8，也可以引用一段脚本处理
• 浏览器默认的margin和padding不同。解决方案是加一个全局*{margin:0;padding:0}来统一
• IE6双边距bug：块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大，解决方案是在float的标签样式控制中加入_display:inline;将其转化位行内属性。

解释下浮动和它的工作原理？清除浮动的技巧？

浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
1.使用空标签清除浮动
这种方法是在所有浮动标签后年添加一个空标签 定义css clear：both，弊端就是增加来无意义的标签。
2.使用overflow
给包含浮动元素的父标签添加css属性 overflow为hidden或auto。
3.浮动外部元素
4.使用after伪元素

#parent:after{
  content:"";
  height:0;
  visibility:hidden;
  display:block;
  clear:both;
}

谈谈浮动和清除浮动？

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

浮动元素引起的问题和解决方法？

浮动元素引起的问题：
1.父元素的高度无法被撑开，影响与父元素同级的元素
2.与浮动元素同级的非浮动元素（内联元素）会跟随其后
3.若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面的结构

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

• HTML5 现在已经不是SGML的子集，主要是关于图像，位置，存储，多任务等功能等增加。
• 拖拽释放（Drag and drop） API
• 语义化更好等内容标签（header，nav，footer，阿肆的，article，section）
• 音频、视频API（audio，video）
• 画布（Canvas）API
• 地理（Geolocation）API
• 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；sessionStorage的数据在浏览器关闭后自动删除
• 表单控件，calendar、date、time、email、URL、search
• 新的技术webworker，websocket，Geolocation

移除的元素

• 纯表现的元素：basefont，big，center，font，s，strike，tt，u；
• 对可用性产生负面影响的元素：frame，frameset，noframes；

支持HTML5新标签：

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

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

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

   <!--[if lt IE 9]>

   <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>

   <![endif]-->

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