两个参数：

border-box和content-box

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>box-size</title>

    <style>

        .border-box{

            width: 100px;

            height: 100px;

            background-color: violet;

            box-sizing: border-box;

            padding: 10px;

        }

        .content-box {

            width: 100px;

            height: 100px;

            background-color: aquamarine;

            box-sizing: content-box;

            padding: 10px;

        }

    </style>

</head>

<body>

<div class="border-box"></div>

<div class="content-box"></div>

</body>

</html>

在此不难发现两个框不同，.border-box那个计算方式为 　80（随着内边距和边框的增加而减少） + 10 * 2 （内边距两边）= 100 （不变），

无论内边距（10）和边框（忘了加了）怎么变，它们相加的结果始终等于自己设置的宽度（100）。

说白了，宽度就是包括内边距和边框。

而　　.content-box的计算方式为   100 + 10 * 2 = 120

若有雷同，可能我是从您那里学来的。

CSS3 - 盒子的 box - size的更多相关文章

  1. CSS3 弹性盒子(Flex Box)

    1 CSS3 弹性盒子(Flex Box) 1 http://caniuse.com/#search=flex%20box https://www.w3.org/TR/css-flexbox-1/ C ...

  2. CSS3盒子模型

    web前端必须了解的CSS3盒子模型 1.需要了解的属性以及属性值 display:box或者display:inline-box box-orient:horizontal | vertical ( ...

  3. 盒子模型(Box Model)

    盒子模型(Box Model) ■ 盒子模型——概念 在网页设计中常用的属性名:内容(content),填充(padding),边框(border),边界(margin),CSS 盒子模式都具备这些属 ...

  4. CSS自学笔记（10）:CSS3盒子模型

    CSS3为CSS技术的升级版本.最新版本. 就CSS而言,它是一个模块,是一个庞大而又复杂的模块,但是在CSS3中,将这一个庞大的模块分解为一个个容易理解的同时又很精简的小模块,同时CSS3中又添加了 ...

  5. css3盒子相关样式

    1.css3的display属性: inline:内联 inline-block:可以设置宽高的内联 block:设置为块: <!DOCTYPE html> <html lang=& ...

  6. HTML和CSS的盒子模型(Box model)

    本文作为属性篇的最后一篇文章, 将讲述HTML和CSS的关键—盒子模型(Box model). 理解Box model的关键便是margin和padding属性, 而正确理解这两个属性也是学习用css ...

  7. css盒子模型 css3盒子相关样式

    1.内边距(内边距在content外,边框内) 内边距属性: padding          设置所有边距 padding-bottom     底边距 padding-left           ...

  8. 教你吃透CSS的盒子模型(Box Model)

    CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的H ...

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

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

随机推荐

  1. 微信小程序新闻信息列表展示

    微信小程序信息展示列表 wxml <!-- 轮播图 --> <view class='haibao' bindtap="seeDetail" id="{ ...

  2. promise与async-await

    一. async/await 相对 promise 的优势 async/await 拥有更通用的作用域,使得代码有更好的易读性和可维护性. promise 由于其链式调用,每一个函数都有自己的作用域, ...

  3. 【ABP框架系列学习】模块系统(4)

    0.引言 ABP提供了构建模块和通过组合模块以创建应用程序的基础设施.一个模块可以依赖于另外一个模块.通常,程序集可以认为是模块.如果创建多个程序集的应用程序,建议为每个程序集创建模块定义. 当前,模 ...

  4. 开发中常用js记录（三）

    (1)Jquery 判断一个元素下是否有指定的class$('div').is('.classname')$('div').hasClass('redColor') (2)获得窗口长宽等$(windo ...

  5. MFC控件GDI编程

    MFC控件GDI编程 一丶学习内容 1.了解常用的GDI函数绘图. 2.使用常用的画笔画刷. 二丶常用的GDI函数绘图 上方则为我们常用的GDI函数了. 画线 矩形. 以及圆 等等. 2.1 画线代码 ...

  6. linux 两个查找工具 locate，find

    linux 中有很多查找工具,今天主要讲解locate,find两个工具. 一.locate 1.性能介绍 查询系统上预建的文件索引数据库 /var/lib/mlocate/mlocate.db 注意 ...

  7. python捕获Ctrl+C信号

    我们希望当服务器接收到一个 SIGTERM 信号时能够自动关机,或者做一些善后的操作,以下是实现的方法 import signal # 自定义信号处理函数 def my_handler(signum, ...

  8. openssl enc(对称加密)

    openssl系列文章:http://www.cnblogs.com/f-ck-need-u/p/7048359.html 对称加密工具.了解对称加密的原理后就很简单了,原理部分见下文. openss ...

  9. Java核心技术 对象与类

    对象与对象变量: 要想使用对象,就必须首先构造对象,并指定其初始状态,然后,对对象应用方法. 在Java中,使用构造器构造新实例.构造器是一种特殊的方法,用来构造并初始化对象. 在实际开发中,通常需要 ...

  10. 不能在此路径中使用此配置节。如果在父级别上锁定了该节，便会出现这种情况。锁定是默认设置的(overrideModeDefault="Deny")，或者 是通过包含 overrideMode="Deny" 或旧有的 allowOverride="false" 的位置标记明确设置的。

    问题: 不能在此路径中使用此配置节.如果在父级别上锁定了该节,便会出现这种情况.锁定是默认设置的(overrideModeDefault="Deny"),或者是通过包含 overr ...