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. 过滤器和拦截器filter和Interceptor的区别

    1.创建一个Filter过滤器只需两个步骤 创建Filter处理类 web.xml文件中配置Filter 2.Servlet中的过滤器Filter是实现了javax.servlet.Filter接口的 ...

  2. Codeforces791 B. Bear and Friendship Condition

    B. Bear and Friendship Condition time limit per test 1 second memory limit per test 256 megabytes in ...

  3. 《mysql必知必会》学习_第18章_20180807_欢

    第18章 全文本搜索 P121  #创建一个新表,对表的列进行定义,定义之后,MySQL自动维护该索引# create table productnotes ( note_id  int   NOT ...

  4. Real World Parsec --- 一个简便易学的 解释器

    学习链接如下: http://bms.tratao.com/desktop/doc/0c3802e4ee404a71407f34996eff98ef 另外的解析器 ANTLR,学过一阵子,比较难,没应 ...

  5. iOS逆向之TheOS

    TheOS 被设计为一个在基于 Unix 平台 (Mac OS X.IOS…) 和大多数 的Linux 平台下开发 iOS 程序的集成开发环境.说是集成开发环境,其实就是给我们准备好了一些代码模板.预 ...

  6. Unity3d让某个物体一直正对着相机

    //将以下代码绑定到相机上 using UnityEngine; using System.Collections;   public class LookatScipt : MonoBehaviou ...

  7. GCD on Blackboard

    题目大意:给你n个数,然后在这n个数中选一个数,选中的这个数可以变成任意的数,使这n个数的gcd(最大公约数)最大.打印这个最大的gcd. 思路:这题一看貌似很复杂,其实这题只要你知道前缀和  和  ...

  8. go连接mysql

    package main import ( "database/sql" "fmt" _ "github.com/go-sql-driver/mysq ...

  9. python 中numpy中函数hstack用法和作用

    定义: Stack arrays in sequence horizontally (column wise). Take a sequence of arrays and stack them ho ...

  10. LeetCode：145_Binary Tree Postorder Traversal | 二叉树后序遍历 | Hard

    题目:Binary Tree Postorder Traversal 二叉树的后序遍历,题目要求是采用非递归的方式,这个在上数据结构的课时已经很清楚了,二叉树的非递归遍历不管采用何种方式,都需要用到栈 ...