Go语言视频零基础入门到精通

javalearner · 发表于 2014-10-29 23:55:08

对比于传统的表格布局和框架布局，DIV+CSS布局有着布局容易、改版方便、样式定义灵活、HTML代码简洁清晰、易于javaScript操控等优点。

   在众口皆碑的同时，对于一些初学者，总会遇到各种各样的问题，比如说DIV的宽度或高度的计算问题。我们来探讨一下影响DIV宽度或高度的属性有哪些？



   DIV的宽度 = width + padding + border + margin


   仅从一条公式上看，可能有点难理解，我们通过测试代码和截图来观察一下。为了测试结果观察直观，我们只测试一边，即左边，即本来padding、border、margin的宽度计算，都是左右两边都算在内的，这里就只测试左边，右边同理。








  <?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <title>测试DIV的宽度</title>
      <style type="text/css">
         #container {
               /* 左参考线 */
               border-left:1px solid #B23AEE;
         }
         /* 定义各个层的公共属性 */
         #div1,#div2,#div3,#div4{
               width:200px;
               height:50px;
               background:#FFE1FF;
               margin-bottom:5px;
         }
         /* 只有width */
         #div1{
         }
         /* 加上border */
         #div2{
               border-left:10px solid red;
         }
         /* 加上border和padding */
         #div3{
               border-left:10px solid red;
               padding-left:50px;
         }
         /* 加上border、padding和margin */
         #div4{
               border-left:10px solid red;
               padding-left:50px;
               margin-left:50px;
         }
      </style>
   </head>
   <body>
      <div id="container">
         <div id="div1">
               心梦帆影心梦帆影心梦帆影心梦帆影心梦帆影
         </div>
         <div id="div2">
               心梦帆影心梦帆影心梦帆影心梦帆影心梦帆影
         </div>
         <div id="div3">
               心梦帆影心梦帆影心梦帆影心梦帆影心梦帆影
         </div>
         <div id="div4">
               心梦帆影心梦帆影心梦帆影心梦帆影心梦帆影
         </div>
      </div>
   </body>
</html>
  我们在Firefox中测试，截图如下：

我们来分析一下DIV4，如下图：

  对照上面的代码和截图，我们可以清楚地理解“div的宽度 = width + padding + border + margin”这条公式。对于web前端开发者来说，最头痛的事情就是因浏览器的差异而引起的网页显示效果的差异，而对于这条宽度计算公式，在其他浏览器中会不会有不兼容的问题呢？幸好，大部分常用的浏览器，我机器上都安装了，测试结果是：在Firefox、Opera、Google、IE8、IE7显示都跟上面的截图一样，也就是说，在这些浏览器中，宽度的计算公式是：



DIV的宽度 = width + padding + border + margin


而在IE6中测试，结果却不是这样，请看运行截图：

  由上图可以看出，在IE6的宽度计算是：



DIV的宽度 = width + margin


而border和padding，是占用了width的位置。这一点，在前端开发中要注意。

本文原创，转载请注明出处，谢谢！http://www.blogjava.net/rongxh7（心梦帆影javaEE技术博客）

复制代码

		自动登录	找回密码
密码			立即注册

JAVA高级面试进阶视频教程	Java架构师系统进阶VIP课程	分布式高可用全栈开发微服务教程	Go语言视频零基础入门到精通	Java架构师3期(课件+源码)
Java开发全终端实战租房项目视频教程	SpringBoot2.X入门到高级使用教程	大数据培训第六期全套视频教程	深度学习（CNN RNN GAN）算法原理	Java亿级流量电商系统视频教程
互联网架构师视频教程	年薪50万Spark2.0从入门到精通	年薪50万！人工智能学习路线教程	年薪50万！大数据从入门到精通学习路线	年薪50万！机器学习入门到精通视频教程
仿小米商城类app和小程序视频教程	深度学习数据分析基础到实战	最新黑马javaEE2.1就业课程	从 0到JVM实战高手教程	MySQL入门到精通教程

分布式高可用全栈开发微服务教程

Go语言视频零基础入门到精通

Java开发全终端实战租房项目视频教程

SpringBoot2.X入门到高级使用教程

大数据培训第六期全套视频教程

Java亿级流量电商系统视频教程

年薪50万Spark2.0从入门到精通

年薪50万！人工智能学习路线教程

[CSS学习]Div+CSS布局的宽度计算在各浏览器中的差异

相关帖子

浏览过的版块