box-sizing用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。它有content-box、border-box和inherit三种取值。inherit指的是从父元素继承box-sizing表现形式，不再冗赘。

1. 属性讲解

content-box

默认值，也是css2.1中的盒子模型。在计算width和height时候，不计算border、padding和margin。高度、宽度都只是内容高度。

border-box

css3新增。 width和height属性包括内容，内边距和边框，但不包括外边距。

计算公式：

  1. width = width = border + padding + 内容宽度
  2. height = border + padding + 内容高度

2. 考虑盒子模型的margin

从上面可以知道，即时是border-box也是不计算margin，只是多余计算了border和padding。因为border和padding都是盒子模型的一部分，但是margin标记的是盒子和盒子的间距。所以，border-box的解释很符合常理。

问题来了，如果有时候一定要设置margin，怎么做到自由控制来保证兼容？例如，我们下面要设置一个撑满页面的盒子元素，而且有外边距干扰，怎么做？

实现如下效果图：

代码：源码下载

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>yuanxin.me</title>

  <style type="text/css">

    *{

      margin: 0;

      padding: 0;

    }

    #app {

      box-sizing: border-box; /* 指定计算方式 */

      margin: 10px; /* 外边距干扰 */

      /* 利用 css3 的 calc */

      width: calc(100vw - 2*10px);

      height: calc(100vh - 2*10px);

    }

  </style>

</head>

<body>

  <div id="app">

  </div>

</body>

</html>

所以，当需要计算外边距(margin)，可以配合css3中的四则运算（calc）来使用。

3. 使用建议

根据项目中的使用经验和w3c的建议，推荐将box-sizing属性设置为border-box。

* {

  margin: 0;

  padding: 0;

}

div {

  box-sizing: border-box;

}

4. 关于

欢迎技术交流，引用请注明出处。

个人网站：godbmw.com

原文链接：border-sizing属性详解和应用

border-sizing属性详解和应用的更多相关文章

  1. [转]CSS vertical-align属性详解 作者：黄映焜

      CSS vertical-align属性详解 posted @ 2014-08-26 17:44 黄映焜   前言:关于vertical-align属性. 实践出真知. 垂直居中. 第二种用法. ...

  2. HTML中元素的position属性详解

    HTML中元素的position属性详解 转载自:https://blog.csdn.net/wangzunkuan/article/details/81540935   HTML中DOM元素有5种定 ...

  3. CSS2.1SPEC：视觉格式化模型之width属性详解(下)

    本文承接CSS2.1SPEC:视觉格式化模型之width属性详解(上),继续分析CSS视觉格式化模型中width以及相关值的计算问题: 注:与上节不同,本节的demo中由于出现了float,absol ...

  4. Css盒模型属性详解（margin和padding）

    Css盒模型属性详解(margin和padding) 大家好,我是逆战班的一名学员,今天我来给大家分享一下关于盒模型的知识! 关于盒模型的属性详解及用法 盒模型基本属性有两个:padding和marg ...

  5. css 14-CSS3属性详解：Web字体

    14-CSS3属性详解:Web字体 #前言 开发人员可以为自已的网页指定特殊的字体(将指定字体提前下载到站点中),无需考虑用户电脑上是否安装了此特殊字体.从此,把特殊字体处理成图片的方式便成为了过去. ...

  6. css 12-CSS3属性详解：动画详解

    12-CSS3属性详解:动画详解 #前言 本文主要内容: 过渡:transition 2D 转换 transform 3D 转换 transform 动画:animation #过渡:transiti ...

  7. css 11-CSS3属性详解（一）

    11-CSS3属性详解(一) #前言 我们在上一篇文章中学习了CSS3的选择器,本文来学一下CSS3的一些属性. 本文主要内容: 文本 盒模型中的 box-sizing 属性 处理兼容性问题:私有前缀 ...

  8. android:exported 属性详解

    属性详解 标签: android 2015-06-11 17:47 27940人阅读 评论(7) 收藏 举报 分类: Android(95) 项目点滴(25) 昨天在用360扫描应用漏洞时,扫描结果, ...

  9. OutputCache属性详解（一）一Duration、VaryByParam

    目录 OutputCache概念学习 OutputCache属性详解(一) OutputCache属性详解(二) OutputCache属性详解(三) OutputCache属性详解(四)— SqlD ...

随机推荐

  1. Codeforces Round #514 (Div. 2) B - Forgery

    这个题我一开始没思路,最后也没思路 2个小时一直没思路 本来还想解释题意的,写了半天发现解释的不是很清楚,你还是google翻译一下吧 这个题解法是这样的: 首先,给你图案里面有很多的点,每个点的周围 ...

  2. Android Studio中的大量findViewById

    一. 分析 在Android Studio中开发时,findViewById是用的最多的函数之一.经常需要对返回的view进行类型转换,输入麻烦.代码丑陋. 本文提供两种方案来解决这个问题: 1.安装 ...

  3. 将json对象转化成jsonp对象

    这个Demo用来检查是否具有唯一性 //检查 /user/check/{param}/{type} @RequestMapping("/check/{param}/{type}") ...

  4. 一些有价值的Blog推荐

    待看的一些文章 1. 性能调优攻略 http://coolshell.cn/articles/7490.html 2. 内存的存储管理--段式和页式管理的区别 http://blog.sina.com ...

  5. C#+ZXing.dll生成手机路径导航二维码

    1.原谅我先写点废话哈 这两天用C#写一个C端的软件,甲方提出一个很无理的需求(在C端的程序中实现路径导航,关键是这个程序最终是运行在物理隔绝的电脑上的……),头疼了好几天,领导突然想到可以把坐标+百 ...

  6. [UWP]不那么好用的ContentDialog

    ContentDialog是UWP开发中最常用的组件之一,一个体验良好的UWP应用很难避免不去使用它.博客园里也有许多的文章介绍如何来利用ContentDialog实现各种自定义样式的弹窗界面.不过实 ...

  7. Lambda表达式where过滤数据

    使用Lambda的表达式来过滤符合条件的数据.下面的代码实现,是把字符阵列中,把名字长度等于3元素找出来. class Bv { public void LambdaExpression() { st ...

  8. 腾讯大数据之TDW计算引擎解析——Shuffle

    转自 https://www.csdn.net/article/2014-05-19/2819831-TDW-Shuffle/1 摘要:腾讯分布式数据仓库基于开源软件Hadoop和Hive进行构建,T ...

  9. scrapy爬虫－－苏宁图书

    实现业务逻辑如下: 1. 创建scrapy项目,并生成 爬虫2. 在suning.py中实现Schedul 和 Spider业务逻辑3. 修改start_urls为正确的初始请求地址4. 构造pars ...

  10. [Leetcode]394.字符串解码

    题目与解释 给定一个经过编码的字符串,返回它解码后的字符串. 编码规则为: k[encoded_string],表示其中方括号内部的 encoded_string 正好重复 k 次.注意 k 保证为正 ...