在一个文档中，每个元素都被表示为一个矩形的盒子。盒子模型具有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. Centos 开机后，登录时无法输入密码怎么解决

    Centos 开机无法输入密码怎么解决... ========================= Q:centos启动后,输入登入账号,再输密码就输不进去了,打什么字都没有用... A:输入密码是不显 ...

  2. poj3368 uva11235 Frequent values

    Description You are given a sequence of n integers a1 , a2 , ... , an in non-decreasing order. In ad ...

  3. redis数据库操作的C++简单封装

    用c++简单封装了redis的基本操作(hiredis) 接口包括:①链接和断开连接.②设置键值对(set).③查询键值对(get).④删除键值对(del).⑤将所有键显示出来 若任何一处发生错误,返 ...

  4. SSH:Action中Service无法实例化

    原来的代码: MailAction: public class MailAction extends ActionSupport { private SysuserinfoService sysuse ...

  5. 数据库索引B-树和B+树

    一开始学习数据结构的时候,主要学习的是数组,队列,链表,队列,栈,树这些数据结构,其中树主要学习二叉树,平衡二叉树,二叉搜索树等这些子节点最多只有两个的树结构.但是,当我们接触数据库的时候,你会发现数 ...

  6. MySQL DNS反查导致连接缓慢

    场景 机器A上的一个模块连接机器B上的MySQL,在实验室网络环境下正常:同样A.B两台机器,网络环境切换为与外界隔离的一个小型局域网环境,A上的模块与B上MySQL建立连接非常慢.   环境 SuS ...

  7. MyBatis框架——动态SQL、缓存机制、逆向工程

    MyBatis框架--动态SQL.缓存机制.逆向工程 一.Dynamic SQL 为什么需要动态SQL?有时候需要根据实际传入的参数来动态的拼接SQL语句.最常用的就是:where和if标签 1.参考 ...

  8. JSON创建键值对（key是中文或者数字）方式详解

    JSON创建键值对(key是中文或者数字)方式详解 先准备好一个空的json对象 var obj = {}; 1. 最原始的方法 obj.name = 'zhangsan'; //这种方式很简单的添加 ...

  9. LDMIA、LDMIB、LDMDB、LDMDA、STMIA、LDMFD、LDMFA、LDMED、LDMEA指令详解

    简介: ARM指令中多数据传输共有两种: LDM:(load  much)多数据加载,将地址上的值加载到寄存器上 STM:(store much)多数据存储,将寄存器的值存到地址上 主要用途:现场保护 ...

  10. 原创：LNMP架构部署个人博客网站 禁止转载复制

    nginx编译安装步骤 ①. 检查软件安装的系统环境 cat /etc/redhat-release uname -r ②. 安装nginx的依赖包(pcre-devel openssl-devel) ...