在一个文档中，每个元素都被表示为一个矩形的盒子。盒子模型具有4个属性['外边距(margin)','边框(border)','内边距(padding)','内容(content)']。

我们要设置某个元素的大小定位，肯定会和这四个元素打交道。只是元素的宽高计算有些默认值。

box-sizing属性用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。可以使用此属性来模拟不正确支持CSS盒子模型规范的浏览器的行为。

目前支持box-sizing的浏览器：



就目前来看，大部分人是建议在初始化样式的时候，就设置为border-box，这样更方便设置元素的宽高

* {

  -webkit-box-sizing: border-box;

     -moz-box-sizing: border-box;

          box-sizing: border-box;

}

语法

box-sizing: content-box | border-box | inherit;

值

content-box

默认值，标准盒模型。width 和 height 只包括内容(content)的宽和高。在宽度和高度之外绘制元素的内边距和边框。

尺寸计算公式：

width = 内容的宽度。

height = 内容的高度。

border-box

IE的怪异模型 width和height属性包括内容(content)、内边距(padding)、边框(border)，但是不包括外边距(margin)。在宽度和高度之内绘制元素的内容、内边距和边框。

尺寸计算公式：

width = 内容的宽度 + 内边距的宽度 + 边框的宽度。

height = 内容的高度 + 内边距的高度 + 边框的高度。

inherit

规定应该从父元素继承 box-sizing 属性的值

例子

在线例子

See the Pen box-sizing的使用 by LiuwqGit (@weiqinl) on CodePen.

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>box-sizing的使用</title>

  <style type="text/css">

  .box {

    width: 460px;

    height: 400px;

    border: 1px solid red;

    margin: 10px;

    background-color: gray;

  }

  .content {

    box-sizing: content-box;

    border: 10px solid blue;

    width: 300px;

    padding: 20px;

    margin: 30px;

    background-color: green;

  }

  .border {

    box-sizing: border-box;

    border: 10px solid blue;

    width: 300px;

    padding: 20px;

    margin: 30px;

    background-color: yellow;

  }

  .inherit {

    box-sizing: inherit;

    border: 10px solid red;

    width: 300px;

    padding: 20px;

    margin: 30px;

    background-color: red;

  }

  </style>

</head>

<body>

  <div class="box">

    <div class="content">

      我是content-box值(默认)

      <br/>box-sizing: content-box;

      <br/>border: 10px solid blue;

      <br/>width: 300px;

      <br/>padding: 20px;

      <br/> margin: 30px;

      <div class="inherit">我是inherit值</div>

    </div>

  </div>

  <div class="box">

    <div class="border">

      我是border-box值

      <br/>box-sizing: border-box;

      <br/>border: 10px solid blue;

      <br/>width: 300px;

      <br/>padding: 20px;

      <br/>margin: 30px;

      <div class="inherit">我是inherit值</div>

    </div>

  </div>

</body>

</html>

chrome截图：

CSS3 box-sizing属性的应用的更多相关文章

  1. CSS盒子模型之CSS3可伸缩框属性（Flexible Box）

    CSS盒子模型(下) 一．CSS3可伸缩框(Flexible Box) 可伸缩框属性(Flexible Box)是css3新添加的盒子模型属性,有人称之为弹性盒模型,它的出现打破了我们经常使用的浮动布 ...

  2. 半深入理解CSS3 object-position/object-fit属性

    半深入理解CSS3 object-position/object-fit属性 转载:https://www.zhangxinxu.com/wordpress/2015/03/css3-object-p ...

  3. 浅谈CSS3中display属性的Flex布局

    浅谈CSS3中display属性的Flex布局   最近在学习微信小程序,在设计首页布局的时候,新认识了一种布局方式display:flex 1 .container { 2 display: fle ...

  4. CSS3外轮廓属性

    外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似,但和元素边框border完全不同,外轮廓线不占用网页布局空间,不一定是矩形,外轮廓是属于一种动态样式,只有元素获取到焦点或者 ...

  5. 学习笔记：CSS3的filter属性

    CSS3的filter属性 (版权归原作者所有) http://www.jianshu.com/p/ca7a2bdcc1e7/comments/4956985 filter: blur(5px); f ...

  6. CSS3利用text-shadow属性实现多种效果的文字样式展现

    一.效过图展示: 已经是比较久之前学习的文字效果了.但是还是很实用很有趣的.利用CSS3提供的text-shadow属性可以给页面上的文字添加阴影效果,因此可以替换掉之前使用过的一些繁琐的图片.到目前 ...

  7. css3.0新属性效果在ie下的解决方案(兼容性)

    css3.0增加的新属性,如投影.渐变.旋转.圆角等等!这些新标准属性在ie6.ie7.ie8浏览器版本里得不到很好的支持,相信ie以后的新版本也会支持这些新属性的.目前ie6.ie7.ie8浏览器不 ...

  8. CSS3展现精彩的动画效果 css3的动画属性

    热火朝天的css3无疑吸引了很多前端开发者的眼球,然而在css3中的动画属性则是新功能中的主打招牌,说到css3的动画属性不得不让人想起这三个属性:Transform﹑Transition﹑Anima ...

  9. CSS3中动画属性transform、transition 和 animation

    CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明:        transform   从字面来看transform的释义为改变,使 ...

  10. css3 的box-sizing属性理解

    * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } 有时候在某些项目中 ...

随机推荐

  1. 解决mybatis空字段null字段不返回

    Mybatis在使用resultMap来映射查询结果中的列,如果查询结果中包含空值的列(不是null),则Mybatis在映射的时候,不会映射这个字段,例如 查询 name,sex,age,数据库中的 ...

  2. 一个C#操作RabbitMQ的完整例子

    一.下载RabbitMQ http://www.rabbitmq.com/install-windows.html 二.下载OTP http://www.erlang.org/downloads 三. ...

  3. 《principles of model checking》中的离散时间马尔科夫链

    <principles of model checking>中的离散时间马尔科夫链 说明:此文为我自学<principles of model checking>第十章内容的笔 ...

  4. PHP导出excle图片与文字

    try { //CI框架引入PHPExcel $this->load->library('PHPExcel'); $objPHPExcel = new PHPExcel(); //图片处理 ...

  5. Animate.css 一款牛逼的css3动画库

    Animate.css是一款很牛逼的,跨浏览器的css3动画库,使用方法也很简单只要引入一个animate.min.css就可以了, 简单使用 1 首先引入 animate的 css 文件样式 cdn ...

  6. Jmeter之接口测试

    最近才入职新公司,好几天没有写博客了,经过一个朋友提醒,刚刚好觉得用Jmeter来做接口测试真的是再好不过了.下面就详细讲解下这两天我利用Jmeter做的接口测试. [安装Jmeter] 详细见博文: ...

  7. bzoj 3529 数表

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=3529 题目大意:令F(i)为i的约数和,多次询问对于1<=x<=n,1< ...

  8. STL中队列（queue）的使用方法

    STL 中队列的使用(queue) 基本操作: push(x) 将x压入队列的末端 pop() 弹出队列的第一个元素(队顶元素),注意此函数并不返回任何值 front() 返回第一个元素(队顶元素) ...

  9. Centos 6系统修复grub

    author:JevonWei 版权声明:原创作品 错误界面如下时,应该是grub的stage数据有缺失,应该从新安装grub GRUB引导的stage1阶段损坏,系统启动会直接进入光盘引导界面,st ...

  10. react 入门

    一:virtual DOM  虚拟DOM树 在React中,render执行的结果得到的并不是真正的DOM节点,结果仅仅是轻量级的JavaScript对象,我们称之为virtual DOM. 虚拟DO ...