两个参数：

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. 电脑知识，一键开启Win10“超级性能模式”

    现在主流系统以及从WIN7慢慢的转移到了WIN10,微软也为WIN10做了很多优化跟更新.今天要跟大家说的这个功能很多人肯定没有听说过.那就是WIN10的超级性能模式. 1. 大多数Win10是没有滴 ...

  2. 吴恩达机器学习笔记40-用调和平均数F来进行查准率和查全率之间的权衡（Trading Off Precision and Recall by F sore）

    在很多应用中,我们希望能够保证查准率和查全率的相对平衡. 我们可以将不同阀值情况下,查全率与查准率的关系绘制成图表,曲线的形状根据数据的不同而不同: 我们希望有一个帮助我们选择这个阀值的方法.一种方法 ...

  3. Java学习笔记一：数据类型I

    GitHub代码练习地址:https://github.com/Neo-ML/JavaPractice/blob/master/IntPractice1.java https://github.com ...

  4. StringBuffer 和 StringBuilder 的 3 个区别

    StringBuffer 和 StringBuilder 它们都是可变的字符串,不过它们之间的区别是 Java 初中级面试出现几率十分高的一道题.这么简单的一道题,栈长在最近的面试过程中,却经常遇到很 ...

  5. Kubernetes集群搭建之Etcd集群配置篇

    介绍 etcd 是一个分布式一致性k-v存储系统,可用于服务注册发现与共享配置,具有以下优点. 简单 : 相比于晦涩难懂的paxos算法,etcd基于相对简单且易实现的raft算法实现一致性,并通过g ...

  6. git push 到github时，报错：ERROR: Permission to xxx.git denied to user

    之前我电脑的本地git已经登录了一个github账号,今天想换另外一个新的github账户来提交项目,相当于同一台电脑使用两个github账户. 于是我先修改用户名和邮箱. git config -- ...

  7. 《CLR Via C#》读书笔记：26.线程基础

    一.线程开销 操作系统创建线程是有代价的,其主要开销在下面列举出来了. 内存开销 线程内核对象 拥有线程描述属性与线程上下文,线程上下文占用的内存空间为 x86 架构 占用 700 字节.x64 架构 ...

  8. android项目架构 -----Android 知识体系与常用第三方框架

    好东西值得分享 ,这是网络上总结的一些开源的东西直接就拿过来了  .... Android通用流行框架大全 先把这张图放在这 ,先来谈一谈项目结构 .我喜欢将东西按模块来划分: 都知道module . ...

  9. JavaScript和Ajax部分（2）

    11. DOM如何操作文档的标准节点? 1) 查看节点:使用getElementById(),getElementByName(),getElementByTagName可以查看HTML文档中的任何元 ...

  10. thinkphp自动创建数据对象分析

    thinkphp有一个自动创建数据对象的create方法,核心代码如下 public function create($data='',$type='') { // 如果没有传值默认取POST数据 i ...