Web测试工具WAS使用方法

1、Web测试工具WAS认识实验一、实验目的1、了解WAS服务器负载测试软件的安装过程，进行安装实验。2、了解WAS服务器负载测试软件的用途和简单的操作。3、掌握WAS服务器负载测试软件测试过程。4、能够使用WAS服务器负载测试软件进行简单的测试工作。二、实验环境操作系统：windows 2000 Pro + SP4应用系统：WAS服务器负载测试软件三、实验过程随着网络服务器端处理任务的日益复杂，以及网站访问量的迅速增长，服务器性能的优化已成为非常迫切的任务。在性能优化之前，测试不同条件下服务器的性能表现，并找出影响性能瓶颈所在，将是Web设计性能改善方案的重要依据。在构造一个Intranet 网

2、站时，负载测试是任何Web 应用开发周期中一个重要的环节。在构造一个为大量用户服务的应用之前，搞清楚产品配置能够承受多大的负载十分重要，测试能够暴露出最终会导致服务器崩溃的内存泄漏、访问阻塞等情况。但是在实际的构建过程中，若要按照系统真实运行的情况，组织成千上万的用户来进行压力测试，无论从那个方面进行实施，都是不现实的。因为一旦发现了问题，不仅需要重复的进行这种耗费资源巨大的测试，而且问题并一定能够重现，并不能方便的找出性能的瓶颈或问题所在。解决这个问题的办法是通过使用软件的办法解决，通过进行软件模拟的方法进行，这就是负载的压力测试。无论哪种情形，对运用软件进行负载测试可以获得重要的基准性能数

3、据，为未来的代码优化、硬件配置以及系统软件、硬件更新与升级带来依据和提供数据。1 Web服务器负载测试软件介绍WAS（Microsoft Web Application Stress Tool，Web 应用负载测试工具）提供了一种简单的方法模拟大量用户进行访问目标网站。这个测试工具能够提供Web 应用程序工作时对硬件和软件的使用情况。为了有效的对Web 应用程序进行负载（压力）测试，Microsoft 发布了简单易用，功能强大的工具WAS。WAS 要求具备的操作系统必须是 Windows NT 4.0 SP4 或者Windows 2000 Server， Internet Explorer 4

4、.0 以上版本。为了对网站进行负载测试，WAS 可以通过一台或者多台客户机模拟大量用户访问Web网站的活动。WAS 支持身份验证、加密和Cookies，也能够模拟各种浏览器类型和Modem 速度，它的测试功能和性能表现良好。使用WAS时，为了更加接近真实的进行压力测试，通常推荐运行WAS的测试机和Web服务器分开。2 Web Application Stress Tool的设置及其操作21 主界面窗口 第一次安装完WAS后，可在本机操作系统（以Windows 2000 Server为例）中找到主界面，通过单击执行，其步骤是：开始-程序-Microsoft Web Application Str

5、ess Tool。第一次执行时会出现一个Create new script 的界面。22 制作生成脚本1开始使用WAS要对网站进行负载测试首先必须创建WAS 脚本模拟用户的活动。可以用下面四种方法之一创建脚本：通过记录浏览器的活动。通过导入IIS 日志。通过把WAS 指向Web 网站的内容。手工制作。这里通过最常用的方法通过记录浏览器的活动来讲解。其他三种方法在后面将会提到。图1 简单的Script（脚本）界面2录制测试脚本在录制测试脚本前，需要首先关闭IE 的缓冲区。（1）在工具菜单，点Internet 选项（2）点常规标签，然后点删除文件按钮。如果使用IE5.0 或以上版本则不需要修改代理

6、设置，因为5.0 以上版本的IE 允许WAS改变这些设置。而对于IE4.0 或早期版本，WAS 使用一个内置的代理服务器来记录浏览器活动。按WAS 的需要指定代理设置:在工具菜单，点Internet 选项。在连接标签里，修改代理设置以使代理服务器指向Localhost，并且使用端口8000。不选“对于本地地址不使用代理服务器”选项。打开菜单，选择Scripts|Create|Record 创建一个测试脚本。选取要记录的内容，有下面3 种。图2Record delay between request：记录了请求之间的延迟。由于用户实际上在浏览网站时，对于请求之间存在几秒甚至几分钟的延迟，这种录制

