JavaScript CSS面试题

piperzero

浏览: 3554816 次
性别:
来自: 杭州

最近访客更多访客>>

handsome1234

u012363178

zhangketuan

wangyy

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (3796)

社区版块

存档分类

一、超链接点击事后hover样式就不呈现的问题？
被点击访谒过的超链接样式不再具有hover和active样式了,解决体式格局是改变CSS属性的枚举挨次: L-V-H-A
二、IE6的margin双倍边距bug问题
例如：

浮动后原本外边距10px,但IE诠释为20px,解决法子是加上display:inline;
三、为什么中火狐浏览器下文本无法撑开容器的高度？
尺度浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度，又想能被撑开需要若何设置呢？法子就是去失踪height设置min-height:200px; 这里为了赐顾帮衬不熟悉min-height的IE6 可以这样界说：

div { height:auto!important; height:200px; min-height:200px; }

四、为什么web尺度中无法设置IE浏览器滚动条颜色了？
原本样式设置：

解决法子是将body换成html
五、若何界说1px摆布高度的容器？
IE6下这个问题是因为默认的行高造成的，解决的体式格局也有良多，例如：overflow:hidden | zoom:0.08 | line-height:1px
六、怎么样才能让层显示在FLASH之上呢？
解决的法子是给FLASH设置透明:

<a href=”:http://www.chinaz.com/”>:</a>
< pre lang=”html” line=”1″>
< param name=”wmode” value=”transparent” />
七、若何使一个div层居中于浏览器中？

这里利用百分比绝对定位，与外补丁负值的体式格局，负值的大小为其自身宽度高度除以二
八、firefox浏览器中嵌套div标签的居中问题的解决体式格局假定有如下情况：

若是要实现b在a中居中放置，一般只需用CSS设置a的text-align属性为center。这样的体式格局在IE里看起来一切正常；可是在Firefox中b却会是居左的。
解决法子就是设置b的横向margin为auto。例如设置b的CSS样式为：margin: 0 auto;

Javascript、CSS、HTML面试题
易
1 JS中的三种弹出式消息提醒(警告窗口、确认窗口、信息输入窗口)的命令是什么？
alert confirm prompt
2声明一个CSS有几种方式？
1.导入一个已经存在的CSS文件
<link rel=”stylesheet” type=”text/css” href=”">
2.直接在HARD里声明一个CSS代码段：
<style type=”text/css”>
…..
< /style>
3.直接在网页元素里声明使用CSS： style=”color:red;”
3在HTML中，有一个城市的下拉列表框的代码为:
< select id=”country”>
< option value=”1″>广东 <option>
< option value=”2″>海南 <option>
< /select>
请用javascript分别写出如何得到当前选中城市的value和名称（名称是广东和海南）：
document.getElementById(“country”).value
document.getElementById(“country”).options[document.getElementById("country").selectedIndex].text
4表格的宽度可以用百分比和像素两种单位来设置。
5用来输入密码的表单域是 Type=password 。
6 RGB方式表示的颜色都是由红、绿、蓝这3种基色调和而成。
7如果一个分为左右两个框架的框架组，要想使左侧的框架宽度不变，应该用 _像素_单位来定制其宽度，而右侧框架则使用 * 单位来定制。
8表单对象的名称由__ Name ___属性设定；提交方法由__ method __属性指定；若要提交大数据量的数据，则应采用__ post ___方法；表单提交后的数据处理程序由___ action __属性指定。
9请写出在网页中设定表格边框的厚度的属性__ Border __；设定表格单元格之间宽度属性___ Cellpadding ___；设定表格资料与单元格线的距离属性__ cellspacing __。
10在网页中插入背景图案（文件的路径及名称为/img/bg.jpg）的语句是__．<body background=/img/bg.jpg> ___。
11设定图片边框的属性是_ Border __。
12设定图片高度及宽度的属性是___ Height，width ___。
13预格式化文本标记<pre></pre>的功能是__标记内的内容按照原格式显示在网页中_。
中
1在一个CSS文件中如何定义各种样式，比如根据id，根据name等。
如果是声明CSS类，则有三种：
直接标签名作为CSS类名称： TagName{ … }
以元素ID作为CSS类声明： #ID{…}
自定义CSS类名称： .ClassName{}
2在JavaScript中如何实现定时调用功能
setTimeOut(foo(),100);
3请在下面写出你知道的在javascript中获取一个html element对象的方法，如 <input type=”text” id= “user.name”/>这个element;
document.getElementById(“user.name”)
4要设置一条1象素粗的水平线，应使用的HTML语句是__<hr style=’font-size:10px’>__。
5在页面中实现滚动文字的标记是_ <marqueen> __。
难
1请写出HTML中打开一个模式窗口和非模式窗口的javascript代码。
window.showModalDialog() ;window.showModelessDialog()
2当表单以电子邮件的形式发送，表单信息不以附件的形式发送，应将【MIME类型】设置为 Text/plain 。
3你认为网页中三种最基本的页面组成元素是 _文字、图形、超连接。
4设定图片上下留空的属性是__ Vspace ___；设定图片左右留空的属性是___ hspace__。
5在网页中嵌入多媒体，如电影，声音等用到的标记是___ Embed __。
6在页面中添加背景音乐bg.mid，循环播放3次的语句是_ <bgsound src=bg.mid loop=3> _。
7<img src=”ex.GIF” dynsrc=”ex.AVI” loop=3 loopdelay=250>语句的功能是__循环三次播放ex.avi，延迟250毫秒，在播放前显示ex.gif图像__。
8用来在视频窗口下附加 MS－WINDOWS 的 AVI 播放控制条的属性是__ control __。

