对css有一定了解的同学一定听说过盒模型，在这里以我自己的一点儿了解和认知来解释一下盒模型与盒模型在低版本IE浏览器下与其他浏览器下的区别。

W3c标准下的盒模型

盒模型由 content（内容），padding（内填充），border（边框），margin（外边距）组成。

对div盒子定义宽高时，只定义content中的内容。

比如对一个盒子分别设置宽高，padding值，margin值，border值。

div{
height: 200px;
width: 200px;
margin: 30px;
padding: 20px;
background-color: red;
}

<body>
<div></div>
</body>

解析下的样子是这样，设置的宽高只存在于content部分。

因此：设置的宽高=content部分的宽高

总的宽高=content+paddin+border+margin

设置的宽高=content+padding+border

总宽高=content+paddin+border+margin

对比

IE下的盒模型与css3中的 box-sizing：border-box 属性类似，将padding值与border值归纳与设置的宽高中。

box-sizing：border-box；

对盒子设置了200px的宽高，并且设置了border和padding值，并将他们box-sizing。

<style type="text/css">
.body{
padding: 0;margin: 0;
}
div{
height: 200px;
width: 200px;
float: left;
padding: 20px;
box-sizing:border-box;
}
.div1{
border: 2px solid red;
}
.div2{
border: 2px solid green;
}
</style>

<body>
<div class="div1">
<div></div>
</div>
<div class="div2">
<div></div>
</div>
</body>

可看出尽管代码中设置了宽高，但是宽高值将padding与border值都计算在内了，根据测量工具也可看出最终包含border的宽测量出来是200px。

盒模型与在低版本IE下的区别的更多相关文章

  1. javascript小练习-Firefox和低版本chrome下必须采用document方法获取到元素。

    pxpx;background-color: aqua;display: none;} </style></head><body><input type=&q ...

  2. 盒模型中padding、border、margin的区别

    在CSS中,规定了一种基本设计模型——盒模型(也叫框模型),如图所示: 其中包含了四部分内容:element/元素(即图中文字).padding/内边框(图中两个红色边框之间白色部分).border/ ...

  3. Web Uploader在低版本IE下无法显示Flash的一种情况

    用户反馈在IE 8下无法正常显示Web Uploader控件,并已安装了Flash插件.调试发现在内部抛出了Runtime Error的错误,关键代码如下: Runtime.create = func ...

  4. 项目在低版本浏览器下不兼容？友情提示客户升级浏览器（以下只针对IE浏览器）

    (function (window) { var win = window, sys = {}, ua = navigator.userAgent.toLowerCase(); (/msie\s+(\ ...

  5. Flex弹性盒模型（新老版本完整）--移动端开发整理笔记（二）

    Flex布局 Flex即Flexible Box,写法为:display:flex(旧版:display: -webkit-box) 在Webkit内核下,需要加-webkit前缀: .box{ di ...

  6. 标准的CSS盒子模型？与低版本IE的盒子模型有什么不同的？

    CSS盒子模型:由四个属性组成的外边距(margin).内边距(padding).边界(border).内容区(width和height); 标准的CSS盒子模型和低端IE CSS盒子模型不同:宽高不 ...

  7. 解决html5新标签【placeholder】低版本浏览器下不兼容问题

    placeholder属性是HTML5 中为input添加的.在input上提供一个占位符,文字形式展示输入字段预期值的提示信息(hint),该字段会在输入为空时显示. 实例:1 <input ...

  8. 如何让IE 低版本下支持 css3属性

    依赖源  该文件为  ie-css3.htc    (特别提示.htc为二进制文件,只会在ie中识别,让IE浏览器支持CSS3的一些属性) 以下为依赖文件源码 通过源码我们可以看到 该文件在一定程度上 ...

  9. CSS盒模型（Box Model）

    阅读目录 1. 什么是CSS盒模型 2. IE盒模型和W3C盒模型 3. CSS3属性box-sizing 4. 关于盒模型的使用 在最初接触CSS的时候,对于CSS盒模型的不了解,撞了很多次的南墙呀 ...

随机推荐

  1. nginx和tomcat的区别

    web上的server都叫web server,但是大家分工也有不同的. nginx常用做静态内容服务和代理服务器(不是你FQ那个代理),直面外来请求转发给后面的应用服务(tomcat,django什 ...

  2. 深入springMVC源码------文件上传源码解析(下篇)

    在上篇<深入springMVC------文件上传源码解析(上篇) >中,介绍了springmvc文件上传相关.那么本篇呢,将进一步介绍springmvc 上传文件的效率问题. 相信大部分 ...

  3. VGA, QVGA, HVGA, WVGA, FWVGA和iPhone显示分辨率

    首先这些都是说的屏幕显示分辨率 VGA (Video Graphics Array), 分辨率为 480*640. QVGA (Quarter VGA), 分辨率为240*320. HVGA (Hal ...

  4. iOS -初识UIKit

    UIKit框架:UI界面上每一个元素都是一个对象 一张图片是UIimageView对象 一段文字是一个UILabei对象 一个按钮是一个UIButton对象 搭建UI界面的步骤 利用类创建对象 将对象 ...

  5. dp 动态规划 hdu 1003 1087

    动态规划就是寻找最优解的过程 最重要的是找到关系式 hdu 1003 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1003 题目大意:求最大字序列和, ...

  6. innoDB 存储引擎

    innodb 是在mysql 5.5.8 及之后的版本中成为mysql的默认存储引擎.之前都使用myisam.   innodb 是事务型的存储引擎 支持ACID事务,适用于小事务.   1.表空间类 ...

  7. N 皇后问题

    #include <set> #include <iostream> #include <string> #include <vector> #incl ...

  8. 安装Windows 7

    -EndFragment--> 1.安装win7_64位步骤: https://www.douban.com/note/224102684/ 安装Win7系统为硬盘分区的方法 笨小康2012-0 ...

  9. Android中的几种解析XML文件的类

    Ø DOM解析 优点: 1.XML树在内存中完整存储,因此可以直接修改其数据和结构. 2.可以通过该解析器随时访问XML树中的任何一个节点. 3.DOM解析器的API在使用上也相对比较简单. 缺点:如 ...

  10. java解析XML文件

    dom4j是一个Java的XML API,类似于jdom,用来读写XML文件的.dom4j是一个非常非常优秀的Java XML API,具有性能优异.功能强大和极端易用使用的特点,同时它也是一个开放源 ...