标准模式:

　　总宽度/高度=width/height+padding+border+margin

　　

怪异模式(quirks 模式):

　　总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin

　　

设置盒子模型可通过 css3属性: box-sizing: content-box(默认值) | border-box | inhert | initial | unset

　　

参考: https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing

　　  http://blog.csdn.net/quguang65265/article/details/50970601

css -理解盒模型的更多相关文章

  1. CSS中盒模型的理解

    今天突然看到一篇关于CSS中盒模型的文章,忽然觉得自己竟然遗忘了很多小的地方,所以写一篇文章来记忆一下 (摘抄于千与千寻写的CSS盒子模型理解,并在自己基础上添加了一些东西,希望更完善,对大家有帮助) ...

  2. 利用Div+CSS(嵌套+盒模型)布局页面完整实例流程

    Div+CSS(嵌套+盒模型)布局页面完整实例流程: <!DOCTYPE html><html> <head>  <meta charset="UT ...

  3. 前端设计的常用属性，CSS的盒模型，页面布局的利器

    在CSS和HTML结合布局页面的过程中,有一组被人们称为“盒属性”的CSS样式,被广泛的使用到.相信经常布局写页面的朋友们对盒属性一定不陌生.在CSS技术的发展过程中,盒属性也有了许多次改进,今天小编 ...

  4. 深入理解CSS弹性盒模型flex

    × 目录 [1]版本更迭 [2]display [3]基本概念[4]伸缩容器[5]伸缩项目 前面的话 CSS3引入了一种新的布局模型——flex布局.flex是flexible box的缩写,一般称之 ...

  5. 一天搞定CSS：盒模型content、padding、border、margin--06

    1.盒模型 网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS盒子模式都具备这些属性. 这些属性我们可以用日常生活中的常见事物 ...

  6. CSS弹性盒模型flex概念

    盒模型分为:标准w3c盒模型.IE盒模型.以及css中的伸缩盒模型. 先说CSS的伸缩盒模型:flex模型是CSS3引入的新的布局模型,是flexible box的缩写,一般称之为弹性盒模型.和CSS ...

  7. css 06-CSS盒模型详解

    06-CSS盒模型详解 #盒子模型 #前言 盒子模型,英文即box model.无论是div.span.还是a都是盒子. 但是,图片.表单元素一律看作是文本,它们并不是盒子.这个很好理解,比如说,一张 ...

  8. css之盒模型

    盒模型由内容(content).填充(padding).边框(border).边界(margin)组成,一个盒子中主要的属性就5个:width.height.padding.border.margin ...

  9. 【CSS】盒模型+选择器(你选择的要操作的对象)

    盒模型 转http://www.cnblogs.com/cchyao/archive/2010/07/12/1775846.html 1.w3c标准的盒模型和ie的盒模型主要差别在于content的w ...

随机推荐

  1. 玩转BLE(3)_使用微信蓝牙精简协议伪造记步数据

    1. 前言 在物联网时代,有一个问题肯定会让人头疼(现在已经初露端倪了): 物联网中的IOT设备有两个主要特点: 1)简单小巧(不具备复杂的人机交互接口,需要手机等终端设备辅助完成配置.控制等功能). ...

  2. R语言 一套内容 从入门 到放弃

    [怪毛匠子整理] 1.下载 wget http://mirror.bjtu.edu.cn/cran/src/base/R-3/R-3.0.1.tar.gz 2.解压: tar -zxvf R-3.0. ...

  3. Java中String类常用方法（字符串中的子字符串的个数）

    重点内容 4种方法: 1.int indexOf(String str)返回第一次出现的指定子字符串在此字符串中的索引. 2.int indexOf(String str, int startInde ...

  4. Python多进程并发(multiprocessing)

    1.新建单一进程 如果我们新建少量进程,可以如下: 2.使用进程池 是的,你没有看错,不是线程池.它可以让你跑满多核CPU,而且使用方法非常简单. 注意要用apply_async,如果落下async, ...

  5. latex如何定义宏，插图统一尺寸减少工作量

    问题背景是这样的,因为我要在文中插入一系列的图片,但是这些图片的大小我要保持一致,来达到预期的效果. 比如我有三个figure,这三个figure中,每个figure里面有两行,5列图片,我想要的是, ...

  6. 工具提高效率 - iterm2

    快捷键 command + d, command + shift +d 显示所有记录 ITERM默认设置了终端能保留的历史输出行数,在进行调试时特别不方便,一旦输出过多就无法看到完整的历史记录. 在P ...

  7. css计算属性 calc()

    left: calc((100vw - 400px) / 2);   calc 进行简单的运算时,运算符号左右各要有一个空格,不然不起作用.

  8. day10 参数args kwargs 作用域

    函数参数/作用域/args/kwargs 1.参数 1.1参数基本知识 任意个数 任意类型 func("1",True) 1.2位置传参(调用函数并传入参数) def func(a ...

  9. PAT乙级考前总结（五)

    字符串处理 1003 我要通过! (20 分) “答案正确”是自动判题系统给出的最令人欢喜的回复.本题属于 PAT 的“答案正确”大派送 —— 只要读入的字符串满足下列条件,系统就输出“答案正确”,否 ...

  10. Spock - Document -06 - Modules

    Modules Peter Niederwieser, The Spock Framework TeamVersion 1.1 Guice Module Integration with the Gu ...