7、方法在执行时会模仿用户之间的延迟发送请求，所以会是一个更加实际的测试。如果测试的目的是要发现Web 应用程序的承受极限，就不要选择该项；如果只是想模拟一个特定数量的用户场景，那么选择该项进行测试捕捉请求延迟。Record browser cookies & Record the host header：只记录用户的会话，不记录延迟时间。一般情况下，不需要选择这两项，可以让WAS 创建cookies 和host header，这就如同用户登录某个网站一样。然而，如果有网站的回归信息时（比如一个用户的主要特征信息或者与一个永久性cookies 相连的其他信息），在模拟一个新的用户登录网站和进行必要

8、的用户配置测试前 ，必须保证清除cookies，如果Web 应用程序需要用户接受cookies，那么需要选中该选项。目前这个版本的WAS 软件对基于浏览器IE录制脚本的方式还不支持HTTP/SSL 请求。一般情况下，只选择后二种会增加压力的强度。根据压力测试实际的情况，选择合适的选项，然后点“Next | Finish”，WAS会打开一个IE窗口，在IE中输入要测试的站点地址，然后就可以按照实际的情况开始浏览站点了，浏览的同时也就是执行测试用例的过程。图3 测试前确定站点地址等测试用例执行完成后，切换到WAS窗口，点“Stop Recording:”按钮，停止录制脚本。图4 录制结果WAS 回

9、到了视图页面，在该页面中可以看到在录制过程中WAS 收集的每一个链接，并且还可编辑GET、POST 以及HEAD 信息。制作WAS 脚本较为简单，但要制作出模拟真实用户活动的脚本有些复杂。如果已经有一个运行的Web 网站，可以使用Web 服务器的日志来确定Web 网站上的用户点击分布。如果应用还没有开始运行，那么只好根据经验作一些猜测了。图5 使用Web服务器日志来确定Web 网站上的用户点击分布3 负载参数设置测试脚本录制完成后，下一步要作的就是配置运行脚本的负载选项，可以调整测试配置以便观察不同条件下的应用性能。3.1 目录树（Content Tree）由于WAS 和 Web Server

10、 是分开的，所以这里不需要进行设置。3. 2 负载选项的设置（Setting）点击“Setting”即可开始负载选项的设置。1. ConCurrent ConnectionsStress Level（threads）的数值决定了所有客户机创建的Windows 的线程的数值。每一个线程创建多个Socket 连接（具体多少Socket 连接数取决于Stress multiplier(sockets per thread)），每个Socket 连接就是一个并发的请求(request)。图6 创建多个Socket 连接下面这个公式表示了它们之间的关系：总的并发请求数 = Stress Level *

11、Stress multiplier = 总的Socket 连接数Stress Level 和Stress multiplier 这二项决定了访问服务器的并发连接的数量。Microsoft 建议不要选择超过100 的Stress Level 值。如果要模拟的并发连接数量超过100 个，可以调整Stress multiplier 或使用多个客户机。在负载测试期间WAS将通过DCOM 与其他客户机协调。2. Test Run Time设定持续运行多长时间的测试。可以设定让WAS 持续运行多少天、多少个小时、多少分钟、多少秒。3. Request Delay（in milliseconds）设定请求延

12、迟时间的最大、最小值，当然也可以选择“Use random delay”使用随机的延迟时间。一般情况下，常常会浏览一页，发现一个链接后，点击它。即使是对该网站熟悉的人，4. SuspendWAS 允许设置warmup（热身）的时间，一般可以设置为1 分钟。在热身期间WAS 开始执行脚本，但不收集统计数据。热身时间给MTS、数据库以及磁盘缓冲等一个机会来做准备工作。如果在热身时间内收集统计数据，这些操作的开销将影响性能测试结果。WAS 也允许设置CoolDown 时间。在WAS 执行的时间达到设定的Test Run Time 时，进入CoolDown Time，这时WAS 并没有停止执行脚本，同

13、样也不会收集统计数据。下图表示了它们的先后关系。图7 WAS进行工作的三个阶段WarmUp：不收集统计数据Test Run Time：收集统计数据CoolDown：不收集统计数据5. Bandwith （带宽）设置页面提供的另外一个有用的功能是限制带宽（throttle bandwidth）。带宽限制功能能够为测试模拟出Modem（14.k K，28.8 K，56 K）、ISDN（64 K，128 K）以及T1（1.54 M）的速度。使用带宽限制功能可以精确地预测出客户通过拨号网络或其他外部连接访问Web 服务器所感受的性能。6. Redirects、Throughput、Name resol

