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. ModelAndView对象

    ModelAndView属性中两个最重要的属性是model和view. view即视图,保存的是视图信息. model即模型,以<K,V>形式保存模型数据,上图可以看到是MdelMap类型 ...

  2. A - 饭卡

    电子科大本部食堂的饭卡有一种很诡异的设计,即在购买之前判断余额.如果购买一个商品之前,卡上的剩余金额大于或等于5元,就一定可以购买成功(即使购买后卡上余额为负),否则无法购买(即使金额足够).所以大家 ...

  3. iOS逆向之Reveal

    Reveal是一个强大的UI分析工具,使用它可以查看各个界面的视图层级,在解决界面显示问题时非常有用.它最大的特点就是非常直观,查看UI布局的时候非常方便. 我们知道,Reveal官网提供的方法只能监 ...

  4. WPF中TreeView的+-号和连线style的一种实现

    最近又开始跟WPF打交道,项目里面用到了TreeView这个控件.然后需要有一个连线的外观就像是这样 二话不说,百度了一下,找到一个实现, 通道. 把代码拷贝到项目里面,跑了一下,看上去还不错.但是这 ...

  5. 项目Alpha冲刺（团队4/10）

    项目Alpha冲刺(团队4/10) 团队名称: 云打印 作业要求: 项目Alpha冲刺(团队) 作业目标: 完成项目Alpha版本 团队队员 队员学号 队员姓名 个人博客地址 备注 221600412 ...

  6. SSD报告 - QRadar远程命令执行

    SSD报告 - QRadar远程命令执行 漏洞摘要 QRadar中的多个漏洞允许远程未经身份验证的攻击者使产品执行任意命令.每个漏洞本身并不像链接那么强大 - 这允许用户从未经身份验证的访问更改为经过 ...

  7. Elasticsearch 自定义多个分析器

    分析器(Analyzer) Elasticsearch 无论是内置分析器还是自定义分析器,都由三部分组成:字符过滤器(Character Filters).分词器(Tokenizer).词元过滤器(T ...

  8. 理解Docker

    Docker Image OS分为 内核(kernel) 和 用户 空间,kernel 启动后,会挂载root文件系统提供用户空间. Docker Image 就相当于一个 root文件系统.是一个特 ...

  9. 【不遮遮掩掩】Github上传本地代码以及常见问题解决方案

    2019.20.18更新: 把完整命令打一遍吧,不然看完太累了不是 //初始化文件夹 git init //初始化目录,把基本文件下载下来,如ignore文件 git pull --rebase or ...

  10. web自动化测试---概述

    最早的时候是做功能测试,web都是自己手工点击看看有没问题,没有系统的进行测试,更别说自动化测试了,那是一段不堪回首的往事,就是因为这,很多问题都流出去了,这是作为测试人员的一大失职,痛定思痛,开始学 ...