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

如果不做特殊说明,我们日常所用的div都是正常盒子模型。

正常盒子模型

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

下图更方便理解。

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

现在红色的方块宽、高都是100。

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

样式中的宽度100,指的是content为100。

怪异盒模型

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

下图更方便理解。

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

这句话的理解,我们可以根据下图的具体示例来看。即便是红色方块宽度是100px,但是对于怪异盒模型,分配给内容区域的宽度就是90px。

那应该选择哪中盒子模型呢?

当然是“标准 w3c 盒子模型”了。

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

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

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

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

最后,在一些复杂的盒子模型里,建议大家使用border-box。

content-box和border-box的更多相关文章

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

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

  2. 关于line box,inline box,line-height,vertical-align之间的关系

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

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

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

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

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

  5. 解读SSD中的Default box(Prior Box)

    1:SSD更具体的框架如下: 2: Prior Box 缩进在SSD中引入了Prior Box,实际上与anchor非常类似,就是一些目标的预选框,后续通过softmax分类+bounding box ...

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

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

  7. CSS 框模型( Box module )

    框和布局 在 KB005: CSS 层叠 中已经介绍了 CSS 的重要之处.CSS 可以说是页面表现的基础, CSS 可以控制布局,控制元素的渲染. 布局是讲在电影画面构图中,对环境的布置.人物地位的 ...

  8. KB006: CSS 框模型( Box module )

    框和布局 在 KB005: CSS 层叠 中已经介绍了 CSS 的重要之处.CSS 可以说是页面表现的基础, CSS 可以控制布局,控制元素的渲染. 布局是讲在电影画面构图中,对环境的布置.人物地位的 ...

  9. 我们常用,却容易忽视——CSS的BFC(Block formatting contexts)

    BFC——一个我们容易忽视掉的布局神器 今天给大家说说BFC这个概念,在说概念前,先给大家看个例子: 首先,定义三个div块元素   效果: 我们发现,块级元素的排列顺序是从上往下,一块接着一块,在w ...

  10. BFC——一个我们容易忽视掉的布局神器

      今天给大家说说BFC这个概念,在说概念前,先给大家看个例子: 首先,定义三个div块元素   效果: 我们发现,块级元素的排列顺序是从上往下,一块接着一块,在w3c中,是这样解释block-lev ...

随机推荐

  1. 26.C++- 泛型编程之类模板(详解)

    在上章25.C++- 泛型编程之函数模板(详解) 学习了后,本章继续来学习类模板   类模板介绍 和函数模板一样,将泛型思想应用于类. 编译器对类模板处理方式和函数模板相同,都是进行2次编译 类模板通 ...

  2. Java_Collections工具类

    Collections 工具类 * Collection与Collections区别 Collection 接口,(大部分集合类的实现接口) Collections 工具类(针对列表) * Colle ...

  3. FastJson序列化Json自定义返回字段,普通类从spring容器中获取bean

    前言: 数据库的字段比如:price:1 ,返回需要price:1元. 这时两种途径修改: ① 比如sql中修改或者是在实体类转json前遍历修改. ②返回json,序列化时候修改.用到的是fastj ...

  4. 如何让gitbook与github仓库关联

    一.账号注册 分别https://legacy.gitbook.com/login和https://github.com/注册账号. https://legacy.gitbook.com/login登 ...

  5. [jQuery]循环遍历改变a标签的href

    把info类下面所有的a标签链接后天加"#article". jQuery(document).ready(function($){ $('.info a').each(funct ...

  6. Java多线程面试题整理

    部分一:多线程部分: 1) 什么是线程? 线程是操作系统能够进行运算调度的最小单位,它被包含在进程之中,是进程中的实际运作单位.程序员可以通过它进行多处理器编程,你可以使用多线程对运算密集型任务提速. ...

  7. 直接通过Binder的onTransact完成跨进程通信

    1.具体代码: 服务端实现: public class IPCService extends Service { private static final String DESCRIPTOR = &q ...

  8. Jmeter接口测试问题及解决方法积累

    一.各个类型参数的位置 plain body query parameter URI 路径上 二.特殊字符处理 \"作为参数输入到接口,会出现错误 响应断言中如果有用到正则表达式,不能包含正 ...

  9. Android-简单总结一下图片压缩

    最近项目需要用到图片压缩,所以简单总结一下.大致分为三种压缩. 图片质量压缩. 意思就是降低图片的质量,针对文件处理,但本身的像素点并不会减少. 本来像素点是这样的,经过算法计算,若一个像素点周围所存 ...

  10. DAY4(PYTHON)列表的嵌套,range,for

    li=['a','b','开心','c'] print(li[2].replace ( ' 心 ', ' kaixin ' ) ) 输出:'a','b','开kaixin','c' li= ['abc ...