14、ution这几个选项一般情况下采用默认情况即可。选中Follow HTTP redirects 选项将会支持重定向。选中Throughput 中的两项，WAS 将会收集活动用户的cookies，以及收集网站的统计数字。默认情况下都会选中这两项，如果不选择，将会增加压力测试的强度。Name resolution 默认情况下没有选中。选中该选项，会让每一个客户测试机执行查询，只有在使用多个子网时才需要选中该项。3.3 Perf Counters（性能计数器）使用WAS，从远程Windows NT 和Windows 2000 机器获取和分析性能计数器（Performance Counter）是很方便

15、的。加入计数器要用到下图所示的Perf Counters 分枝。图8 Perf Counters 分枝一般情况下，这里需要添加的性能计数器有：1 Web Server 处理器：CPU 使用百分比（% CPU Utilization） 内存：内存使用百分比（% Memory Utilization） 线程：每秒的上下文切换次数（Context Switches Per Second (Total)） ASP：每秒请求数量（Requests Per Second） ASP：请求执行时间（Request Execution Time） ASP：请求等待时间（Request Wait Time） AS

16、P：置入队列的请求数量（Requests Queued）2 各个WAS 测试机 处理器：CPU 使用百分比（% CPU Utilization） 内存：内存使用百分比（% Memory Utilization）在测试中选择哪些计数器显然跟测试目的有关。虽然下面这个清单不可能精确地隔离出性能瓶颈所在，但对一般的Web 服务器性能测试来说却是好的开始。 处理器：CPU 使用百分比（% CPU Utilization） 线程：每秒的上下文切换次数（Context Switches Per Second (Total)） ASP：每秒请求数量（Requests Per Second） ASP：请求执行

17、时间（Request Execution Time） ASP：请求等待时间（Request Wait Time） ASP：置入队列的请求数量（Requests Queued）CPU 使用百分比反映了处理器开销。CPU 使用百分比持续地超过75%是性能瓶颈在于处理器的一个明显的迹象；每秒上下文切换次数指示了处理器的工作效率。如果处理器陷于每秒数千次的上下文切换，说明它忙于切换线程而不是处理ASP 脚本。每秒的ASP 请求数量、执行时间以及等待时间在各种测试情形下都是非常重要的监测项目。每秒的请求数量表明每秒内服务器成功处理的ASP 请求数量。执行时间和等待时间之和显示了反应时间，这是服务器用处理

18、好的页面作应答所需要的时间。可以绘出随着测试中并发用户数量的增加每秒请求数量和反应时间的变化图。增加并发用户数量时每秒请求数量也会增加。然而，最终会达到这样一个点，此时并发用户数量开始“压倒”服务器。如果继续增加并发用户数量，每秒请求数量开始下降，而反应时间则会增加。要搞清楚硬件和软件的能力，找出这个并发用户数量开始“压倒”服务器的临界点非常重要。置入队列的ASP 请求数量也是一个重要的指标。如果在测试中这个数量有波动，某个COM 对象所接收到的请求数量超过了它的处理能力。这可能是因为在应用的中间层使用了一个低效率的组件，或者在ASP 会话对象中存储了一个单线程的单元组件。运行WAS 的客户机

19、CPU 使用率也需要监视。如果这些机器上的CPU 使用率持续地超过75%，说明客户机没有足够的资源来正确地运行测试，此时应该认为测试结果不可信。在这种情况下，测试客户机的数量必须增加，或者减小测试的Stress Level。3.4 Page Groups对于一个Web 应用而言，同一时刻用户点击的分布是不一样的。WAS 允许设置用户点击流量的分布比例。图9 用户点击流量的分布比例这里假设在一个Web 应用程序中，有650 个人同时在线，其中100 人正在添加提交数据，占15.38%；有150 人正在查询，占23.08%。按照不同的Web 应用，可以根据实际的情况再定制这个比例关系，来更加符合实

20、际的情况。3.5 Users（用户）现在很多Web 应用程序为了提供个性化的服务，都设计了登录过程。每个用户都有自己的登录名和密码。WAS 考虑到这种情况，只要在Users 分支中添加用户名和对应的密码即可。图10 用户登录界面3.6 Clients（客户）添加多个WAS 客户机。在运行期间，各个WAS 客户机是通过DCOM 来协调的。各个WAS 客户机只要正确安装了WAS 软件，启动了WebTool 服务，它们就可以自己协调操作。只要在Clients 分支内添加WAS 客户机即可。图11 添加WAS 客户机3.7 Cookies这里显示的是用户名以及对应的cookies。这里不需要设置。4

