本文讨论的是块级盒子(Block-level box)的盒子模型(Box Model)

一、W3C标准的盒子模型                             

二、IE盒子模型                                  

三、两种模型的区别                                        

W3C标准盒子模型:

外盒模型

元素空间宽度 = content width + padding + border + margin的宽度

元素空间高度 = content width + padding + border + margin的高度

内盒模型

  元素宽度 = content height + padding + border的宽度

元素高度 = content height + padding + border的高度

 IE盒子模型:

外盒模型

元素空间宽度 = content width + margin的宽度

元素空间高度 = content height + margin的高度

内盒模型

  元素宽度 = content width

 元素高度 = content height

当IE6~8处于怪异模式下就会使用IE盒子模型,否则将使用W3C标准盒子模型。

四、CSS3规则——box-sizing                           

box-sizing有三个值,默认是content-box(表示元素使用W3C盒子模型),而border-box(表示元素使用IE盒子模型),inherit(从父元素上继承)

浏览器支持:IE8开始支持

Element{
-moz-box-sizing: border-box; // FireFox3.5+
-o-box-sizing: border-box; // Opera9.6(Presto内核)
-webkit-box-sizing: border-box; // Safari3.2+
-ms-box-sizing: border-box; // IE8
box-sizing: border-box; // IE9+,Chrome10.0+,Safari5.1+,Opera10.6
}

五、总结                                      

盒子模型是CSS的基础,虽然IE一直被大家诟病,但不代表IE盒子模型就比W3C标准盒子模型差,后面我们一起深入学习CSS3样式规则box-sizing就明白了。

尊重原创,转载请注明来自: http://www.cnblogs.com/fsjohnhuang/p/3967623.html ^_^肥仔John

六、参考                                      

http://www.cnblogs.com/releaseyou/archive/2009/04/16/1437456.html

http://blog.csdn.net/ncode/article/details/7428746

http://www.w3cplus.com/content/css3-box-sizing

http://jorux.com/archives/property-4-if-you-love-css/

CSS魔法堂:盒子模型简介的更多相关文章

  1. CSS box-flex属性,然后弹性盒子模型简介

    今天做项目的时候发现一个css3的新属性flex 一.什么是flex 它的作用是能够按照设置好的规则来排列容器内的项目,而不必去计算每一个项目的宽度和边距.甚至是在容器的大小发生改变的时候,都可以重新 ...

  2. CSS魔法堂:说说Float那个被埋没的志向

    前言  定位系统中第一难理解就是Normal flow,而第二就非Float莫属了,而Float难理解的原因有俩,1. 一开头我们就用错了:2. 它跟Normal flow靠得太近了.本文尝试理清Fl ...

  3. CSS魔法堂:display:none与visibility:hidden的恩怨情仇

    前言  还记得面试时被问起"请说说display:none和visibility:hidden的区别"吗?是不是回答完display:none不占用原来的位置,而visibilit ...

  4. CSS魔法堂:Box-Shadow没那么简单啦:)

    前言  说起box-shadow那第一个想法当然就是用来实现阴影,其实它还能用于实现其他好玩的效果的,本篇就打算说说box-shadow的那些事. 二话不说看效果 3D小球 <style typ ...

  5. CSS魔法堂:"那不是bug,是你不懂我!" by inline-block

    前言  每当来个需要既要水平排版又要设置固定高宽时,我就会想起display:inline-block,还有为了支持IE5.5/6/7的hack*display:inline;*zoom:1;.然后发 ...

  6. CSS魔法堂:小结一下Box Model与Positioning Scheme

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

  7. CSS魔法堂:你一定误解过的Normal flow

    前言  刚接触CSS时经常听到看到一个词"文档流",那到底什么是"文档流"呢?然后会看到"绝对定位和浮动定位能脱离文档流",从这句可以看到文 ...

  8. CSS魔法堂:Absolute Positioning就这个样

    前言 当我们以position:absolute之名让元素脱离Normal flow的控制后,以为通过left和top属性值即可让元素得以无限的自由时,却发现还有各种神秘的力量左右着它的来去,于是我们 ...

  9. CSS魔法堂:你真的懂text-align吗?

    前言 也许提及text-align你会想起水平居中,但除了这个你对它还有多少了解呢?本篇打算和大家一起来跟text-align来一次负距离的交往,你准备好了吗? text-align属性详解 The ...

  10. CSS魔法堂:深入理解line-height和vertical-align

    前言 一直听说line-height是指两行文本的基线间的距离,然后又说行高等于行距,最近还听说有个叫行间距的家伙,@张鑫旭还说line-height和vertical-align基情四射,贵圈真乱啊 ...

随机推荐

  1. Zookeeper开源客户端框架Curator简介[转]

    Curator是Netflix开源的一套ZooKeeper客户端框架. Netflix在使用ZooKeeper的过程中发现ZooKeeper自带的客户端太底层, 应用方在使用的时候需要自己处理很多事情 ...

  2. 向Spotify学习如何设计产品(转)

    导语:Spotify是瑞典的精益创业项目,同时保持着很棒的产品交付记录.一般在产品上线之后,开发者才知道人们喜不喜欢它.Spotify如何解决这个问题? 本文转自 kent.zhu's Blog,原文 ...

  3. 完全图解scrollLeft,scrollWidth,clientWidth,offsetWidth 获取相对途径,滚动图片(网上找的,未经试验,但觉得比较好)

    获取元素的位置属性可以通过 HTMLElement.offsetLeft HTMLElement.offsetTop 但是,这两个属性所储存的数值并不是该元素相对整个浏览器画布的绝对位置,而是相对于其 ...

  4. 原创:goldengate从11.2升级到12.1.2

    goldengate从11.2升级到12.1.2 1.停止抽取进程 GGSCI (001.oracle.drs.dc.com) 286> stop EXTSJ01 2. 停止投递和复制进程 等待 ...

  5. 【转载】怎样使用ZEMAX导出高质量的图像动画

    Zemax 导出高质量图片与动画 (2013-08-13 11:01:51) http://blog.sina.com.cn/s/blog_628dd2bc0101dycu.html 转载▼ How ...

  6. 如何优雅的在MFC中使用cvSetMouseCallback?

    MFC与opencv的cvSetMouseCallback用起来感觉很不兼容. 大部分时候,用cvSetMouseCallback也许只是为了获取一个矩形框,或者绘制一个点,或者其它什么简易的图形,通 ...

  7. SecureCrt设置字符编码

    SecureCrt设置字符编码,参考:http://www.2cto.com/os/201412/365535.html

  8. Linux流量监控工具-iftop教程

    Linux流量监控工具-iftop教程http://automationqa.com/forum.php?mod=viewthread&tid=2854&fromuid=2

  9. webapi mvc 基础

    标题  状态  描述 WebAPI请求    http://www.cnblogs.com/babycool/p/3922738.html  Media Formatters in ASP.NET W ...

  10. Cubieboard2裸机开发之(二)板载LED交替闪烁

    前言 电路原理在文章http://www.cnblogs.com/lknlfy/p/3583806.html中已经说明,两个LED的原理图是一样的.要使两个LED交替闪烁,只需要在点亮蓝色LED,熄灭 ...