两个参数：

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. IDEA一定要懂的32条快捷键

    阅读本文大概需要 2 分钟.   作者:帝都羊 这些IntelliJ IDEA键盘快捷键可以让你专注于编写代码,让你的双手在键盘上起舞. 1.搜索文件名: ↑   Shift 快速连续按两下 2.显示 ...

  2. Robot Framework - 1 - 测试用例与测试库

    01- 关于测试库(Test libraries) Test libraries provide the actual testing capabilities to Robot Framework ...

  3. ionic hidden scroll bar

    ionic 项目中隐藏所有的ion-content滚动条 在variables.scss文件中添加以下代码 ::-webkit-scrollbar { display: none; }  

  4. Jenkins 忘记admin密码拯救方法

    突然有一日发现自己忘记了jenkins的管理员密码,因为我一直登录的是另外一个非管理员账户.如果出现必须要使用管理员账户操作的,比如用户管理那里的,必须要管理员账号吧,这就尴尬了. 很方的我打开安装j ...

  5. mysql 开发基础系列11 存储引擎memory和merge介绍

    一. memory存储引擎 memoery存储引擎是在内存中来创建表,每个memory表只实际对应一个磁盘文件格式是.frm.   该引擎的表访问非常得快,因为数据是放在内存中,且默认是hash索引, ...

  6. SpringCloud2.0入门3-新的eureka依赖

    前言 Springboot2.0推出有一段时间了,是要学习1.5+还是从2.0开始?犹豫的原因是资料不全,目前现有的资料大部分是1.0的.但作为学习者,肯定要学习最新的.不如,先试试. 搭建Eurek ...

  7. ES6躬行记（4）——模板字面量

    模板字面量(Template Literal)是一种能够嵌入表达式的格式化字符串,有别于普通字符串,它使用反引号(`)包裹字符序列,而不是双引号或单引号.模板字面量包含特定形式的占位符(${expre ...

  8. webmagic 的 helloworld

    <dependency> <groupId>us.codecraft</groupId> <artifactId>webmagic-core</a ...

  9. 【SQL跟踪工具】SQL Profiler 跟踪器

    什么是SQL Profiler SQL Server Profiler 是一个功能丰富的界面,用于创建和管理跟踪并分析和重播跟踪结果. 事件保存在一个跟踪文件中,稍后试图诊断问题时,可以对该文件进行分 ...

  10. SpringBoot学习(四)-->SpringBoot快速入门,开山篇

    Spring Boot简介 Spring Boot的目的在于创建和启动新的基于Spring框架的项目.Spring Boot会选择最适合的Spring子项目和第三方开源库进行整合.大部分Spring ...