Web测试工具WAS使用方法.doc

Web测试工具WAS认识实验一、实验目的1、了解WAS服务器负载测试软件的安装过程，进行安装实验。2、了解WAS服务器负载测试软件的用途和简单的操作。3、掌握WAS服务器负载测试软件测试过程。4、能够使用WAS服务器负载测试软件进行简单的测试工作。二、实验环境操作系统：windows 2000 Pro + SP4应用系统：WAS服务器负载测试软件三、实验过程随着网络服务器端处理任务的日益复杂，以及网站访问量的迅速增长，服务器性能的优化已成为非常迫切的任务。在性能优化之前，测试不同条件下服务器的性能表现，并找出影响性能瓶颈所在，将是Web设计性能改善方案的重要依据。在构造一个Intranet 网站时，负载测试是任何Web 应用开发周期中一个重要的环节。在构造一个为大量用户服务的应用之前，搞清楚产品配置能够承受多大的负载十分重要，测试能够暴露出最终会导致服务器崩溃的内存泄漏、访问阻塞等情况。但是在实际的构建过程中，若要按照系统真实运行的情况，组织成千上万的用户来进行压力测试，无论从那个方面进行实施，都是不现实的。因为一旦发现了问题，不仅需要重复的进行这种耗费资源巨大的测试，而且问题并一定能够重现，并不能方便的找出性能的瓶颈或问题所在。解决这个问题的办法是通过使用软件的办法解决，通过进行软件模拟的方法进行，这就是负载的压力测试。无论哪种情形，对运用软件进行负载测试可以获得重要的基准性能数据，为未来的代码优化、硬件配置以及系统软件、硬件更新与升级带来依据和提供数据。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.0 以上版本。为了对网站进行负载测试，WAS 可以通过一台或者多台客户机模拟大量用户访问Web网站的活动。WAS 支持身份验证、加密和Cookies，也能够模拟各种浏览器类型和Modem 速度，它的测试功能和性能表现良好。使用WAS时，为了更加接近真实的进行压力测试，通常推荐运行WAS的测试机和Web服务器分开。2 Web Application Stress Tool的设置及其操作21 主界面窗口 第一次安装完WAS后，可在本机操作系统（以Windows 2000 Server为例）中找到主界面，通过单击执行，其步骤是：开始-程序-Microsoft Web Application Stress Tool。第一次执行时会出现一个Create new script 的界面。22 制作生成脚本1开始使用WAS要对网站进行负载测试首先必须创建WAS 脚本模拟用户的活动。可以用下面四种方法之一创建脚本：l 通过记录浏览器的活动。l 通过导入IIS 日志。l 通过把WAS 指向Web 网站的内容。l 手工制作。这里通过最常用的方法通过记录浏览器的活动来讲解。其他三种方法在后面将会提到。图1 简单的Script（脚本）界面2录制测试脚本在录制测试脚本前，需要首先关闭IE 的缓冲区。（1）在工具菜单，点Internet 选项（2）点常规标签，然后点删除文件按钮。如果使用IE5.0 或以上版本则不需要修改代理设置，因为5.0 以上版本的IE 允许WAS改变这些设置。而对于IE4.0 或早期版本，WAS 使用一个内置的代理服务器来记录浏览器活动。按WAS 的需要指定代理设置:l 在工具菜单，点Internet 选项。l 在连接标签里，修改代理设置以使代理服务器指向Localhost，并且使用端口8000。l 不选“对于本地地址不使用代理服务器”选项。l 打开菜单，选择Scripts|Create|Record 创建一个测试脚本。选取要记录的内容，有下面3 种。图2Record delay between request：记录了请求之间的延迟。由于用户实际上在浏览网站时，对于请求之间存在几秒甚至几分钟的延迟，这种录制方法在执行时会模仿用户之间的延迟发送请求，所以会是一个更加实际的测试。如果测试的目的是要发现Web 应用程序的承受极限，就不要选择该项；如果只是想模拟一个特定数量的用户场景，那么选择该项进行测试捕捉请求延迟。Record browser cookies & Record the host header：只记录用户的会话，不记录延迟时间。一般情况下，不需要选择这两项，可以让WAS 创建cookies 和host header，这就如同用户登录某个网站一样。然而，如果有网站的回归信息时（比如一个用户的主要特征信息或者与一个永久性cookies 相连的其他信息），在模拟一个新的用户登录网站和进行必要的用户配置测试前 ，必须保证清除cookies，如果Web 应用程序需要用户接受cookies，那么需要选中该选项。目前这个版本的WAS 软件对基于浏览器IE录制脚本的方式还不支持HTTP/SSL 请求。一般情况下，只选择后二种会增加压力的强度。根据压力测试实际的情况，选择合适的选项，然后点“Next | Finish”，WAS会打开一个IE窗口，在IE中输入要测试的站点地址，然后就可以按照实际的情况开始浏览站点了，浏览的同时也就是执行测试用例的过程。图3 测试前确定站点地址等测试用例执行完成后，切换到WAS窗口，点“Stop Recording:”按钮，停止录制脚本。图4 录制结果WAS 回到了视图页面，在该页面中可以看到在录制过程中WAS 收集的每一个链接，并且还可编辑GET、POST 以及HEAD 信息。制作WAS 脚本较为简单，但要制作出模拟真实用户活动的脚本有些复杂。如果已经有一个运行的Web 网站，可以使用Web 服务器的日志来确定Web 网站上的用户点击分布。如果应用还没有开始运行，那么只好根据经验作一些猜测了。图5 使用Web服务器日志来确定Web 网站上的用户点击分布3 负载参数设置测试脚本录制完成后，下一步要作的就是配置运行脚本的负载选项，可以调整测试配置以便观察不同条件下的应用性能。3.1 目录树（Content Tree）由于WAS 和 Web Server 是分开的，所以这里不需要进行设置。3. 2 负载选项的设置（Setting）点击“Setting”即可开始负载选项的设置。1. ConCurrent ConnectionsStress Level（threads）的数值决定了所有客户机创建的Windows 的线程的数值。每一个线程创建多个Socket 连接（具体多少Socket 连接数取决于Stress multiplier(sockets per thread)），每个Socket 连接就是一个并发的请求(request)。图6 创建多个Socket 连接下面这个公式表示了它们之间的关系：总的并发请求数 = Stress Level * 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）设定请求延迟时间的最大、最小值，当然也可以选择“Use random delay”使用随机的延迟时间。一般情况下，常常会浏览一页，发现一个链接后，点击它。即使是对该网站熟悉的人，4. SuspendWAS 允许设置warmup（热身）的时间，一般可以设置为1 分钟。在热身期间WAS 开始执行脚本，但不收集统计数据。热身时间给MTS、数据库以及磁盘缓冲等一个机会来做准备工作。如果在热身时间内收集统计数据，这些操作的开销将影响性能测试结果。WAS 也允许设置CoolDown 时间。在WAS 执行的时间达到设定的Test Run Time 时，进入CoolDown Time，这时WAS 并没有停止执行脚本，同样也不会收集统计数据。下图表示了它们的先后关系。图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 resolution这几个选项一般情况下采用默认情况即可。选中Follow HTTP redirects 选项将会支持重定向。选中Throughput 中的两项，WAS 将会收集活动用户的cookies，以及收集网站的统计数字。默认情况下都会选中这两项，如果不选择，将会增加压力测试的强度。Name resolution 默认情况下没有选中。选中该选项，会让每一个客户测试机执行查询，只有在使用多个子网时才需要选中该项。3.3 Perf Counters（性能计数器）使用WAS，从远程Windows NT 和Windows 2000 机器获取和分析性能计数器（Performance Counter）是很方便的。加入计数器要用到下图所示的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） ASP：置入队列的请求数量（Requests Queued）2 各个WAS 测试机 处理器：CPU 使用百分比（% CPU Utilization） 内存：内存使用百分比（% Memory Utilization）在测试中选择哪些计数器显然跟测试目的有关。虽然下面这个清单不可能精确地隔离出性能瓶颈所在，但对一般的Web 服务器性能测试来说却是好的开始。 处理器：CPU 使用百分比（% CPU Utilization） 线程：每秒的上下文切换次数（Context Switches Per Second (Total)） ASP：每秒请求数量（Requests Per Second） ASP：请求执行时间（Request Execution Time） ASP：请求等待时间（Request Wait Time） ASP：置入队列的请求数量（Requests Queued）CPU 使用百分比反映了处理器开销。CPU 使用百分比持续地超过75%是性能瓶颈在于处理器的一个明显的迹象；每秒上下文切换次数指示了处理器的工作效率。如果处理器陷于每秒数千次的上下文切换，说明它忙于切换线程而不是处理ASP 脚本。每秒的ASP 请求数量、执行时间以及等待时间在各种测试情形下都是非常重要的监测项目。每秒的请求数量表明每秒内服务器成功处理的ASP 请求数量。执行时间和等待时间之和显示了反应时间，这是服务器用处理好的页面作应答所需要的时间。可以绘出随着测试中并发用户数量的增加每秒请求数量和反应时间的变化图。增加并发用户数量时每秒请求数量也会增加。然而，最终会达到这样一个点，此时并发用户数量开始“压倒”服务器。如果继续增加并发用户数量，每秒请求数量开始下降，而反应时间则会增加。要搞清楚硬件和软件的能力，找出这个并发用户数量开始“压倒”服务器的临界点非常重要。置入队列的ASP 请求数量也是一个重要的指标。如果在测试中这个数量有波动，某个COM 对象所接收到的请求数量超过了它的处理能力。这可能是因为在应用的中间层使用了一个低效率的组件，或者在ASP 会话对象中存储了一个单线程的单元组件。运行WAS 的客户机CPU 使用率也需要监视。如果这些机器上的CPU 使用率持续地超过75%，说明客户机没有足够的资源来正确地运行测试，此时应该认为测试结果不可信。在这种情况下，测试客户机的数量必须增加，或者减小测试的Stress Level。3.4 Page Groups对于一个Web 应用而言，同一时刻用户点击的分布是不一样的。WAS 允许设置用户点击流量的分布比例。图9 用户点击流量的分布比例这里假设在一个Web 应用程序中，有650 个人同时在线，其中100 人正在添加提交数据，占15.38%；有150 人正在查询，占23.08%。按照不同的Web 应用，可以根据实际的情况再定制这个比例关系，来更加符合实际的情况。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 运行测试脚本所有的设置完成以后，就可以运行WAS 来进行压力测试了。要运行测试脚本很简单，只要选中测试脚本的名称，然后点击工具栏上的“运行”按钮，即可。建议第一次运行测试脚本时，Test Run Time 不要太长，Stress Level 以及Stress multiplier 不要太大，因为，第一次运行的目的只是为了检验测试脚本正确的运行。图12 运行测试脚本5 测试结果每次测试运行结束后，WAS 会生成详细的报表，即使测试被提前停止也一样。WAS 报表可以从View 菜单选择Reports 查看。下面介绍报表中几个重要的部分。5.1 摘要页面摘要部分提供了页面的名字，接收到第一个字节的平均时间（TTFB），接收到最后一个字节的平均时间（TTLB），以及测试脚本中各个页面的命中次数。TTFB 和TTLB 这两个值对于计算客户端所看到的服务器性能具有重要意义。TTFB 反映了从发出页面请求到接收到应答数据第一个字节的时间总和（以毫秒计），TTLB 包含了TTFB，它是客户机接收到页面最后一个字节所需要的累计时间。只要选中页面的名字，即可显示页面摘要。图13 页面摘要5.2 Result Codes（结果代码）如果是一个新创建的测试脚本，应该检查一下报表的Result Codes 部分。这部分内容包含了请求结果代码、说明以及服务器返回的结果代码的数量。如果这里出现了404代码（页面没有找到），说明在脚本中有错误的页面请求。具体的错误代码表示的意义，可以参考IIS 的说明文档。图14 测试结果代码5.3 Perf Counters（性能统计）报表中还包含了所有性能计数器的信息。这些数据显示了运行时各个项目的测量值，同时还提供了最大值、最小值、平均值等。报表实际提供的信息远远超过了这里介绍的内容。5.4 Script Settings（脚本设置）这里显示的是运行本次测试时的设置，也就是前面讲到的Setting 部分的内容。图15 运行本次测试时的设置5.5 Test Clients（测试客户机）这里显示的是各个WAS 客户机的情况。先总体说明在测试中使用了那些WAS 客户机，在使用的WAS 客户机中显示。l 执行了多少线程。l 模拟了多少用户。l 点击的次数。l 连接失败的次数。图16 测试客户机5. 6 Page Summary （页面概要）显示了在测试中各个请求内容的TTFB 和TTLB，以及点击的次数等信息。具体的说明已经包含在上面的摘要中了。5.7 Page Groups （页面组）显示不同的用户组在测试中的执行情况。这里提供的信息包括l 用户组的分布情况，以及在所有用户组中所占的比例。l 点击的次数，以及在所有点击次数中所占的比例。l Result Codes 情况。l Socket 连接的信息。图17 用户组在测试中的执行情况5.8 Page Data（页面数据）显示了各个请求内容的更加详细的信息。一般技术需求中的运行效率信息可以在这里验证。 6 其他方式编写测试脚本前边提到，编写测试脚本有4 种方法，现在对其他三种方法进行简单的介绍。6.1 手动编写测试脚本打开菜单，选择Scripts|Create|Manual 手动创建一个测试脚本,然后出现了NewScript，server中输入要进行测试的服务器IP 地址或计算机名称；在脚本的内容表格中verb项选择脚本运行方式 get、post、head；path中输入向服务器提交的文件或字符串。图18 手动创建测试脚本图19 手动创建测试脚本参数设置6.2 导入IIS 日志这种方法适合于开始投入运行的Web 应用程序。IIS 日志记录了用户访问系统的所有信息。通过导入IIS 日志的方法建立的测试脚本，是最符合实际运行情况的方法。如果有IIS日志，推荐使用这种方法。图20 导入IIS日志的方法建立测试脚本这种方法也比较简单。打开菜单，选择Scripts|Create|Log 导入IISs 日志创建一个测试脚本。然后出现导入IIS 日志的第一步，选择IIS 日志的路径，默认情况下的路径如图所示。图21 选择IIS 日志的路径（1）Next 进入第二步，一般情况下不用做改动，取默认即可。图22 选择IIS日志的路径（2）点击Finish后，WAS 自动生成脚本。6.3 导入网站内容文件这种方法通过导入网站上具体的文件来生成测试脚本。一般情况下，不推荐使用这种方法。下面简单说明这种方法的使用。打开菜单，选择Scripts|Create|Contents ，WAS 自动新建一个测试脚本，并且切换到Contents Tree 节点。图23 导入网站内容文件然后回到New Script 的主页面，会看到选择的内容文件自动添加到表格中。图24 选择的内容文件自动添加到表格中7 设计测试方案时的一些注意点 7.1 大规模测试时需要大量WAS 客户端为了充分利用资源，可以在项目组每个人的机器上都安装WAS 软件（只要正确安装，启动WebTool 服务即可）。这样在测试时，WAS 会自动协调，自动分配线程。 7.2 系统中有很多的角色虽然WAS 可以将不同角色执行请求的顺序进行混合，但是不知道WAS是如何混合的，因此不能随时控制角色的状态。建议将不同的角色分组，每个角色放到一个WAS 测试机（充当控制器）上，这样可以分角色而又集中的对Web Server 进行压力测试，同时又能随意的控制各个WAS 客户机的状态。这种思想是模仿Load Runner 软件，具体实施还需要不断的学习和实验。73 测试的顺序在集成测试时，先注重性能方面的测试，逐步的加压，寻找Web Server 的最大负载量。进而对照技术需求，不断改进。WAS 首先是性能测试工具，然后才是压力测试工具。具体测试时，可以先在正常的条件下（满足技术需求）进行性能测试，然后才是异常情况（增加压力到技术需求规定的1.5-2 倍）的测试。74 利用WAS 更深入地了解应用不断的研究学习，利用WAS 更深入地了解应用的性能、稳定性、瓶颈和局限性。8 使用WAS 的优势和不足8.1 使用WAS 的优势首先，讨论使用WAS 测试应用程序的好处。1简单WAS 允许以不同的方式创建测试脚本：你可以通过使用浏览器走一遍站点来录制脚本，可以从服务器的日志文件导入URL，或者从一个网络内容文件夹选择一个文件。当然，也可以手工地输入URL 来创建一个新的测试脚本。不像其它的工具，你可以使用任何数量的客户端运行测试脚本，全部都有一个中央主客户端来控制。在每一个测试开始前，主客户机透明地执行以下任务：l 与其他所有的客户机通讯。l 把测试数据分发给所有的客户端。l 在所有客户端同时初始化测试。l 从所有的客户端收集测试结果和报告。这个特性非常重要，尤其对于要测试一个需要使用很多客户端的服务器群的最大吞吐量时非常有用。2高可用性WAS 是被设计用于模拟Web 浏览器发送请求到任何采用了HTTP1.0 或1.1 标准的服务器，而不考虑服务器运行的平台。除了它的易用性外，WAS 还有很多其它的有用的特性，包括：l 对于需要署名登录的网站，它允许创建用户帐号。l 允许为每个用户存储cookies 和Active Server Pages (ASP) 的session 信息。l 支持随机的或顺序的数据集，以用在特定的名字-值对。l 支持带宽调节和随机延迟（“思考的时间”）以更真实地模拟显示情形。l 支持Secure Sockets Layer (SSL)协议。l 允许URL 分组和对每组的点击率的说明。 提供一个对象模型，可以通过Microsoft Visual Basic Scripting Edition (VBScript)处理或者通过定制编程来达到开启，结束和配置测试脚本的效果。82 使用WAS 的缺陷和不足除了优势外，WAS 的确也有一些缺陷和不足，当前知道的bug 和有关事项都以列在WAS 的网站上了。以下是当前WAS 不支持的特性：l 以前面所发请求返回的结果为基础，修改URL 参数的能力。l 运行或模仿客户端逻辑的能力。l 为所分配的测试指定一个确定数量的测试周期的能力。l 对拥有不同IP 地址或域名的多个服务器的同时测试能力。l 支持页面在不同IP 地址或域名间的重定向的能力。l 从Web 浏览器直接记录SSL页面的能力。 WSA 已经支持SSL 页面的测试，但是没有记录它们。需要在脚本录制完后，手工地为每个设计好的URL 打开SSL 支持.虽然对这些限制有一些相应的解决办法，但如果应用依赖一个或多个这样的功能的话，不能完全实现WAS 带来的优点。四、实验要求1、做好实验预习，掌握，并熟悉本实验中所使用的测试环境及相应的测试软件。2、写出实验报告，内容是： 实验目的 。 实验内容 实验源代码（或测试脚本）可不写出，但是一定要写出实验中出现的错误，以及解决错误的方法。 出错信息及处理方法。 实验结果 包括实验处理结果和设计心得。 五、注意事项 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 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,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一样，拥有IE5.5一样的bug和其他问题，行为（Javascript）也是如此。 IE6的触发 在XHTML的DOCTYPE前加入XML声明 IE7的触发 在XML声明和XHTML的DOCTYPE之间加入HTML注释 IE6和IE7都可以触发的 在HTML4.01的DOCTYPE文档头部加入HTML注释 其次是这样的意义 各个浏览器的混杂模式，基本就是各个浏览器的私有模式，不相互兼容。所以，除非是为了兼容的问题，比如你不想修改很久很久以前做的IE ONLY的网页，否则刻意触发混杂模式没有任何意义。2：行内元素有哪些？块级元素有哪些？CSS的盒模型？一.行内元素和块级元素有哪些？块级元素information on authorlong quotationpush buttontable captiondefinition descriptiondeleted textgeneric language/style containerdefinition listdefinition termform control groupinteractive formheadingheadingheadingheadingheadingheadinghorizontal ruleinline subwindowinserted textfieldset legendlist itemclient-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行内元素anchorabbreviated 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 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二.行内元素与块级元素有什么不同？1.尺寸-块级元素和行内元素之间的一个重要的不同点行内元素和widthW3C CSS2 标准规定行内元素、非置换元素不会应用width属性。以下例子中，对行内元素应用了width:200px,你可以看到，根本就没有什么效果。行内元素和heightW3C CSS2 标准规定行内元素、非置换元素不会应用height属性，但是盒子高度可以通过line-height来指定。以下例子，对行内元素应用了height:50px,你可以看到什么效果都没。行内元素和padding你可以给行内元素设置padding，但只有padding-left和padding-right生效。以下例子，行内元素应用了padding:50px。你可以看到对左右的内容有影响，但是对上下没影响。行内元素和margingmargin属性也是和padding属性一样，对行内元素左右有效，上下无效。下面的例子,对应用了margin:50px，你可以看到左右边缘是生效了但是内容上下却没有。记住对行内元素设置宽度width 无效。设置高度height 无效，可以通过line-height来设置。设置margin 只有左右margin有效，上下无效。设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的，看图上效果就知道了 盒子模型W3C 组织建议把所有网页上的对像都放在一个盒(box)中，设计师可以通过创建定义来控制这个盒的属性，这些对像包括段落、列表、标题、图片以及层。盒模型主 要定义四个区域：内容(content)、边框距(padding)、边界(border)和边距(margin)。对于初学者，经常会搞不清楚 margin，background-color，background- image，padding，content，border之间的层次、关系和相互影响。这里提供一张盒模型的3D示意图，希望便于你的理解和记忆。每个HTML元素都可以看作一个装了东西的盒子，盒子里面的