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. Merge Parts of Rar/7z Package in Linux

    When file is too large, we will compress it and split it into several parts. Now Let me show you how ...

  2. IMAGE WATCH工具安装与学习

    1.下载安装 从下载地址搜索IMAGE WATCH,即可下载自己所需要的IMAGE WATCH工具. 安装ImageWatch,双击ImageWatch.vsix进行安装即可: 2.使用示例 这里首先 ...

  3. 内置函数_map()、reduce()、filter()

    map().reduce().filter() map()内置函数把一个函数func依次映射到序列或迭代器对象的每个元素上,并返回一个可迭代的map对象作为结果,map对象中每个元素是原序列中元素经过 ...

  4. two sum --无脑法

    public class Solution { /* * @param numbers: An array of Integer * @param target: target = numbers[i ...

  5. 多态&虚函数

     (1).对象类型:           a.静态类型:对象声明时的类型,编译的时候确定           b.动态类型:对象的类型是运行时才能确定的 class A {}; class B:pub ...

  6. MyBatis 源码分析 - 配置文件解析过程

    * 本文速览 由于本篇文章篇幅比较大,所以这里拿出一节对本文进行快速概括.本篇文章对 MyBatis 配置文件中常用配置的解析过程进行了较为详细的介绍和分析,包括但不限于settings,typeAl ...

  7. 【接口时序】4、SPI总线的原理与Verilog实现

    一. 软件平台与硬件平台 软件平台: 1.操作系统:Windows-8.1 2.开发套件:ISE14.7 3.仿真工具:ModelSim-10.4-SE 硬件平台: 1. FPGA型号:Xilinx公 ...

  8. 每日分享！canvas的使用~

    今天大概的说下canvas的使用~ canvas是H5新增的一个元素,可以用来在canvas上绘制一些图形! 如何使用canvas呢?     首先我们用canvas绘制一条直线!   <!DO ...

  9. PHP基础架构

    PHP基础架构 一.PHP简介 PHP是一种非常流行的高级脚本语言,尤其适合Web开发,快速.灵活和实用是PHP最重要的特点.PHP自1995年由Lerdorf创建以来,在全球得到了非常广泛的应用. ...

  10. Eclipse 中 Debug 调试 java 代码一直报 Source not found

    今天使用eclipse的debug调试代码,一直没法正常调试,一按F6就提示Source not found 根据提示发现可能是另一个项目影响了,所以把另一个项目Close Project,这次直接t ...