题外话:

W3C奉行的标准,就是content-box,就是须要计算边框,填充还有内容的;可是就我个人而言,

比較喜欢的是传统IE6时候的怪异模式,不用考虑容器是否会被撑开(打乱布局);

盒子模型差异

盒子大小计算原理

W3C标准盒子 = (边框 + 填充 + 内容块大小) ,牵一发而动全身;

传统IE6盒子 = 总体宽高(边框,填充和随盒子大小而调整变化)

若是计算占用位置,两种盒子都要算上margin(边距)

简言之,W3C标准盒子是须要相加各种大小得到总体的宽高,而传统的IE6是从总体减去内在元素大小而达到调整效果

CSS3:box-sizing

box-sizing : content-box | border-box | inherit;,针对火狐的还有个padding-box,差点儿不用啊!!!

  • content-box : 标准的W3C盒子模型
  • border-box: 传统IE6的盒子模型
  • padding-box: 眼下仅仅对火狐生效,也是减去适应..可是从padding開始

验证及效果

代码

简易代码,三个盒子

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>box-sizing</title>

    <style>

        .demo1,.demo2,.demo3{

            width:200px;

            height:200px;

            background-color: #2277AD;

            margin:20px;

        }

        .demo1{

            box-sizing: content-box;

            border:30px solid #12D732;

            padding:10px;

        }

        .demo2{

            box-sizing: border-box;

            border:30px solid #12D732;

            padding:10px;

        }

        .demo3{

            box-sizing: padding-box;

            border:30px solid #12D732;

            padding:10px;

        }

    </style>

</head>

<body>

    <div class="demo1">

        我是盒子内部的内容啊!!

    </div>

    <div class="demo2">

        我是盒子内部的内容啊!!

    </div>

    <div class="demo3">

        我是盒子内部的内容啊!!

    </div>

</body>

</html>

效果图

  • 标准模型的盒子大小(280X280) = 200 +10*2 + 30*2 — 相加效果

  • 传统IE6盒子大小(200X200) = 120 + 10 * 2 + 30*2 — 减去效果

  • 针对火狐的padding-box盒子大小(260X260) = 180 + 10*2 + 30*2 –减去效果从padding開始

总结

  1. 这个属性支持IE8+,其它浏览器基本都支持了(应该非常少人用非常老的FF,CHROME这些吧)
  2. 感觉border-box非常适合用来排版布局,由于不用操心内距填充这些导致盒子大于包裹层大小,导致换行,或者其它乱七八糟的问题
  3. 标准盒子也有他的优点,能够针对性的控制内容块的大小..非常仔细的做出调整,就是须要计算比較麻烦点

CSS3:box-sizing:不再为盒子模型而烦恼的更多相关文章

  1. CSS3学习笔记(2)-CSS盒子模型

    p{ font-size: 15px; text-indent: 2em; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid ...

  2. 【css3网页布局】flex盒子模型

    1.0 前言 网页布局(layout)是CSS的一个重点应用. 经典布局类型: 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊 ...

  3. CSS Box Model 盒子模型

    1. 介绍 1.1 什么是 Box Model 在HTML中的每个element(元素)都可以看作一个矩形的盒子,矩形从内到外依次由元素的内容(content).内边距(padding).边框(bor ...

  4. 003：CSS三大重点之一：盒子模型

    目录 1:盒子模型 2:边框: 2.1:合写 2.2:适用于:table系元素.边框合并 3:内边距 4:外边距: 4.1:盒子居中三大条件 4.2:外边距合并.外边距塌陷(父子嵌套)解决方法三种 前 ...

  5. 学习 day4 html 盒子模型

    盒子模型 1.框模型 框:页面上所有元素都可以称为“框” 框模型:(BOX Model),又称盒子模型 定义框处理元素内容.内边距padding.外边距margin.边框的样式border 外边距ma ...

  6. css 盒子模型 以及 box-sizing属性

    在标准的盒子模型下,css中 width,padding以及border的关系 关于css中的width和padding以及border的关系. 在css中,width和height指的是内容区域的宽 ...

  7. 0019 盒子模型（CSS重点）：边框、内外边距、布局稳定性、PS

    typora-copy-images-to: media 第01阶段.前端基础.盒子模型 盒子模型(CSS重点) css学习三大重点: css 盒子模型 . 浮动 . 定位 主题思路: 目标: 理解: ...

  8. CSS3与页面布局学习笔记（二）——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  9. 浅谈 css3 box盒子模型以及box-flex的使用

    display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分.   一.使 ...

随机推荐

  1. 11.Layers, Containers and Interfaces

    图层.容器和接口 当设计一个Ventuz场景时,某些节点的组合或设计会反复出现.例如在演示中使用的按钮或滑块,在整个过程中的呈现和外观都是一致的,唯一变化的是尺寸.位置和标签. 在设计复杂的演示时,另 ...

  2. postgres外部表如何修改源码适配pg升级

    postgres中外部表的应用如下: 但是许多在github上的fdw开源代码都是基于9.3以及9.4版本开发,原作者没有随着pg的版本升级而将外部表扩展升级,那只能靠自己去手动修改源码来让这些扩展能 ...

  3. 数据结构应用实例#栈&单链表#简易计算器

    修改BUG的时候一不小心BUG越修越多,鉴于维护程序并不是学习数据结构的初衷,我已经果断的弃坑了!! 以下内容再不更新,Github上的代码直接无法正常编译运行.... 参考参考就好,学习到栈的作用就 ...

  4. 微信开发配置JSSDK，注入权限验证，以及invalid signature签名错误解决

    在微信开发中很多功能都要用到微信JSSDK,关于JSSDK的使用,微信官方的文档已经比较详细,一定要仔细去看文档. <script src="https://res.wx.qq.com ...

  5. Python_多线程1（创建线程，简单线程同步）

    threading 模块除了包含 _thread 模块中的所有方法外,还提供的其他方法: threading.currentThread(): 返回当前的线程变量. threading.enumera ...

  6. android Adapter总结

    1.连接视图与数据.数据封装: 2.视图构造与配置: 3.数据更新监听: 4.视图重用机制. * An Adapter object acts as a bridge between an {@lin ...

  7. CAD增加一个有形的线型（网页版）

    主要用到函数说明: _DMxDrawX::AddTextStyle1 向数据库中增加一个文字样式.详细说明如下: 参数 说明 BSTR pszName 文字样式名称 BSTR pszFileName ...

  8. vue学习笔记（六）— 关于Vuex可以这样简单理解

    关于Vuex可以这样简单理解 作者:狐狸家的鱼 本文链接:关于Vuex GitHub:sueRimn 概念理解 和大多数文章都一样,从概念解释到引出问题再举例解决问题. 官网中,Vuex是状态管理模式 ...

  9. html 报告页面 v1.2 批量数据生成表格

    html 报告页面 v1.2 批量数据生成表格 上代码: <!DOCTYPE html> <html lang="en"> <head> < ...

  10. 转载：python 日期，季度，年份

    # 这个data_matrix[:,dimen] <= thresh_val 内标会返回data_matrix当中的值符合条件的,返回为True # ret_array 中就会返回 下标为Tru ...