1 请说明 PHP 中传值与传引用的区别。什么时候传值什么时候传引用？
答：传值只是把某一个变量的值传给了另一个变量，而引用则说明两者指向了同一个地方。
2 在PHP中error_reporting这个函数有什么作用？
答： The error_reporting() function sets the error_reporting directive at runtime. PHP has many levels of errors, using this function sets that level for the duration (runtime) of your script.
3 请用正则表达式（Regular Expression）写一个函数验证电子邮件的格式是否正确。
答：
<?php
if(isset($_POST['action']) && $_POST['action']==’submitted’)
{
$email=$_POST['email'];
if(!preg_match(“/^(?:w+.?)*w+@(?:w+.?)*w+$/”,$email))
{
echo “电子邮件检测失败”;
}
else
{
echo “电子邮件检测成功”;
}
}
else
{
?>
< html>
< head><title>EMAIL检测</title>
< script type=”text/javascript”>
function checkEmail(sText)
{
var reg=/^(?:w+.?)*w+@(?:w+.?)*w+$/;
var email=document.getElementById(sText).value;
if(!reg.test(email))
{
alert(“电子邮件检测失败”);
}
else
{
alert(“电子邮件格式正确”);
}
}
< /script>
< /head>
< body>
< form action=”<?php echo $_SERVER['PHP_SELF'] ?>” method=”POST”>
电子邮件：<input type=”text” id=”email” name=”email” /><br />
< input type=”hidden” name=”action” value=”submitted” />
< input type=”button” name=”button” value=”客户端检测” onclick=”checkEmail(‘email’)” />
< input type=”submit” name=”submit” value=”服务器端检测” />
< /form>
< /body>
< /html>
< ?php
}
?>
4 简述如何得到当前执行脚本路径，包括所得到参数。
<?php
echo “http://”.$_SERVER['SERVER_NAME'].$_SERVER['PHP_SELF'].”?”.$_SERVER['QUERY_STRING'];
//echo “http://”.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
?>
5 有一个一维数组，里面存储整形数据，请写一个函数，将他们按从大到小的顺序排列。要求执行效率高。并说明如何改善执行效率。（该函数必须自己实现，不能使用php函数）

<?php
function BubbleSort(&$arr)
{
$cnt=count($arr);
$flag=1;
for($i=0;$i<$cnt;$i++)
{
if($flag==0)
{
return;
}
$flag=0;
for($j=0;$j<$cnt-$i-1;$j++)
{
if($arr[$j]>$arr[$j+1])
{
$tmp=$arr[$j];
$arr[$j]=$arr[$j+1];
$arr[$j+1]=$tmp;
$flag=1;
}
}
}
}
$test=array(1,3,6,8,2,7);
BubbleSort($test);
var_dump($test);
?>

