理解box-sizing属性border-box，content-box，其实也是理解正常盒模型与异常盒模型。

正常盒模型

正常盒模型，是指块元素box-sizing属性为content-box的盒模型。一般在现代浏览器中使用的都是正常盒模型content-box，它也是标准 w3c 盒子模型。

参见  CSS盒模型

正常盒模型是指：盒模型的大小包括content，padding，border，并且先做content.。

正常盒模型的大小会以内容优先自动扩展，内部子元素超过父元素给定的大小，会将父元素撑大。

怪异盒模型

怪异盒模型，是指块元素box-sizing属性为border-box的盒模型。一般在IE浏览器中默认为这种怪异盒模型，但是由于其自身的特殊性，手机页面中也有使用怪异盒模型。

怪异盒模型是先做盒。然后添加border，padding，最后做content。即保证盒模型优先，先做盒再放内容，不管内容是否放得下，一般手机上用的更多。

更通俗的说，怪异盒模型中，父元素的盒模型确定，子元素是无法撑开父元素的盒模型，只能在盒模型剩余空间展示。

怎么样才算是选择了“标准 w3c 盒子模型”呢？

很简单，就是在网页的顶部加上 doctype 声明。假如不加 doctype 声明，那么各个浏览器会根据自己的行为去理解网页，

即 ie 浏览器会采用 ie 盒子模型去解释你的盒子，而 ff 会采用标准 w3c 盒子模型解释你的盒子。所以网页在不同的浏览器中就显示的不一样了。

反之，假如加上了 doctype 声明，那么所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子，网页就能在各个浏览器中显示一致了

content-box与border-box区别的更多相关文章

  1. outline使用方法,outline与border的区别:

    在浏览器里,当鼠标点击或使用Tab键让一个链接或者一个radio获得焦点的时候,该元素将会被一个轮廓虚线框围绕.这个轮廓虚线框就是 outline . outline 能告诉用户那一个可以激发事件的h ...

  2. outline与border的区别

    在浏览器里,当鼠标点击或使用Tab键让一个链接或者一个radio获得焦点的时候,该元素将会被一个轮廓虚线框围绕.这个轮廓虚线框就是 outline . outline 能告诉用户那一个可以激发事件的h ...

  3. python requests的content和text方法的区别(转)

    原文地址: http://blog.csdn.net/xie_0723/article/details/51361006 问题: 一直在想requests的content和text属性的区别,从pri ...

  4. Vagrant 手册之 box - 创建基础 box

    原文地址 有一种特殊的 box 被称为"base box".这些 box 包含 Vagrant 运作所需的最低限度,通常不是对现有的 Vagrant 环境("base b ...

  5. display:box和flex的区别

    没区别,仅是各阶段草案命名flex是最新的 但是在实际的浏览器测试中,display: flex 不能完全替代display: -webkit-box display: box 使用可以参考http: ...

  6. js中box和box（）的区别

    window.onload = function(){ var input = document.getElementByTagName('input')[0]; input.onclick = bo ...

  7. 关于line box，inline box，line-height，vertical-align之间的关系

    1.content area 围绕着文字的一种box,高度由font-size和font-family决定.在chrome控制器里,你用鼠标志向某个内敛元素,显示的高度值. 2.inline box的 ...

  8. [04-05]box框模型(Box Model)定义了元素框处理元素内容、内边距、边框和外边距的方式

    实际占有的宽 = width + 2padding(内边距) + 2border(边框) + 2margin(外边距) 实际占有的高 = height + 2padding + 2border + 2 ...

  9. python requests的content和text方法的区别

    requests对象的get和post方法都会返回一个Response对象,这个对象里面存的是服务器返回的所有信息,包括响应头,响应状态码等.其中返回的网页部分会存在.content和.text两个对 ...

  10. [UE4]Vertical Box结合Horizontal Box创建出类似微信的经典手机界面

    头部标题,中部为自动填充,底部为一个Horizontal Box,其中的“通讯录”文字比较宽,需要设置Size.Fill=1.5

随机推荐

  1. Java多线程——死锁

    当一个线程永远地持有一个锁,并且其他线程都尝试获得这个锁时,那么他永远被阻塞,当线程A持有锁L并想获得锁M的同时,线程B持有锁M并同时尝试获得锁L时,那么两个线程将永远的等待下去,这中情况就是简单的死 ...

  2. 使用js栈stack类的实现

    使用js栈stack类的实现 /*使用栈stack类的实现*/ function stack() { this.dataStore = [];//保存栈内元素,初始化为一个空数组 this.top = ...

  3. c#调用R

    R.NET使用文档 介绍 本页面涉及R.NET1.5.13. 1.5.13版本在功能上等同于1.5.12,但可作为一个包在NuGet.org上获得. R.NET使.NET框架与R统计语言在同一进程进行 ...

  4. 剑指offer五十一之构建乘积数组

    一.题目 给定一个数组A[0,1,...,n-1],请构建一个数组B[0,1,...,n-1],其中B中的元素B[i]=A[0]*A[1]*...*A[i-1]*A[i+1]*...*A[n-1].不 ...

  5. Win7中安装EclipsePHP

    1. 安装WarmServer(一键式安装apache+php+mysql); 2. 将安装后的EclipsePHP工作目录workspace指向WarmServer安装目录下的www目录下即可 异常 ...

  6. Spring Security构建Rest服务-0400-使用切片拦截rest服务

    Restful API的拦截: 1,过滤器(Filter) 2,拦截器(Interceptor) 3,切片(Aspect) 1,过滤器 和传统javaweb一鸟样,例,记录controller执行时间 ...

  7. ActiveRecord::Fixture::FormatError: ActiveRecord::Fixture::FormatError

    环境:window 7+ruby2.33+rails5.0.. 该提示的意思是固件格式错误: 但是又没有提示是哪一行 非常蛋疼,我照成的原因居然是没有对齐,请看:(下面的activated_at没有和 ...

  8. Android 开发工具类 03_HttpUtils

    Http 请求的工具类: 1.异步的 Get 请求: 2.异步的 Post 请求: 3.Get 请求,获得返回数据: 4.向指定 URL 发送 POST方法的请求. import java.io.Bu ...

  9. 机器学习--boosting家族之Adaboost算法

    最近在系统研究集成学习,到Adaboost算法这块,一直不能理解,直到看到一篇博文,才有种豁然开朗的感觉,真的讲得特别好,原文地址是(http://blog.csdn.net/guyuealian/a ...

  10. linux下清空c++ cin无效流的方式

    cin.clear(); cin.ignore(10000,'\n');//这里面的参数很重要