21、运行测试脚本所有的设置完成以后，就可以运行WAS 来进行压力测试了。要运行测试脚本很简单，只要选中测试脚本的名称，然后点击工具栏上的“运行”按钮，即可。建议第一次运行测试脚本时，Test Run Time 不要太长，Stress Level 以及Stress multiplier 不要太大，因为，第一次运行的目的只是为了检验测试脚本正确的运行。图12 运行测试脚本5 测试结果每次测试运行结束后，WAS 会生成详细的报表，即使测试被提前停止也一样。WAS 报表可以从View 菜单选择Reports 查看。下面介绍报表中几个重要的部分。5.1 摘要页面摘要部分提供了页面的名字，接收到第一个字节的平

22、均时间（TTFB），接收到最后一个字节的平均时间（TTLB），以及测试脚本中各个页面的命中次数。TTFB 和TTLB 这两个值对于计算客户端所看到的服务器性能具有重要意义。TTFB 反映了从发出页面请求到接收到应答数据第一个字节的时间总和（以毫秒计），TTLB 包含了TTFB，它是客户机接收到页面最后一个字节所需要的累计时间。只要选中页面的名字，即可显示页面摘要。图13 页面摘要5.2 Result Codes（结果代码）如果是一个新创建的测试脚本，应该检查一下报表的Result Codes 部分。这部分内容包含了请求结果代码、说明以及服务器返回的结果代码的数量。如果这里出现了404代码（页面

23、没有找到），说明在脚本中有错误的页面请求。具体的错误代码表示的意义，可以参考IIS 的说明文档。图14 测试结果代码5.3 Perf Counters（性能统计）报表中还包含了所有性能计数器的信息。这些数据显示了运行时各个项目的测量值，同时还提供了最大值、最小值、平均值等。报表实际提供的信息远远超过了这里介绍的内容。5.4 Script Settings（脚本设置）这里显示的是运行本次测试时的设置，也就是前面讲到的Setting 部分的内容。图15 运行本次测试时的设置5.5 Test Clients（测试客户机）这里显示的是各个WAS 客户机的情况。先总体说明在测试中使用了那些WAS 客户机

24、，在使用的WAS 客户机中显示。执行了多少线程。模拟了多少用户。点击的次数。连接失败的次数。图16 测试客户机5. 6 Page Summary （页面概要）显示了在测试中各个请求内容的TTFB 和TTLB，以及点击的次数等信息。具体的说明已经包含在上面的摘要中了。5.7 Page Groups （页面组）显示不同的用户组在测试中的执行情况。这里提供的信息包括用户组的分布情况，以及在所有用户组中所占的比例。点击的次数，以及在所有点击次数中所占的比例。Result Codes 情况。Socket 连接的信息。图17 用户组在测试中的执行情况5.8 Page Data（页面数据）显示了各个请求内容

25、的更加详细的信息。一般技术需求中的运行效率信息可以在这里验证。 6 其他方式编写测试脚本前边提到，编写测试脚本有4 种方法，现在对其他三种方法进行简单的介绍。6.1 手动编写测试脚本打开菜单，选择Scripts|Create|Manual 手动创建一个测试脚本,然后出现了NewScript，server中输入要进行测试的服务器IP 地址或计算机名称；在脚本的内容表格中verb项选择脚本运行方式 get、post、head；path中输入向服务器提交的文件或字符串。图18 手动创建测试脚本图19 手动创建测试脚本参数设置6.2 导入IIS 日志这种方法适合于开始投入运行的Web 应用程序。IIS

26、 日志记录了用户访问系统的所有信息。通过导入IIS 日志的方法建立的测试脚本，是最符合实际运行情况的方法。如果有IIS日志，推荐使用这种方法。图20 导入IIS日志的方法建立测试脚本这种方法也比较简单。打开菜单，选择Scripts|Create|Log 导入IISs 日志创建一个测试脚本。然后出现导入IIS 日志的第一步，选择IIS 日志的路径，默认情况下的路径如图所示。图21 选择IIS 日志的路径（1）Next 进入第二步，一般情况下不用做改动，取默认即可。图22 选择IIS日志的路径（2）点击Finish后，WAS 自动生成脚本。6.3 导入网站内容文件这种方法通过导入网站上具体的文件来

27、生成测试脚本。一般情况下，不推荐使用这种方法。下面简单说明这种方法的使用。打开菜单，选择Scripts|Create|Contents ，WAS 自动新建一个测试脚本，并且切换到Contents Tree 节点。图23 导入网站内容文件然后回到New Script 的主页面，会看到选择的内容文件自动添加到表格中。图24 选择的内容文件自动添加到表格中7 设计测试方案时的一些注意点 7.1 大规模测试时需要大量WAS 客户端为了充分利用资源，可以在项目组每个人的机器上都安装WAS 软件（只要正确安装，启动WebTool 服务即可）。这样在测试时，WAS 会自动协调，自动分配线程。 7.2 系统中

