在一个文档中，每个元素都被表示为一个矩形的盒子。盒子模型具有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. jquery插件封装

    HTML <!DOCTYPE html> <html> <head> <title></title> <style> .page ...

  2. VMware Workstation 12 Player之安装林耐斯-Linux Red Hat 7 -系统

    Linux系统之Red Hat 7 安装笔记... Red Hat(红帽)公司(NYSE:RHT)是一家开源解决方案供应商,也是标准普尔500指数成员.总部位于美国北卡罗来纳州的罗利市,截止2015年 ...

  3. Java中的继承性特性

    继承性是java中的第二特性之一.而继承性最为关键的地方为:代码重用性的问题,利用继承性可以从已有的类中继续派生出新的子类,也可以利用子类扩展出更多的操作功能. 继承性的实现代码为:class 子类 ...

  4. thinkjs—控制器方法名不能大写

    async updateInfoAction(){ ... } 上面的接口如果通过ajax访问,就会报404的错误.原因似乎在于访问updateInfo时,会自动转化成小写,而小写的updateinf ...

  5. php工具方法

    备忘常用方法 1.寻找子栏目(权限\菜单列表...) function getSon($list,$pid){ $arr=''; foreach ($list as $k=>$v){ if($v ...

  6. 9-9害死人不偿命的(3n+1)猜想

    1001. 害死人不偿命的(3n+1)猜想 (15) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 卡拉兹(Ca ...

  7. Maven01——简介、安装配置、入门程序、项目构建和依赖管理

    1 Maven的简介 1.1 什么是maven 是apache下的一个开源项目,是纯java开发,并且只是用来管理java项目的 Svn eclipse   maven量级 1.2 Maven好处 同 ...

  8. 四,ESP8266 TCP服务器

    我要赶时间赶紧写完所有的内容....朋友的东西答应的还没做完呢!!!!!!!没想到又来了新的事情,,....... 配置模块作为TCP服务器然后呢咱们连接服务器发指令控制继电器吸合和断开 控制的指令呢 ...

  9. unity调用c++ dll方法介绍

    摘要 unity用的很普遍,现在很多代码还是用c++写的,需要用unity去调用c++的代码.这里介绍了一种unity调用c++ dll的方法,希望有所帮助. 我采用的软件是Visual Studio ...

  10. 解决 SQL 注入的另类方法

    本文是翻译,版权归原作者所有 原文地址(original source):https://bitcoinrevolt.wordpress.com/2016/03/08/solving-the-prob ...