两个参数：

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. [Postman]发送第一个请求(1)

    通过API请求,您可以与具有要访问的API端点的服务器联系,并执行某些操作.这些操作是HTTP方法. 最常用的方法是GET,POST,PUT和DELETE.方法的名称是不言自明的.例如,GET使您可以 ...

  2. Python之父：为什么操作符很有用？

    这是我在python-ideas上发布的一些东西,但我认为这些很有趣,应该分享给更多的人. 最近有很多关于合并两个dict(词典)的运算符的讨论. 这促使我思考为什么有些人喜欢运算符,我想起了30多年 ...

  3. HDFS第一次课堂测试

    起初在linux上想使用Map/Reduce来完成操作,发现需要导入的jar包过多,大概在6点左右写完程序却跑不起来,一直在找jar包,直接被卡死在这里. 从教室回来之后,发现好多人都是在window ...

  4. HOG算法资源备忘

    最近再研究这个算法,找了不少资料来研究,发现这方面的资料好的并不多,今天就把找到的经典的资料做一个汇总,方便后续查阅吧. 一 基本概念和推导: 1 解释最清楚的:中文网站:https://blog.c ...

  5. PostgreSQL踩坑现场

    1.PostgreSQL表名.字段名.别名等大小敏感,默认都会转化成小写形式.如果名字中有大写字母,必须分别添加双引号.在写后台时,注意添加\ 如表名:TestTable中有个字段名userName ...

  6. linux audit工具

    一个不错的博客,可以吸收营养,等读完后再决定写什么? https://www.cnblogs.com/bldly1989/p/7204358.html changelog -------------- ...

  7. 【mysql】模糊查询的使用

    1.like/not like 关键字的模糊查询(SQL模式) 基础模板:  SELECT  *  FROM   test  WHERE name LIKE '%你好_'     :匹配       ...

  8. Word文档使用密码加密

    Word文档使用密码加密 方法如下: 文件-->信息-->保护文档-->用密码进行加密-->设置密码

  9. 关于sql和MySQL的语句执行顺序(必看！！！)

    今天遇到一个问题就是mysql中insert into 和update以及delete语句中能使用as别名吗?目前还在查看,但是在查阅资料时发现了一些有益的知识,给大家分享一下,就是关于sql以及My ...

  10. 项目总结二：人脸识别项目（Face Recognition for the Happy House）

    一.人脸验证问题(face verification)与人脸识别问题(face recognition) 1.人脸验证问题(face verification):           输入       ...