最近在研究css~当设置一个元素width后~有时候也会对他设定padding,margin,border值，

每次这样我就心里琢磨，那这个元素的width会变吗，js获取元素的宽度width()指的是哪个宽度，还有innerWidth()?outerWidth()?outerWidth(true)?

还有CSS中Box model是分为两种，第一种是W3C的标准模型，另一种是IE的传统模型。

他们相同之处都是对元素计算尺寸的模型，具体说就是对元素的width,height,padding,border以及元素实际尺寸的计算关系，那他们的不同呢？
各种问题纠结在了一起，为了解决这个困惑，我做了如下调试：

测试环境 ：ie6 ie7 ie8 chrome firefox

俗语(自己设定)：元素：此例子中的div[class='con']　　　　内容宽度：元素中的内容，例子中的“抢火车票啦”~ 最近公司最疯狂的事情咕~~(╯﹏╰)

/******很简单的一个demo*********/
<style>

    *{margin:0;padding:0}

    .con{width:300px;height:200px;margin:0 auto;background:#6c6eff;padding:50px;margin-top:10px;border:4px #FFFF00 dashed}

    .log{width:300px;border:1px red solid;height:100px;margin:0 auto}

</style>

<script>

    $(function(){

        var ss=[];

        ss.push("width:");

        ss.push($(".con").width()+"<br>");

        ss.push("innerWidth:"+$(".con").innerWidth()+"<br>");

        ss.push("outerWidth:"+$(".con").outerWidth()+"<br>");

        ss.push("outerWidth(true):"+$(".con").outerWidth(true));

        $(".log").html(ss.join(""))

    })

</script>

</head>

<body>

　　<div class="con">抢火车票啦</div>

　　<div class="log"></div>

</body>　　
得出结论：
　　　1:在ie6及ie6以上版本还有谷歌，火狐中他们都遵循的都是w3c盒子模型，估计只有ie6以下版本是遵循传统盒子模型吧~

　　　　ps:那什么是w3c盒子模型呢？我就白话文加上个人的理解解说下
　　　　　　con设定width:300px;padding:50px;margin-top:10px;border-width:4px;
　　　　　　con的页面实际展示宽度是：300+50*2+4*2 = 408
　　　　　　我想大家应当有所领悟了吧，width(300px)是指的内容宽度，当设置padding值时，con向外扩张, 设置border宽度同理；
　　　　　  
　　　　　　$(".con").width():300px;其实就是我们经常说的con宽度width多少，我觉得这个说法有点误解，应当说这个元素的内容宽度才对味嘛
　　　　　　$(".con").innerWidth():400px;元素的内容宽度+内距padding值
　　　　　　$(".con").outerWidth():408px;元素的内容宽度+内距padding值+边框boderWidth,这个说成是元素的宽度才对嘛，你觉得呢？

　　　　　　$(".con").outerWidth(true):元素的内容宽度+内距padding值+边框boderWidth+margin(在chrome才有效)，其他浏览器里同上面的那个值一样;
　　　　
　　　　配图：
　　　　　　　　　　ie6 ie7 ie8  firefox                 chrome:
　　
　　　　2:说说ie跟firefox的调试工具的区别
　　　　　　大家看图说话吧~有点时候我会搞混，ie的这个408其实是指outerWidth，而不是里面那个方框的宽度哦，里面的那个是300哦
　　　　　        　ie:          firefox:            
　　　　　　               
　　　　　　　
　　　　　　
终于搞清楚了，虽然很简单，但之前老是听别人讲，我还以为很麻烦呢，原来也还好。
学css最重要的就是兼容性了，我以后会把我碰到的一些兼容问题总结出来。
我一定要把css+div学的很精通~！

Box model小心得的更多相关文章

  1. CSS3与页面布局学习总结（二）——Box Model、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  2. Box Model,边距折叠，内联和块标签，CSSReset

    一.盒子模型(Box Model) 1.1.宽度测试 1.2.溢出测试 1.3.box-sizing属性 1.4.利用CSS画图 二.边距折叠 2.1.概要 2.2.垂直方向外边距合并计算 三.内联与 ...

  3. CSS3与页面布局学习笔记（二）——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  4. 盒子模型(Box Model)

    盒子模型(Box Model) ■ 盒子模型——概念 在网页设计中常用的属性名:内容(content),填充(padding),边框(border),边界(margin),CSS 盒子模式都具备这些属 ...

  5. CSS魔法堂：小结一下Box Model与Positioning Scheme

    前言  对于Box Model和Positioning Scheme中3种定位模式的细节,已经通过以下几篇文章记录了我对其的理解和思考.  <CSS魔法堂:重新认识Box Model.IFC.B ...

  6. CSS魔法堂：重新认识Box Model、IFC、BFC和Collapsing margins

    前言   盒子模型作为CSS基础中的基础,曾一度以为掌握了IE和W3C标准下的块级盒子模型即可,但近日在学习行级盒子模型时发现原来当初是如此幼稚可笑.本文尝试全面叙述块级.行级盒子模型的特性.作为近日 ...

  7. CSS3与页面布局学习总结——Box Model、边距折叠、内联与块标签、CSSReset

    目录 一.盒子模型(Box Model) 1.1.宽度测试 1.2.溢出测试 1.3.box-sizing属性 1.4.利用CSS画图 二.边距折叠 2.1.概要 2.2.垂直方向外边距合并计算 三. ...

  8. CSS 笔记三（Tables/Box Model/Outline）

    CSS Tables border border: border-width border-style border-color|initial|inherit; border-width borde ...

  9. 重新认识Box Model、IFC、BFC和Collapsing margins

    尊重原创,转载自: http://www.cnblogs.com/fsjohnhuang/p/5259121.html 肥子John^_^ 前言   盒子模型作为CSS基础中的基础,曾一度以为掌握了I ...

随机推荐

  1. 各加密模式的演示(ECB,CBC)

    对于较长的明文进行加密需要进行分块加密,但是直接加密(ecb)不容易隐藏模式,用OpenCV写了个程序论证了一下 ECB 优点就是简单,可以并行计算,不会迭代误差 缺点就是隐藏不了模式 CBC 需要初 ...

  2. COJ 1008 WZJ的数据结构（八） 树上操作

    传送门:http://oj.cnuschool.org.cn/oj/home/problem.htm?problemID=986 WZJ的数据结构(八) 难度级别:E: 运行时间限制:3000ms: ...

  3. HDU 献给杭电五十周年校庆的礼物 1290 递推

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1290 题目大意: n刀最多可以把一块蛋糕切多少块 题目分析: 假如我们按照立体考虑的话,这题就非常不 ...

  4. Android的布局优化之include、merge 、viewstub

    以前在写布局的时候总是喜欢用自己熟悉的方式去写,从来也没有想过优化怎么的,后来又一次在上班的时候老大拿着我写的一个页面说我这个不行.我说这不是和设计图上的一模一样的么?怎么就不行了?然后他就跟我说了一 ...

  5. HDOJ(HDU) 2103 Family planning(需要注意范围)

    Problem Description As far as we known,there are so many people in this world,expecially in china.Bu ...

  6. LeetCode题目答案索引

    LeetCode-Two Sum LeetCode-Median of Two Sorted Arrays LeetCode-Longest Substring Without Repeating C ...

  7. AOJ 0121 广度优先搜索

    题意:7数码问题.在2×4的棋盘上,摆有7个棋子,每个棋子上标有1至7的某一数字,不同棋子上标的数字不相同.棋盘上还有一个空格(用0表示),与空格相邻(上下左右)的棋子可以移到空格中,该棋子原先位置成 ...

  8. sicily 1119 Factstone Benchmark

    题意:求满足n! < 2^k,n的最大值! 解题:指数比较转换成对数比较,达到降幂! 其中: log (n!) = log(n)+log(n-1)+...+log(1); log(2^k) = ...

  9. Migration workstation vms to openstack kvm

    Migration workstation vms to openstack kvm 分别分成(磁盘是否拆分,vms 是否 有多个磁盘驱动器) 1, linux迁移 vmware workstatio ...

  10. Citrix 服务器虚拟化之十八 桌面虚拟化之部署MCS随机桌面池

    Citrix 服务器虚拟化之十八  桌面虚拟化之部署MCS随机桌面池 完成桌面模版的制作后,可以开始虚拟桌面池的发布 说明: 环境基于实验十七 1.登录DC服务器创建一个组织单位名为Citrix,然后 ...