标准模式:

　　总宽度/高度=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. React相关:npm,ES6,

    1.NPM: 参考:npm使用入门  npm 学习笔记整理 2.ES6参考:ES6 let命令:ES6新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块 ...

  2. expdp用户10迁移到新环境11之正式实施

    expdp迁移源端数据库:cu    源端IP:   源端schema: xxx目标数据库:ora 目标IP:xxx操作流程:31日凌晨应用停,随后使用数据泵迁移,两套库迁移,迁移一套,迁移完毕应用确 ...

  3. Hive元数据找回

    如果不小心删除了了hive的元数据文件(/user/hive/warehouse),只要先前core-site.xml文件中设置了fs.trash.interval属性就可以找回.hdfs会为用户创建 ...

  4. bug狩猎

    最近需求少了,终于有时间修一下底层的bug,做一点工具方便查bug,写篇文章简单记录一下. 一是优化了一个玩法进程的启动速度.这个玩法需要用战力做匹配,玩家按战力分段放进不同的桶里,每个桶用skipl ...

  5. 十个有意思的Github Page

    1. Cooolis.github.io Cooolis是一个操作系统命令技巧备忘录 2. rfrd-tw.github.io 2018 台灣公投視覺化 3. confpad.github.io Co ...

  6. s21day17 python笔记

    s21day17 python笔记 一.内容回顾及补充 回顾 补充 第三方模块补充 需要下载安装后才能导入使用 安装方式: pip包管理工具 # 把pip.exe 所在的目录添加到环境变量中. pip ...

  7. svo_udp通信02——一组数据发送

    注意事项: 1.client 和server 定义的发送和接收数据(结构)要相同.如: client.c: struct position_packet {float pos_x[5];float p ...

  8. 我的代码-date

    # coding: utf-8 # In[24]: import timeimport datetimelocaltime = time.asctime( time.localtime(time.ti ...

  9. 【转】Cookie/Session机制详解

    Cookie/Session机制详解   会话(Session)跟踪是Web程序中常用的技术,用来跟踪用户的整个会话.常用的会话跟踪技术是Cookie与Session.Cookie通过在客户端记录信息 ...

  10. Python之PIL库的运用、GIF处理h

    一.PIL库简介 PIL(Python Image Library)库是Python语言的第三方库,它支持图像存储.显示和处理,它能够处理几乎所有图片格式,可以完成对图像的缩放.剪裁.折叠以及像图片添 ...