6 请举例说明在你的开发过程中用什么方法来加快页面的加载速度
答：要用到服务器资源时才打开，及时关闭服务器资源，数据库添加索引，页面可生成静态，图片等大文件单独服务器。使用代码优化工具啦
回复: PHP面试题及答案
——————————————————————————–
PHP新手面试题总100分
简述题(50分)
1、用PHP打印出前一天的时间格式是2006-5-10 22:21:21(2分)
echo date(‘Y-m-d H:i:s’, strtotime(‘-1 day’));
2、echo(),print(),print_r()的区别(3分)
echo是PHP语句, print和print_r是函数,语句没有返回值,函数可以有返回值(即便没有用)
print只能打印出简单类型变量的值(如int,string)
print_r可以打印出复杂类型变量的值(如数组,对象)
echo — 输出一个或者多个字符串
3、能够使HTML和PHP分离开使用的模板(1分)
smarty，Heyes Template Class等
5、使用哪些工具进行版本控制？(1分)
VS Server on Apache作服务端,WinCVS作客户端;Subversion on Apache/DAV 做服务端,TortoiseSVN做客户端,或者Subclipse做客户端.
6、如何实现字符串翻转？(3分)
strrev()
—————————————————————
7、优化MYSQL数据库的方法。(4分，多写多得)
(1).选取最适用的字段属性,应该尽量把字段设置为NOT NULL，这样在将来执行查询的时候，数据库不用去比较NULL值。
(2).使用连接（JOIN）来代替子查询(Sub-Queries)
(3).使用联合(UNION)来代替手动创建的临时表
(4).尽量少使用 LIKE 关键字和通配符
(5).使用事务和外键
8、PHP的意思(送1分)
Hypertext Preprocessor
9、MYSQL取得当前时间的函数是?，格式化日期的函数是(2分)
now(), DATE_FORMAT(date,format)
10、实现中文字串截取无乱码的方法。(3分)
mb_substr()
—————————————————————
11、您是否用过版本控制软件? 如果有您用的版本控制软件的名字是?(1分)
TortoiseSVN-1.2.6 svn-1.2.3
12、您是否用过模板引擎? 如果有您用的模板引擎的名字是?(1分)
smarty
13、请简单阐述您最得意的开发之作(4分)
14、对于大流量的网站,您采用什么样的方法来解决访问量问题?(4分)
首先，确认服务器硬件是否足够支持当前的流量
其次，优化数据库访问。
第三，禁止外部的盗链。
第四，控制大文件的下载。
第五，使用不同主机分流主要流量
第六，使用流量分析统计软件。
—————————————————————–
15、用PHP写出显示客户端IP与服务器IP的代码1分)
function get_client_ip() {#
if(getenv(‘HTTP_CLIENT_IP’)) {
$client_ip = getenv(‘HTTP_CLIENT_IP’);
} elseif(getenv(‘HTTP_X_FORWARDED_FOR’)) {
$client_ip = getenv(‘HTTP_X_FORWARDED_FOR’);
} elseif(getenv(‘REMOTE_ADDR’)) {
$client_ip = getenv(‘REMOTE_ADDR’);
} else {
$client_ip = $HTTP_SERVER_VAR['REMOTE_ADDR'];
}
return $client_ip;
}
16、语句include和require的区别是什么?为避免多次包含同一文件，可用(?)语句代替它们? (2分)
require()和include()除了怎样处理失败之外在各方面都完全一样。include()产生一个警告而require()则导致一个致命错误。
换句话说，如果你想在丢失文件时停止处理页面,用require()。include() 就不是这样，脚本会继续运行。
require()无论如何都会包含文件,而include()可以有选择地包含.
代替用
include_once
require_once
17、如何修改SESSION的生存时间(1分).
$savePath = “./session_save_dir/”;
$lifeTime = 24 * 3600;
session_save_path($savePath);
session_set_cookie_params($lifeTime);
session_start();
18、有一个网页地址, 比如PHP开发资源网主页: http://www.phpres.com/index.html,如何得到它的内容?($1分)
file_get_contents($url)
19、在HTTP 1.0中，状态码401的含义是(?)；如果返回“找不到文件”的提示，则可用 header 函数，其语句为(?);(2分)
未授权（Unauthorized)
Header(“http/1.0 403 Forbidden”);
12、在PHP中，heredoc是一种特殊的字符串，它的结束标志必须?(1分)
跟起始的一样，且结束标志前也要一个换行，后面加上分号
13、谈谈asp,php,jsp的优缺点(1分)
14、谈谈对mvc的认识(1分)
——————————————————————-
15、写出发贴数最多的十个人名字的SQL，利用下表：members(id,username,posts,pass,email)(2分)
select members.username
from members
order by posts DESC
limit 10
16. 请说明php中传值与传引用的区别。什么时候传值什么时候传引用？(2分)
按值传递：函数范围内对值的任何改变在函数外部都会被忽略
按引用传递：函数范围内对值的任何改变在函数外部也能反映出这些修改
优缺点：按值传递时，php必须复制值。特别是对于大型的字符串和对象来说，这将会是一个代价很大的操作。
按引用传递则不需要复制值，对于性能提高很有好处。
17. 在PHP中error_reporting这个函数有什么作用？ (1分)
用来配置错误信息回报的等级
18. 请写一个函数验证电子邮件的格式是否正确 (2分)
//if the email address is valid, return true,else return false
function validateEmail($email)
{
if(eregi(‘^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-]+)*$’,$email) ){
return true;
}else{
return false;
}
}
19. 简述如何得到当前执行脚本路径，包括所得到参数。(2分)
echo $_SERVER['scrīpt_FILENAME'].”?”.$_SERVER['QUERY_STRING'];
20.如何修改SESSION的生存时间. (1分)
setcookie()
或
session_set_cookie_params($lifeTime)
——————————————————————–
21、JS表单弹出对话框函数是?获得输入焦点函数是? (2分)
alert(),prompt(),confirm()
focus()
22、JS的转向函数是?怎么引入一个外部JS文件?(2分)
window.location.href
< scrīpt src=”"/>
23、foo()和@foo()之间有什么区别？(1分)
24、如何声明一个名为”myclass”的没有方法和属性的类？ (1分)
class myclass{};
25、如何实例化一个名为”myclass”的对象？(1分)
$newmyclass = new myclass();
26、你如何访问和设置一个类的属性？ (2分)
通过-〉
$newmyclass = new myclass();
$temp=$newmyclass->testvalue;
$newmyclass->testvalue=”a”;
27、mysql_fetch_row() 和mysql_fetch_array之间有什么区别？ (1分)
mysql_fetch_row — 从结果集中取得一行作为枚举数组
mysql_fetch_array — 从结果集中取得一行作为关联数组，或数字数组，或二者兼有
——————————————————————–
28、GD库是做什么用的？ (1分)
GD库提供了一系列用来处理图片的API，使用GD库可以处理图片，或者生成图片。
在网站上GD库通常用来生成缩略图或者用来对图片加水印或者对网站数据生成报表。
29、指出一些在PHP输入一段HTML代码的办法。(1分)
print(“<table></table>”);
30、下面哪个函数可以打开一个文件，以对文件进行读和写操作？(1分)(c)
(a) fget() (b) file_open() (c) fopen() (d) open_file()
31、下面哪个选项没有将 john 添加到users 数组中？ (1分) (c)(d)
(a) $users[] = ‘john’;
(b) array_add($users,’john’);
(c) array_push($users,‘john’);
(d) $users ||= ‘john’;
32、下面的程序会输入是否?(1分)
< ?php
$num = 10;
function multiply(){
$num = $num * 10;
}
multiply();
echo $num;
?>
否，局部变量
33、使用php写一段简单查询，查出所有姓名为“张三”的内容并打印出来 (2分)
表名User
Name Tel Content Date
张三 13333663366 大专毕业 2006-10-11
张三 13612312331 本科毕业 2006-10-15
张四 021-55665566 中专毕业 2006-10-15
请根据上面的题目完成代码：
$mysql_db=mysql_connect(“local”,”root”,”pass”);
@mysql_select_db(“DB”,$mysql_db);
$result=mysql_query(“select * from User where Name=’张三’”);
while($row=mysql_fetch_array($result))
{
echo $row['Name'].$row['Tel'].$row['Content'].$row['Date'];
echo “<br>”;
}
34、如何使用下面的类,并解释下面什么意思?(3)
class test{
function Get_test($num){
$num=md5(md5($num).”En”);
return $num;
}
}
双重md5加密
$testObject = new test();
$encryption = $testObject->Get_test(“xiaotian_ls”);
—————————————————————————-
35、写出 SQL语句的格式 : 插入，更新，删除 (4分)
表名User
Name Tel Content Date
张三 13333663366 大专毕业 2006-10-11
张三 13612312331 本科毕业 2006-10-15
张四 021-55665566 中专毕业 2006-10-15
(a) 有一新记录(小王 13254748547 高中毕业 2007-05-06)请用SQL语句新增至表中
INSERT INTO User(‘Name’,'Tel’,'Content’,'Date’) VALUES(‘小王’,’13254748547′,’高中毕业’,’2007-05-06′)
(b) 请用sql语句把张三的时间更新成为当前系统时间
UPDATE User SET Date=DATE_FORMAT(NOW(),’%Y-%m-%d’) WHERE Name=’张三’
(c) 请写出删除名为张四的全部记录
DELETE FROM User WHERE Name=’张四’
36、请写出数据类型(int char varchar datetime text)的意思; 请问varchar和char有什么区别(2分)
int 数值类型 char 固定长度字符串 varchar 可变长字符串 datetime 日期时间型 text 字符字符串
char列的长度固定为创建表时声明的长度.varchar列中的值为可变长字符串.
37、MySQ自增类型(通常为表ID字段)必需将其设为(?)字段(1分)
AUTO_INCREMENT
38、写出以下程序的输出结果 (1分)
< ?
$b=201;
$c=40;
$a=$b>$c?4:5;
echo $a;
?>
4
39、检测一个变量是否有设置的函数是否?是否为空的函数是?(2分)
isset() empty()
—————————————————————————–
40、取得查询结果集总数的函数是?(1分)
count()
41、$arr = array(‘james’, ‘tom’, ‘symfony’); 请打印出第一个元素的值 (1分)
echo $arr[0];
42、请将41题的数组的值用’,'号分隔并合并成字串输出(1分)
echo $arr[0].$arr[1].$arr[2]
43、$a = ‘abcdef’; 请取出$a的值并打印出第一个字母(1分)
echo $a{0};
44、PHP可以和sql server/oracle等数据库连接吗?(1分)
可以
45、请写出PHP5权限控制修饰符(3分)
private protected public
46、请写出php5的构造函数和析构函数(2分)
__construct __destruct
——————————————————————————
47、以下请用PHPMYADMIN完成
(一)创建新闻发布系统，表名为message有如下字段 (3分)
id 文章id
title 文章标题
content 文章内容
category_id 文章分类id
hits 点击量
CREATE TABLE ‘message’(
‘id’ int(11) NOT NULL auto_increment,
‘title’ varchar(200) default NULL,
‘content’ blob,
‘category_id’ int(11) default NULL,
‘hits’ int(11) default NULL,
PRIMARY KEY(‘id’)
) ENGINE=InnoDB DEFAULT CHARSET=utf8
(二)同样上述新闻发布系统：表comment记录用户回复内容，字段如下 (4分)
comment_id 回复id
id 文章id，关联message表中的id
comment_content 回复内容
现通过查询数据库需要得到以下格式的文章标题列表,并按照回复数量排序，回复最高的排在最前面
文章id 文章标题点击量回复数量
用一个SQL语句完成上述查询，如果文章没有回复则回复数量显示为0
SELECT message.id id,message.title title,IF(message.`hits` IS NULL,0,message.`hits`) hits,IF(comment.`id` is NULL,0,count(*)) number
FROM message LEFT JOIN comment ON message.id=comment.id
GROUP BY message.`id`
(三)上述内容管理系统，表category保存分类信息，字段如下 (3分)
category_id int(4) not null auto_increment;
categroy_name varchar(40) not null;
用户输入文章时，通过选择下拉菜单选定文章分类
写出如何实现这个下拉菜单
function categoryList()
{
$result=mysql_query(“select category_id,categroy_name from category”)
or die(“Invalid query: ” . mysql_error());
print(“<select name=’category’ value=”>\n”);
while($rowArray=mysql_fetch_array($result))
{
print(“<option value=’”.$rowArray['category_id'].”‘>”.$rowArray['categroy_name'].”</option>\n”);
}
print(“</select>”);
} [HTML && CSS]
1. Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?
Doctype声明位于文档中的最前面的位置，处于标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。该标签可声明三种DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
当浏览器厂商开始创建与标准兼容的浏览器时，他们希望确保向后兼容性。为了实现这一点，他们创建了两种呈现模式：标准模式和混杂模式（quirks mode）。在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器（比如Microsoft IE 4和Netscape Navigator 4）的行为以防止老站点无法工作。
浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法。如果XHTML文档包含形式完整的DOCTYPE，那么它一般以标准模式呈现。对于HTML 4.01文档，包含严格DTD的DOCTYPE常常导致页面以标准模式呈现。包含过渡DTD和URI的DOCTYPE也导致页面以标准模式呈现，但是有过渡DTD而没有URI会导致页面以混杂模式呈现。DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。
2. 行内元素有哪些？块级元素有哪些？CSS的盒模型？
行内元素有：a b span I b em img input select strong
块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
盒模型：margin border padding width
3. CSS引入的方式有哪些? link和@import的区别是?
1. 使用 LINK标签
将样式规则写在.css的样式文件中，再以<link>标签引入。
<link rel=stylesheet type=”text/css” href=”example.css”>
2. 使用@import引入
跟link方法很像，但必须放在<STYLE>…</STYLE> 中
<STYLE TYPE=”text/css”>
< !–
@import url(css/example.css);
–>
< /STYLE>
3. 使用STYLE标签
将样式规则写在<STYLE>…</STYLE>标签之中。
<STYLE TYPE=”text/css”>
< !–
body {color: #666;background: #f0f0f0;font-size: 12px;}
td,p {color:#c00;font-size: 12px;}
–>
< /STYLE>
4. 使用STYLE属性
将STYLE属性直接加在个别的元件标签里，<元件(标签) STYLE=”性质(属性)1: 设定值1; 性质(属性)2: 设定值2; …}
5. 使用<span></span>标记引入样式
<span style=”font:12px/20px #000000;”>cnwebshow.com</span>
两者区别：加载顺序的差别。当一个页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。@import可以在css中再次引入其他样式表，比如可以创建一个主样式表，在主样式表中再引入其他的样式表，如：
main.css
———————-
@import “sub1.css”;
@import “sub2.css”;
这样做有一个缺点，会对网站服务器产生过多的HTTP请求，以前是一个文件，而现在却是两个或更多文件了，服务器的压力增大，浏览量大的网站还是谨慎使用。
4. CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？内联和important哪个优先级高？
 通配选择符* { sRules }
 类型选择符E { sRules }
td { font-size:14px; width:120px; }
 属性选择符
E [ attr ] { sRules }
E [ attr = value ] { sRules }
E [ attr ~= value ] { sRules }
E [ attr |= value ] { sRules }
h[title] { color: blue; }/* 所有具有title属性的h对象 */
span[class=demo] { color: red; }
div[speed="fast"][dorun="no"] { color: red; }
a[rel~="copyright"] { color:black; }
 包含选择符E1 E2 { sRules }
table td { font-size:14px; }
 子对象选择符E1 > E2 { sRules }
div ul>li p { font-size:14px; }
 ID选择符 #ID { sRules }
 类选择符E.className { sRules }
 选择符分组
E1 , E2 , E3 { sRules }
 伪类及伪对象选择符
E : Pseudo-Classes { sRules }
( Pseudo-Classes )[:link :hover :active :visited :focus :first-child :first :left :right :lang]
E : Pseudo-Elements { sRules }
( Pseudo-Elements )[:first-letter :first-line :before :after]
可以继承的有：font-size font-family color
不可继承的一般有：border padding margin background-color width height等
============================
关于CSS specificity
CSS 的specificity 特性或称非凡性，它是衡量一个衡量CSS值优先级的一个标准，既然作为标准，就具有一套相关的判定规定及计算方式，specificity用一个四位的数字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。
在多个选择符应用于同一个元素上那么Specificity值高的最终获得优先级。
选择符Specificity值列表：
规则：
1. 行内样式优先级Specificity值为1,0,0,0，高于外部定义。
如：<div style=”color: red”>sjweb</div>
外部定义指经由<link>或<style>标签定义的规则；
2.!important声明的Specificity值最高；
3.Specificity值一样的情况下，按CSS代码中出现的顺序决定，后者CSS样式居上；
4.由继续而得到的样式没有specificity的计算，它低于一切其他规则(比如全局选择符*定义的规则)。
算法：
当遇到多个选择符同时出现时候
按选择符得到的Specificity值逐位相加，
{数位之间没有进制比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0}
就得到最终计算得的specificity，
然后在比较取舍时按照从左到右的顺序逐位比较。
实例分析：
1.div { font-size:12px;}
分析：
1个元素{ div}，Specificity值为0,0,0,1
2.body div p{color: green;}
分析：
3个元素{ body div p }，Specificity值为0,0,0,3
3.div .sjweb{ font-size:12px;}
分析：
1个元素{ div }，Specificity值为0,0,0,1
1个类选择符{.sjweb}，Specificity值为0,0,1, 0
最终：Specificity值为 0,0,1,1
4.Div # sjweb { font-size:12px;}
分析：
1个元素{ div }，Specificity值为0,0,0,1
1个类选择符{.sjweb}，Specificity值为0,1,0, 0
最终：Specificity值为 0,1,0,1
5.html > body div [id=”totals”] ul li > p {color:red;}
分析：
6个元素{ html body div ul li p} Specificity值为0,0,0,6
1个属性选择符{ [id=”totals”] } Specificity值为0,0,1,0
2个其他选择符{ > > } Specificity值为0,0,0,0
最终：Specificity值为 0,0,1,6
!important 的优先级最高
使用!important可以改变优先级别为最高，其次是style对象，然后是id > class >tag ，另外在同级样式按照申明的顺序后出现的样式具有高优先级。
5. 前端页面由哪三层构成，分别是什么？作用是什么？
网页分成三个层次，即：结构层、表示层、行为层。
网页的结构层（structural layer）由 HTML 或 XHTML 之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。”
网页的表示层（presentation layer）由 CSS 负责创建。 CSS 对“如何显示有关内容”的问题做出了回答。
网页的行为层（behavior layer）负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。
6. css的基本语句构成是？
选择器{属性1:值1;属性2:值2;……}
7. 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些？怎么会出现？解决方法是什么？
IE内核浏览器：360，傲游，搜狗，世界之窗，腾讯TT
非IE内核浏览器：firefox opera safari chrome
1.就是ie6双倍边距的问题，在使用了float的情况下，不管是向左还是向右都会出现双倍，最简单的解决方法就是用display:inline;加到css里面去。
2.文字本身的大小不兼容。同样是font-size:14px的宋体文字，在不同浏览器下占的空间是不一样的，ie下实际占高16px，下留白3px，ff下实际占高17px，上留白1px，下留白3px，opera下就更不一样了。解决方案：给文字设定 line-height 。确保所有文字都有默认的 line-height 值。这点很重要，在高度上我们不能容忍1px 的差异。
3. ff下容器高度限定，即容器定义了height之后，容器边框的外形就确定了，不会被内容撑大，而ie下是会被内容撑大，高度限定失效。所以不要轻易给容器定义height。
4. 还讨论内容撑破容器问题，横向上的。如果float 容器未定义宽度，ff下内容会尽可能撑开容器宽度，ie下则会优先考虑内容折行。故，内容可能撑破的浮动容器需要定义width。
5. 浮动的清除，ff下不清除浮动是不行的。
6. mirrormargin bug，当外层元素内有float元素时，外层元素如定义margin-top:14px，将自动生成margin-bottom:14px。padding也会出现类似问题，都是ie6下的特产，该类bug 出现的情况较为复杂，远不只这一种出现条件，还没系统整理。解决方案：外层元素设定border 或设定float。
7. 吞吃现象，限于篇幅，我就不展开了。还是ie6，上下两个div，上面的div设置背景，却发现下面没有设置背景的div 也有了背景，这就是吞吃现象。对应上面的背景吞吃现象，还有滚动下边框缺失的现象。解决方案：使用zoom:1。这个zoom好象是专门为解决ie6 bug而生的。
8. 注释也能产生bug~~~“多出来的一只猪。”这是前人总结这个bug使用的文案，ie6的这个bug 下，大家会在页面看到猪字出现两遍，重复的内容量因注释的多少而变。解决方案：用“<!–[if !IE]> picRotate start <![endif]–>”方法写注释。
9. <li/>里加 float <div/>，这是一个典型的，棘手的兼容问题，希望引起大家正视，给li 不同的属性会有不同的解释效果，ff下的解释稍可理解，ie6下的解释会让你摸不着头脑，由于问题的复杂性，将另起一文专门讨论该问题。在《ul使用心得》一文里有相关成果，却没给出问题解决的过程。
10. img下的留白。解决方案：给img设定 display:block。
11. 失去line-height。<div style=”line-height:20px”><img />文字</div>，很遗憾，在ie6下单行文字 line-height 效果消失了。。。，原因是<img />这个inline-block元素和inline元素写在一起了。解决方案：让img 和文字都 float起来。
12. 链接的hover状态。a:hover img{width:300px} 我们想让鼠标hover时，链接里包含的图片宽度变化，可惜在ie6下无效，ie7、ff下有效。
13. 非链接的hover状态。div:hover{} 这样的样式ie6是不认的，在ie7、ff下才有效果。
14. ie下overflow:hidden对其下的绝对层position:absolute或者相对层position:relative无效。解决方案：给overflow:hidden加position:relative或者position:absolute。另，ie6支持overflow-x或者overflow-y的特性，ie7、ff不支持。
15. ie6下严重的bug，float元素如没定义宽度，内部如有div定义了height或zoom:1，这个div就会占满一整行，即使你给了宽度。float元素如果作为布局用或复杂的容器，都要给个宽度的。
16. ie6下的bug，绝对定位的div下包含相对定位的div，如果给内层相对定位的div高度height具体值，内层相对层将具有100%的width值，外层绝对层将被撑大。解决方案给内层相对层float属性。
17. ie6下的bug，<head></head>内有<base target=”_blank”/>的情况下，position:relative层下的float层内文字无法选中。
18. 终于来了个ff的缺点。width:100%这个东西在ie里用很方便，会向上逐层搜索width值，忽视浮动层的影响，ff下搜索至浮动层结束，如此，只能给中间的所有浮动层加width:100%才行，累啊。opera这点倒学乖了跟了ie。
8. 如何居中一个浮动元素?
设置容器的浮动方式为相对定位，然后确定容器的宽高，比如宽500 高 300 的层，然后设置层的外边距。
div{Width:500px;height:300px;Margin: -150px 0 0 -250px;position:relative;left:50%;top:50%;}
9. 有没有关注HTML5和CSS3?如有请简单说一些您对它们的了解情况！
HTML5标签的改变：<header>, <footer>, <dialog>, <aside>, <figure>, <section> 等
IE9以上开始支持
CSS3实现圆角，阴影，对文字加特效，增加了更多的CSS选择器。
10. 如果让你来制作一个访问量很高的大型网站，你会如何来管理所有CSS文件、JS与图片？
11. 你对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？

.clear {clear: both;display: block;overflow: hidden;visibility: hidden;width: 0;height: 0;}
.clearfix:after {clear: both;content: ‘.’;display: block;visibility: hidden;height: 0;}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
.clearfix{*zoom:1;}.clearfix:after{content:’\20′;display:block;height:0;clear:both;}
.clearfix:after{content:”.”;display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-block;}/* Hides from IE-mac \*/
* html .clearfix{height:1%;}
.clearfix{display:block;}/* End hide from IE-mac */
这个clearfix的CSS使用了after这个伪对象，它将在应用clearfix的元素的结尾添加content中的内容。在这里添加了一个句号”.”，并且把它的display设置成block；高度设为0；clear设为both；visibility设为隐藏。这样就达到了撑开容器的目的。要让IE也完美显示，则必须在clearfix这个CSS定义的后面加上一些专门为IE设定的HACK。

分享到：