28、有很多的角色虽然WAS 可以将不同角色执行请求的顺序进行混合，但是不知道WAS是如何混合的，因此不能随时控制角色的状态。建议将不同的角色分组，每个角色放到一个WAS 测试机（充当控制器）上，这样可以分角色而又集中的对Web Server 进行压力测试，同时又能随意的控制各个WAS 客户机的状态。这种思想是模仿Load Runner 软件，具体实施还需要不断的学习和实验。73 测试的顺序在集成测试时，先注重性能方面的测试，逐步的加压，寻找Web Server 的最大负载量。进而对照技术需求，不断改进。WAS 首先是性能测试工具，然后才是压力测试工具。具体测试时，可以先在正常的条件下（满足技术需求

29、）进行性能测试，然后才是异常情况（增加压力到技术需求规定的1.5-2 倍）的测试。74 利用WAS 更深入地了解应用不断的研究学习，利用WAS 更深入地了解应用的性能、稳定性、瓶颈和局限性。8 使用WAS 的优势和不足8.1 使用WAS 的优势首先，讨论使用WAS 测试应用程序的好处。1简单WAS 允许以不同的方式创建测试脚本：你可以通过使用浏览器走一遍站点来录制脚本，可以从服务器的日志文件导入URL，或者从一个网络内容文件夹选择一个文件。当然，也可以手工地输入URL 来创建一个新的测试脚本。不像其它的工具，你可以使用任何数量的客户端运行测试脚本，全部都有一个中央主客户端来控制。在每一个测试开

30、始前，主客户机透明地执行以下任务：与其他所有的客户机通讯。把测试数据分发给所有的客户端。在所有客户端同时初始化测试。从所有的客户端收集测试结果和报告。这个特性非常重要，尤其对于要测试一个需要使用很多客户端的服务器群的最大吞吐量时非常有用。2高可用性WAS 是被设计用于模拟Web 浏览器发送请求到任何采用了HTTP1.0 或1.1 标准的服务器，而不考虑服务器运行的平台。除了它的易用性外，WAS 还有很多其它的有用的特性，包括：对于需要署名登录的网站，它允许创建用户帐号。允许为每个用户存储cookies 和Active Server Pages (ASP) 的session 信息。支持随机的或顺

31、序的数据集，以用在特定的名字-值对。支持带宽调节和随机延迟（“思考的时间”）以更真实地模拟显示情形。支持Secure Sockets Layer (SSL)协议。允许URL 分组和对每组的点击率的说明。 提供一个对象模型，可以通过Microsoft Visual Basic Scripting Edition (VBScript)处理或者通过定制编程来达到开启，结束和配置测试脚本的效果。82 使用WAS 的缺陷和不足除了优势外，WAS 的确也有一些缺陷和不足，当前知道的bug 和有关事项都以列在WAS 的网站上了。以下是当前WAS 不支持的特性：以前面所发请求返回的结果为基础，修改URL 参数

32、的能力。运行或模仿客户端逻辑的能力。为所分配的测试指定一个确定数量的测试周期的能力。对拥有不同IP 地址或域名的多个服务器的同时测试能力。支持页面在不同IP 地址或域名间的重定向的能力。从Web 浏览器直接记录SSL页面的能力。 WSA 已经支持SSL 页面的测试，但是没有记录它们。需要在脚本录制完后，手工地为每个设计好的URL 打开SSL 支持.虽然对这些限制有一些相应的解决办法，但如果应用依赖一个或多个这样的功能的话，不能完全实现WAS 带来的优点。四、实验要求1、做好实验预习，掌握，并熟悉本实验中所使用的测试环境及相应的测试软件。2、写出实验报告，内容是： 实验目的 。 实验内容 实验源

33、代码（或测试脚本）可不写出，但是一定要写出实验中出现的错误，以及解决错误的方法。 出错信息及处理方法。 实验结果 包括实验处理结果和设计心得。 五、注意事项 1、观察每一个项目的处理结果以及出错信息，并作记录。 2、注意对服务器和测试机的性能、网络性能的监控。附录资料：web前端面试题1. W3C标准有哪些？W3C推行的主要规范有HTML，CSS，XML，XHTML和DOM（Document Object Model）。2. 谈谈Js的内存泄露问题。3. 谈谈对Html 5的了解。4. 谈谈对CSS 3的了解。5. 用js实现随即选取10-100之间的10个数字，存入一个数组，并排序。var

