盒模型与在低版本IE下的区别
对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下的区别的更多相关文章
- javascript小练习-Firefox和低版本chrome下必须采用document方法获取到元素。
pxpx;background-color: aqua;display: none;} </style></head><body><input type=&q ...
- 盒模型中padding、border、margin的区别
在CSS中,规定了一种基本设计模型——盒模型(也叫框模型),如图所示: 其中包含了四部分内容:element/元素(即图中文字).padding/内边框(图中两个红色边框之间白色部分).border/ ...
- Web Uploader在低版本IE下无法显示Flash的一种情况
用户反馈在IE 8下无法正常显示Web Uploader控件,并已安装了Flash插件.调试发现在内部抛出了Runtime Error的错误,关键代码如下: Runtime.create = func ...
- 项目在低版本浏览器下不兼容？友情提示客户升级浏览器（以下只针对IE浏览器）
(function (window) { var win = window, sys = {}, ua = navigator.userAgent.toLowerCase(); (/msie\s+(\ ...
- Flex弹性盒模型（新老版本完整）--移动端开发整理笔记（二）
Flex布局 Flex即Flexible Box,写法为:display:flex(旧版:display: -webkit-box) 在Webkit内核下,需要加-webkit前缀: .box{ di ...
- 标准的CSS盒子模型？与低版本IE的盒子模型有什么不同的？
CSS盒子模型:由四个属性组成的外边距(margin).内边距(padding).边界(border).内容区(width和height); 标准的CSS盒子模型和低端IE CSS盒子模型不同:宽高不 ...
- 解决html5新标签【placeholder】低版本浏览器下不兼容问题
placeholder属性是HTML5 中为input添加的.在input上提供一个占位符,文字形式展示输入字段预期值的提示信息(hint),该字段会在输入为空时显示. 实例:1 <input ...
- 如何让IE 低版本下支持 css3属性
依赖源 该文件为 ie-css3.htc (特别提示.htc为二进制文件,只会在ie中识别,让IE浏览器支持CSS3的一些属性) 以下为依赖文件源码 通过源码我们可以看到 该文件在一定程度上 ...
- CSS盒模型（Box Model）
阅读目录 1. 什么是CSS盒模型 2. IE盒模型和W3C盒模型 3. CSS3属性box-sizing 4. 关于盒模型的使用 在最初接触CSS的时候,对于CSS盒模型的不了解,撞了很多次的南墙呀 ...
随机推荐
- 补PSP进度（10.28-11.3）
本周PSP进度 10月31号 内容 开始时间 结束时间 打断时间 净时间 看蛋白质相互作用论文 8:40 10:35 约12m 103m 分析约跑功能 13:20 13:55 0 35m 练习VSL2 ...
- C++笔记（1）explicit构造函数
按照默认规定,只有一个参数的构造函数也定义了一个隐式转换,将该构造函数对应数据类型的数据转换为该类对象,如下面所示: class String { String ( const char* p ); ...
- include包含头文件的语句中,双引号和尖括号的区别是什么?
include包含头文件的语句中,双引号和尖括号的区别是什么? #include <> 格式:引用标准库头文件,编译器从标准库目录开始搜索 尖括号表示只在系统默认目录或者括号内的路径查找 ...
- Jenkins 命令
Jenkins 服务集群环境的启动命令 #必须在root下启动 sh /home/jenkins/tomcat/bin/startup.sh dubbo服务注册中心 zookeeper启动命令 /we ...
- Ubuntu无法识别显示器情况下，高分辨率的设置
安装ubuntu后,出现无法识别显示器,从而造成无法设置高分辨率. 界面显示似老年机般,5.3的视力+强迫症,臣妾的内心是十分拒绝的,捣鼓了半天终于搞定,这里记录下方法. (一)使用xrandr命令, ...
- 获取下拉框的文本值和value值
http://www.cnblogs.com/djgs/p/3691979.html?utm_source=tuicool&utm_medium=referral 现在有一个Id为AreaId ...
- 学习winform第三方界面weiFenLuo.winFormsUI.Docking.dll
控件dockpanel中提供了几个可用的类, 重要的有两个, 一是DockPanel, 一是DockContent, DockPanel是从panel继承出来的, 用于提供可浮动的dock的子窗口进行 ...
- It matters, In the coming year ,i will stand here.
人在安逸中会迷失自己,直至看不到远处的光亮.在一个人迷茫的时候便需要寻找认同感,于是我来到了这里.比我更加优秀的人都在默默的努力,我怎么能允许自己在原地踏步.在这一刻我似乎又看了黑夜中的一束光. 初识 ...
- hdoj 5074
Problem Description Hatsune Miku is a popular virtual singer. It is very popular in both Japan and C ...
- MFC之鼠标消息处理
今天学了点MFC的鼠标处理.用鼠标处理编写了一个小程序.在文本窗口内,绘制鼠标移动轨迹,当按下CTRL键时鼠标将变成十字,并且填充为蓝色的矩形. 第一步:建立单文的MFC程序,添加类CMouseDem ...