标签：
1、<b></b>与<strong></strong>有什么不同？
1) <b>标签是一个实体标签，它所包围的字符将被设为bold（粗体），而<strong>标签是一个逻辑标签，它的作用是加强字符的语气，一般来说，加强字符的语气是通过将字符变为bold（粗体）来实现的。这个strong完全可以定义成别的样式的强调效果
2) strong是web标准中xhtml的标签，意思是“强调”；b是html的，意思是bold（粗体）。
2、CSS判断用id、class以及标签选择器定义样式的优先级？
1) 三种方式并存的时候：!important > id > class > tag
2) 当只有两个class或者两个id的时候
<body>
<fieldset>
<legend>两个class的时候</legend>
<div class="classtest2" class="classtest">classtest2(黄色)先classtest(蓝色)后</div>
<div class="classtest" class="classtest2">classtest(蓝色)先classtest2(黄色)后</div>
</fieldset>
<fieldset>
<legend>两个id的时候</legend>
<div id="idtest" id="idtest2">idtest(绿色)先idtest2(黄绿色)后</div>
<div id="idtest2" id="idtest">idtest2(黄绿色)先idtes(绿色)后</div>
</fieldset>
得出优先级结果：当且仅当有两个或多个class或id的时候，前面的优先级高。
3) 只有标签div选择器的时候
<head>
<style type="text/css" media="screen">
div { color: blue; }
div { color: red; }
</style>
</head>
<body>
<div>蓝色样式先，红色样式后</div>
</body>
结论：结果显示为红色，表明当只有标签选择器时，后面定义的样式表的优先级就越高。
CSS引入方式优先级
1) 外部样式表：将样式规则直接写在*.css文件中，然后再*.html页面中通过<link>标签引入的方式
2) 内部样式表：（位于<head> 标签内部）
3) 内联样式：（在HTML元素内部）
4) 导入样式表：<style type="text/css"> @import url("css/base.css"); </style>
验证：外部样式表 VS 内部样式表（先定义内部样式表，再引入外部样式表定义文件）
<head>
<title>CSS样式表优先级测试</title>
<meta charset="UTF-8" />
<style type="text/css" media="screen">
div { color: green }
</style>
<link rel="stylesheet" href="css/xiaoxuetu.css"
type="text/css" media="screen" title="no title"
charset="utf-8"/>
</head>
得出优先级结果：外部样式表 > 内部样式表
验证：外部样式表 VS 内部样式表（先引入外部样式表定义文件，再定义内部样式表）
<head>
<title>CSS样式表优先级测试</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="css/xiaoxuetu.css"
type="text/css" media="screen" title="no title"
charset="utf-8"/>
<style type="text/css" media="screen">
div { color: green; }
</style>
</head>
得出优先级结果：内部样式表 > 外部样式表
从这两部测试发现，在直接对标签的样式进行定义时，外部样式表和内部样式表的优先与他们的引入顺序有关。
验证：外部样式表 VS 内联样式
<head>
<title>CSS样式表优先级测试</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="css/xiaoxuetu.css"
type="text/css" media="screen" title="no title"
charset="utf-8"/>
</head>
<body>
<div style="color:red;">外部样式表(蓝色)
VS 内联样式(红色)</div>
</body>
得出优先级结果：内联样式 > 外部样式表
验证：内联样式 VS 内部样式表
<head>
<title>CSS样式表优先级测试</title>
<meta charset="UTF-8" />
<style type="text/css" media="screen">
div { color: green }
</style>
</head>
<body>
<div style="color:red;">内部样式表(绿色)
VS 内联样式(红色)</div>
</body>
得出优先级结果：内联样式 > 内部样式表
结论：内部样式的优先级最大，而内部样式表和外部样式表的优先级得看他们的引入和定义顺序，即后引入的会覆盖之前的。
3、列出display的值，说明他们的作用。
block 象块类型元素一样显示。
none 缺省值。象行内元素类型一样显示。
inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。
list-item 象块类型元素一样显示，并添加样式列表标记。
position的值：
*absolute生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
*fixed （老IE不支持）生成绝对定位的元素，相对于浏览器窗口进行定位。
*relative 生成相对定位的元素，相对于其正常位置进行定位。
* static 默认值。没有定位，元素出现在正常的流中
*（忽略 top, bottom, left, right z-index 声明）。
* inherit 规定从父元素继承 position 属性的值。
4、css背景设置
1） 背景色(background-color)，有许多方式指定这个颜色，以下方式都得到相同的结果。
2） 背景图(background-image)
3） 背景平铺(background-repeat)
4） 背景定位(background-position)
background-position 属性用来控制背景图片在元素中的位置。实际上指定的是图片左上角相对于元素左上角的位置。第一个数字表示 x 轴(水平)位置，第二个是 y 轴(垂直) 位置。
background-position: 0 0; /* 例 1: 默认值，元素的左上角 */
background-position: 75px 0; /* 例 2: 把图片向右移动 */
background-position: -75px 0; /* 例 3: 把图片向左移动 */
background-position: 0 100px; /* 例 4: 把图片向下移动 */
background-position 属性可以用其它数值，关键词和百分比来指定，尤其是在元素尺寸不是用像素设置时。
x 轴上：* left * center * right
y 轴上：* top * center * bottom
使用百分数定位时，其实是将背景图片的百分比指定的位置和元素的百分比位置对齐。也就是说，百分数定位是改变了背景图和元素的对齐基点。不再像使用像素和关键词定位时使用背景图和元素的左上角为对齐基点。例如上例的 background-position: 100% 50%; 就是将背景图片的 100%(right) 50%(center) 这个点，和元素的 100%(right) 50%(center) 这个点对齐。
5） 背景附着background-attachment
background-attachment 属性决定用户滚动页面时图片的状态。三个可用属性为 scroll(滚动)，fixed(固定) 和 inherit(继承)。inherit 单纯地指定元素继承他的父元素的 background-attachment 属性。
为了正确地理解 background-attachment，首先需要明白页面(page)和视口(view port)是如何协作地。视口(view port)是浏览器显示网页的部分(就是去掉工具栏的浏览器)。视口(view port)的位置固定，不变动。
当向下滚动网页时，视口(view port)是不动的，而页面的内容向上滚动。看起来貌似视口(view port)向页面下方滚动了。如果设置 background-attachment: scroll，就设置了当元素滚动时，元素背景也必需随着滚动。简而言之，背景是紧贴元素的。这是 background-attachment 默认值。
（1）用一个例子来更清楚地描述下：
background-image: url(test-image.jpg);
background-position: 0 0;
background-repeat: no-repeat;
background-attachment: scroll;
当向下滚动页面时，背景向上滚动直至消失。
但是当设置 background-attachment 为 fixed 时，当页面向下滚动时，背景要待在它原来的位置(相对于浏览器来说)。也就是不随元素滚动。
（2）用另一个例子描述下：
background-image: url(test-image.jpg);
background-position: 0 100%;
background-repeat: no-repeat;
background-attachment: fixed;
因为图片开始在元素之外，一部分图片被切除了。
5、css样式中，自定义宽度的输入框超出部分隐藏并显示省略标记。
.xx{
display: block;
width:200px; /*对宽度的定义*/
overflow: hidden; /*超出的部分隐藏*/
white-space: nowrap; /*禁止换行*/
text-overflow: ellipsis; /*超出的部分用...实现*/
}
text-overflow属性规定当文本溢出包含元素时发生的事情。
text-overflow: clip | ellipsis | string;
clip 修剪文本。
ellipsis显示省略符号来代表被修剪的文本。
string使用给定的字符串来代表被修剪的文本。
6、png、jpg、gif图片的区别
GIF特点：体积小，有着极好的压缩效果，支持动画，并且支持透明效果，虽然这个透明没有PNG的那样渐变透明的强大。
JPG是数码相机最常用的格式，特点：色彩还原好，可以在照片不明显失真的情况下，大幅降低体积，所以体积不很大，缺点是不支持透明。
PNG是最适合网络的图片！PNG的优点：清晰，无损压缩，压缩比率很高，可渐变透明，具备几乎所有GIF的优点；缺点是不如JPG的颜色丰富，同样的图片体积也比JPG略大。但是PNG应该在网站设计上被推广，它是公认的最适合网页使用的图片格式。Google所有站点几乎全部的图片资源都是PNG格式。8位的PNG完全可以替代掉GIF。
PNG另一个优点，就是逐次逼近显示(progressive display)：传输图像文件的同时，可以先把整个轮廓显示出来，然后逐步显示图像的细节，即先显示低分辨率显示图像，从模糊到清晰，然后逐步提高它的分辨率。这是一个很好的用户体验。
各方面比较
大小比较：通常地，PNG ≈ JPG > GIF
透明性：PNG > GIF > JPG
色彩丰富程度：JPG > PNG >GIF
兼容程度：GIF ≈ JPG > PNG
注意，IE6下PNG的透明是不能显示的，有其对应的Hack方法。
标签：
原文地址：http://www.cnblogs.com/limeiky/p/4743619.html