34、iArray = ;funtion getRandom(istart, iend) var iChoice = istart - iend +1; return Math.floor(Math.random() * iChoice + istart;for(var i=0; i10; i+) iArray.push(getRandom(10,100);iArray.sort();6. 把两个数组合并，并删除第二个元素。var array1 = a,b,c;var bArray = d,e,f;var cArray = array1.concat(bArray);cArray.splice(1,

35、1);7. Js面向对象的几种方式。8. 请谈谈原型方式构造对象的特点。9. 在Css中那个属性会影响dom读取文档流的顺序。答： float属性。10. 请介绍几种用div实现两列布局的方案（兼容），另外要考虑文档流的加载。11. 谈谈css在浏览器中的兼容问题，详细谈谈IE6的一些bug,以及解决方案。12. 谈谈你对闭包的理解。以及如何实现js方法的重写。HTML & CSS1.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义? 首先我讲讲如何触发两种模式： 加入xml头部声明可以触发IE浏览器的Quirks mode，触发之后，浏览器解析方式就和IE5.5一样

36、，拥有IE5.5一样的bug和其他问题，行为（Javascript）也是如此。 IE6的触发 在XHTML的DOCTYPE前加入XML声明 IE7的触发 在XML声明和XHTML的DOCTYPE之间加入HTML注释 IE6和IE7都可以触发的 在HTML4.01的DOCTYPE文档头部加入HTML注释 其次是这样的意义 各个浏览器的混杂模式，基本就是各个浏览器的私有模式，不相互兼容。所以，除非是为了兼容的问题，比如你不想修改很久很久以前做的IE ONLY的网页，否则刻意触发混杂模式没有任何意义。2：行内元素有哪些？块级元素有哪些？CSS的盒模型？一.行内元素和块级元素有哪些？块级元素infor

37、mation on authorlong quotationpush buttontable captiondefinition descriptiondeleted textgeneric language/style containerdefinition listdefinition termform control groupinteractive formheadingheadingheadingheadingheadingheadinghorizontal ruleinline subwindowinserted textfieldset legendlist itemclient

38、-side image mapalternate content container for non frame-based renderingalternate content container for non script-based renderinggeneric embedded objectordered listparagraphpreformatted texttabletable bodytable data celltable footertable header celltable headertable rowunordered list行内元素anchorabbre

39、viated formacronymbold text styleI18N BiDi over-ridelarge text styleforced line breakpush buttoncitationcomputer code fragmentdeleted textinstance definitionemphasisitalic text styleinline subwindowEmbedded imageform controlinserted texttext to be entered by the userform field label textclient-side

40、image mapgeneric embedded objectshort inline quotationsample program output, scripts, etc.option selectorsmall text stylegeneric language/style containerstrong emphasissubscriptsuperscriptmulti-line text fieldteletype or monospaced text styleinstance of a variable or program argument二.行内元素与块级元素有什么不同

41、？1.尺寸-块级元素和行内元素之间的一个重要的不同点行内元素和widthW3C CSS2 标准规定行内元素、非置换元素不会应用width属性。以下例子中，对行内元素应用了width:200px,你可以看到，根本就没有什么效果。行内元素和heightW3C CSS2 标准规定行内元素、非置换元素不会应用height属性，但是盒子高度可以通过line-height来指定。以下例子，对行内元素应用了height:50px,你可以看到什么效果都没。行内元素和padding你可以给行内元素设置padding，但只有padding-left和padding-right生效。以下例子，行内元素应用了padd

42、ing:50px。你可以看到对左右的内容有影响，但是对上下没影响。行内元素和margingmargin属性也是和padding属性一样，对行内元素左右有效，上下无效。下面的例子,对应用了margin:50px，你可以看到左右边缘是生效了但是内容上下却没有。记住对行内元素设置宽度width 无效。设置高度height 无效，可以通过line-height来设置。设置margin 只有左右margin有效，上下无效。设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的，看图上效果就知道了 盒子模型W3C 组织建议把所有网页上的对像都放在一

43、个盒(box)中，设计师可以通过创建定义来控制这个盒的属性，这些对像包括段落、列表、标题、图片以及层。盒模型主 要定义四个区域：内容(content)、边框距(padding)、边界(border)和边距(margin)。对于初学者，经常会搞不清楚 margin，background-color，background- image，padding，content，border之间的层次、关系和相互影响。这里提供一张盒模型的3D示意图，希望便于你的理解和记忆。每个HTML元素都可以看作一个装了东西的盒子，盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border）

44、，而盒子边框外和其他盒子之间，还有边界（margin）。盒模型的实际宽度关于盒模型，还有以下几点需要注意：对于块级元素（display:block），未浮动的垂直相邻元素的上边界和下边界会被压缩，例如：有上下2个元素，上元素的下边界为5px，下面元素的上边界为20px，则实际2个元素的间距为20px（2个边界值中较大的值）。如图所示。注1. 块级元素（display： block）每个块级元素都从一个新行开始，而且其后的元素也需另起一行开始，标题、段落、表格、层、body等都是块级元素。块级元素只能作为其他块级元素的子元素，而且需要一定的条件。内联元素，例如、等，定义上下边界不会影响到行高（l

45、ine-height），内联元素距离上一行元素的距离由行高决定，而不是填充或边界。注2. 内联元素（display：inline）内联元素不需要在新行内显示，而且也不强迫其后的元素换行，如a、em、span等都为内联元素。内联元素可以为任何其他元素的子元素。浮动元素（无论左或者右浮动）边界不压缩，且若浮动元素不声明宽度，则其宽度趋向于0，即压缩到其内容能承受的最小宽度。如果盒中没有内容，则即使定义了宽度和高度都为100%，实际上只占0%，因此不会被显示，此点在采取层布局的时候需特别注意。边界值可为负，其显示效果各浏览器可能不相同。填充值不可为负。边框默认的样式（border-style）为不显

46、示（none）。3.CSS引入的方式有哪些? link和import的区别是?本质上，这两种方式都是为了加载CSS文件，但还是存在着细微的差别。差别1：老祖宗的差别。link属于XHTML标签，而import完全是CSS提供的一种方式。 HYPERLINK /xhtml/tag_link/ link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义 HYPERLINK /xhtml/attribute_rel/ rel连接属性等，import就只能加载CSS了。差别2：加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而im

47、port引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显（梦之都加载CSS的方式就是使用import，我一边下载一边浏览梦之都网页时，就会出现上述问题）。差别3：兼容性的差别。由于 HYPERLINK /TR/CSS21/cascade.html l at-imp%3Cwbr%3Eort import是CSS2.1提出的所以老的浏览器不支持，import只有在IE5以上的才能识别，而link标签无此问题。差别4：使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用lin

48、k标签，因为import不是dom可以控制的。大致就这几种差别了（如果还有什么差别，大家告诉我，我再补充上去），其它的都一样，从上面的分析来看，还是使用link标签比较好。标准网页制作加载CSS文件时，还应该选定要加载的媒体（media），比如screen，print，或者全部all等。这个我到CSS高级教程中再给大家介绍。注：1，网友comehope在留言中提出了另一种区别。差别5：import可以在css中再次引入其他样式表，比如可以创建一个主样式表，在主样式表中再引入其他的样式表，如：main.css-import “sub1.css”;import “sub2.css”;sub1.cs

49、s-p color:red;sub2.css-.myclass color:blue这样更利于修改和扩展猴 子提示：这样做有一个缺点，会对网站服务器产生过多的HTTP请求，以前是一个文件，而现在却是两个或更多文件了，服务器的压力增大，浏览量大的网站还是 谨慎使用。有兴趣的可以观察一下像新浪等网站的首页或栏目首页代码，他们总会把css或js直接写在html里，而不用外部文件。4.CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？内联和important哪个优先级高？5:前端页面有哪三层构成，分别是什么？作用是什么？最准确的网页设计思路是把网页分成三个层次，即：结构层、表示层、行为层。网页

50、的结构层（structural layer）由 HTML 或 XHTML 之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。”网页的表示层（presentation layer） 由 CSS 负责创建。 CSS 对“如何显示有关内容”的问题做出了回答。网页的行为层（behavior layer）负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。8：你做的页面在哪些流览器测试过？这些浏览器的内核分别是

51、什么?经常遇到的浏览器的兼容性有哪些？怎么会出现？解决方法是什么？点评：css的兼容性也是大家关注的热点。大家一定要注意多测试。Javascript 多浏览器兼容性问题及解决方案兼容性处理要点 1、DOCTYPE 影响 CSS 处理 2、FF: 设置 padding 后， div 会增加 height 和 width， 但 IE 不会， 故需要用 !important 多设一个 height 和 width 3、FF: 支持 !important， IE 则忽略， 可用 !important 为 FF 特别设置样式 4、div 的垂直居中问题: vertical-align:middle; 将

52、行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行 5、在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法： divmargin:30px!important;margin:28px; 注意这两个margin的顺序一定不能写反，!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样： divmaring:30px;margin:28px 重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important; 浏览器差异 1、ul和ol列

53、表缩进问题 消除ul、ol等列表的缩进时，样式应写成：list-style:none;margin:0px;padding:0px; 其中margin属性对IE有效，padding属性对FireFox有效。 注 经验证，在IE中，设置margin:0px可以去除列表的上下左右缩进、空白以及列表编号或圆点，设置padding对样式没有影响；在 Firefox 中，设置margin:0px仅仅可以去除上下的空白，设置padding:0px后仅仅可以去掉左右缩进，还必须设置list- style:none才 能去除列表编号或圆点。也就是说，在IE中仅仅设置margin:0px即可达到最终效果，而在F

54、irefox中必须同时设置margin:0px、 padding:0px以及list-style:none三项才能达到最终效果。 2、CSS透明问题 IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。 FF：opacity:0.6。 注 最好两个都写，并将opacity属性放在下面。 3、CSS圆角问题 IE：ie7以下版本不支持圆角。 FF： -moz-border-radius:4px，或者-moz-border-radius-topleft:4px;-moz- border- radius-topr

55、ight:4px;-moz-border-radius-bottomleft:4px;-moz- border- radius- bottomright:4px;。 注 圆角问题是CSS中的经典问题，建议使用JQuery框架集来设置圆角，让这些复杂的问题留给别人去想吧。不过jQuery的圆角只看到支持整个区域的圆角，没有支持边框的圆角，不过这个边框的圆角可以通过一些简单的手段来实现，下次有机会介绍下。 4、cursor:hand VS cursor:pointer 问题说明：firefox不支持hand，但ie支持pointer ，两者都是手形指示。 解决方法：统一使用pointer。 5、字

56、体大小定义不同 对字体大小small的定义不同，Firefox中为13px，而IE中为16px，差别挺大。 解决方法：使用指定的字体大小如14px。 并列排列的多个元素（图片或者链接）的div和div之间，代码中的空格和回车在firefox中都会被忽略，而IE中却默认显示为空格（约3px）。 6、CSS双线凹凸边框 IE：border:2px outset;。 FF： -moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808

57、080;-moz-border-bottom-colors:#404040 #808080; 浏览器bug 1、IE的双边距bug 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。 解决方案：在这个div里面加上display:inline; 例如： 相应的css为 以下为引用的内容： 复制代码代码如下:#IamFloat float:left; margin:5px;/*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/ #IamFloat float:left; margin:5px;/*IE下理解为10px*/ d

58、isplay:inline;/*IE下再理解为5px*/ 关 于CSS中的问题实在太多了，甚至同样的CSS定义在不同的页面标准中的显示效果都是不一样的。一个合乎发展的建议是，页面采用标准XHTML标准编写， 较少使用table，CSS定义尽量依照标准DOM，同时兼顾IE、Firefox、Opera等主流浏览器。很多情况下，FF和 Opera的CSS解释标准更贴近CSS标准，也更具有规范性。 2、IE选择符空格BUG 今天在给博客的段落样式设置首字符样式的时候发现，原来一个空格也可以使样式失效。 请看以下代码： 复制代码代码如下: 对于世界而言，你是一个人；但是对于某个人，你是他的整个世界。纵然

59、伤心，也不要愁眉不展，因为你不知是谁会爱上你的笑容。 /code 复制代码代码如下: 对于世界而言，你是一个人；但是对于某个人，你是他的整个世界。纵然伤心，也不要愁眉不展，因为你不知是谁会爱上你的笑容。 这 段代码对的首字符样式定义在IE6上看是没有效果的（IE7没测试），而在p:first-letter和font- size:300%加上空格，也就是p:first-letter font-size:300%后，显示就正常了。但是同样的代码，在FireFox下看是正常的。按道理说，p:first- letterfont-size:300%的写法是没错的。那么问题出在哪里呢？答案是伪类中的连字符

60、”-”。IE有个BUG，在处理伪类时，如果伪 类的名称中带有连字符”-”，伪类名称后面就得跟一个空格，不然样式的定义就无效。而在FF中，加不加空格都可以正常处理。对css缩写的支持问题：不论是ie 还是ff对css的缩写都有一小点问题比如border: 0 xp solid #fff;两个浏览器支持都没有问题但对于四个边的magin不同情况下，就不能用这种缩写了，无论是ie还是ff又会出现边界解释错误，而导致页面变形正确缩写：border-width:0px 1px 2px 3px;border-style:solid;border-color:#fff;第二点是ie对于css的magin p