盒子模型简单测试

2012-02-29 16:36 iBlog 阅读(1273) 评论(0) 编辑收藏举报

本文旨在通过浏览器提供的开发人员工具来分析一下盒子模型的构成要素。

主要使用3种浏览器：ie 8（自带开发人员工具）、firefox 10（firebug插件）、chrome 16（自带开发人员工具），这里要特别提到ie8的开发人员工具的“布局”显示跟其他浏览器有差别（参看此文）

二话不说直接上代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

        <title>box Model with xhtml1 transitional dtd</title>

         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

    </head>

    <body>

        <p>这是有Doctype声明的html文档(xhtml1 transitional dtd)</p>

        <input type="button" id="check" value="check box model" />

        <script type="text/javascript">

            $("#check").click(function(){

                var model = jQuery.support.boxModel ? "W3C 模型" : "IE 模型";

                $("p").html("盒子模型是: <span>" +    model + "</span>");

            });

        </script>

        <div style="width:200px;height:100px;margin:18px;padding:13px;border:3px solid red; background:gray">

          width:200px;height:100px;

          margin:18px;

          border:3px;

          padding:13px;

        </div>

    </body>

</html>