1. DTD文档模型
<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 规范（版本）。
html4中有三种类型：严格Strict、过渡Transitional、框架Frameset
html5中只有一种<!DOCTYPE html>
2. 写出行内元素与块及元素每个5个，并描述其区别
行内：a 、b、span、i、em、input、label
块：address、div、p、dl、ul、h1~h6
特殊的行内 img 即可和其它元素一行，也可设置宽和高
区别：
块总是占满一行，可设置宽高，上下左右的内边距外边距都可以设置，宽度与浏览器宽度一样，可容纳内联元素与其它块元素
行总是和其它行元素占一行，不可设置宽高，只能设置左右的内边距和外边距，宽度以内容为准，只能容纳文本和其它行元素。
3. 盒子模型有几种？分别使用每种盒子写出例子并描述
盒子模型有两种，分别是 怪异盒子模型和标准 W3C 盒子模型。
内容区：content 填充：padding 边框：border 空白：margin
4. CSS引入方式
内联style=""
内部<style></style>
外部<link href="">
导入@import url("样式表") 不提倡使用，会阻塞加载
它们的优先级
内联>内部>外部>导入
5. CSS选择器种类，CSS选择器优先级
元素选择器 p a span div
ID选择器 #ID名
CLASS选择器 .CLASS名
通配符选择器 *
优先级 ID > CLASS > 元素 > 通配符
6. 分别写出IE6、7、8 BUG的解决方法
利用css hack来解决
_：选择IE6及以下。连接线（中划线）（-）亦可使用，为了避免与某些带中划线的属性混淆，所以使用下划线（_）更为合适。
*：选择IE7及以下。诸如：（+）与（#）之类的均可使用，不过业界对（*）的认知度更高
\9：选择IE6+
\0：选择IE8+和Opera15以下的浏览器
7. img标签上title与alt属性的区别是什么?
alt是你的图片因为某种原因不能加载时显示的文字
title是你鼠标悬停在上面时显示的文字
8. 解释css sprites，如何使用
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。
9. 描述padding和margin的区别
在CSS中margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。
10. CSS定位的属性值极其使用场景
1）absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
2）fixed
生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
3）relative
生成相对定位的元素，相对于其正常位置进行定位。
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
4）static
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
5)inherit
规定应该从父元素继承 position 属性的值。
11. 描述display的使用
block 象块类型元素一样显示。
none 缺省值。象行内元素类型一样显示。
inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。
list-item 象块类型元素一样显示，并添加样式列表标记。
12. 描述opacity属性的使用
opacity 属性设置元素的不透明级别。默认值为1；
Value：规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。
inherit：应该从父元素继承 opacity 属性的值。
13. 列表有几种？利用列表写出水平导航栏
列表有三种：ul、ol、dl
<style>
ul li{ list-style: none; display:inline-block;}
</style>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
</ul>
14. 一个盒子如何在大盒子中进行居中操作
规定其宽度，margin:0 auto;
15. 一个3列以上的布局效果
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
16. 写出2D属性
平移：translate
缩放：scale
倾斜:rotate
斜切扭曲:skew
17. 一个过渡效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.h1{
width: 200px;
height: 200px;
margin: 50px auto;
background-color: black;
}
.h1:hover{
background-color: red;
transition: background-color 2s ease ;
}
</style>
</head>
<body>
<div class="h1">
</div>
</body>
</html>
18. 使用动画完成一个简单的动画效果
<style>
.h img {
width: 200px;
height: 200px;
}
@keyframes quanquan {
0%{
transform: scale(1);
-moz-transform: scale(1);
}
40%{
transform: scale(0.8);
-moz-transform: scale(0.8);
}
100%{
transform: scale(1);
-moz-transform: scale(1);
}
}
.h img{
animation: quanquan 0.75s ease infinite ;
}
</style>
<body>
<div><img src="img/xin.jpg" alt="" /></div>
</body>
19. 使用媒体查询完成一个响应式布局
<style type="text/css">
.x{
width: 200px;
height: 200px;
margin: 0 auto;
background-color: blueviolet;
}
@media screen and (min-width:500px) and (max-width:1000px){
.x{
background-color:red;
}
}
@media screen and (max-width:500px) {
.x{
background-color: gold;
}
}
</style>
</head>
<body>
<div class="x">
<div class="x1"></div>
</div>
</body>
</html>
20.HTML5新标签
1.header 页面头部
2.footer 页脚
3.article 定义页面独立的内容区域
4.aside 定义页面的侧边栏内容
5.details 用于描述文档的详细信息，未点击时收起
6.summary details的标题
7.figure 规定独立的流内容
8.figcaption figure的标题
9.mark 定义带有记号的文本
10.nav 导航链接
21. 网页制作会用到的图片格式有哪些
png 背景是透明的，有png24和png8两种模式，png24颜色更丰富
psd 使用photoshop制作的分层的图片格式，不能直接用于网页。需要“切图”后方可使用。
jpg 比较常见的图片格式
bmp windows中标准的图像文件格式
svg 矢量图型
Gif GIF - 最佳动画 GIF（图形交换格式）是一种“无损”格式，保存时，没有任何信息丢失。这种格式是一种流行在网页上使用，屏幕上的图像的大小是相对较小，相比其他类型的图像压缩。
22. 如何理解HTML结构的语义化
1.搜索引擎花更少的时间收集信息
语义化指的是搜索引擎在花费更少时间情况下能够研究和收集信息，让网页能够被搜索引擎理解。
2.更直观
语义标签是让大家直观的认识标签，div和header你更容易从语义化标签看出当前模块是什么内容
3.容易被搜索引擎抓取
语义化的好处，最主要的是对搜索引擎友好，有了良好的结构和语义你的网页更容易被搜索引擎抓取。
4.解耦
语义web技术有助于结构、表现与行为的分离
23. px和em的区别
px像素（Pixel），相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
◆em是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
因此用px来定义字体，就无法用浏览器字体放大的功能
24. css有个content属性有什么作用
用来和:after及:before伪元素一起使用，在对象前或后显示内容。
作用： 用于清除浮动
4394
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
