题外话:

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 — 相加效果

Demo1

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

Demo2

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

Demo3

总结

  1. 这个属性支持IE8+,其他浏览器基本都支持了(应该很少人用非常老的FF,CHROME这些吧)
  2. 感觉border-box非常适合用来排版布局,因为不用担心内距填充这些导致盒子大于包裹层大小,导致换行,或者其他乱七八糟的问题
  3. 标准盒子也有他的好处,可以针对性的控制内容块的大小..很细致的做出调整,就是需要计算比较麻烦点
Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

avatar 云原生

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生