在一个文档中，每个元素都被表示为一个矩形的盒子。盒子模型具有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标准盒模型还是IE怪异模型box-sizing属性的应用设置的更多相关文章

  1. 标准盒子模型和IE盒子模型

    标准盒子模型 ＝ margin + border + padding + content (content =  width | height) IE盒子模型 ＝ margin + content ( ...

  2. 理解标准盒模型和怪异模式&box-sizing属性

    盒子模型 主要有两种,w3c标准盒模型,IE下的怪异盒模型,其实还有就是弹性盒模型(上篇文章我们用他很好的解决了对齐问题) DTD规范 盒模型分为:标准w3c盒模型.IE盒模型.以及css中的伸缩盒模 ...

  3. padding标准盒模型和怪异盒子模型

    我们都知道padding是为块级元素设置内边距 但是在使用过程中,我们却会遇到一些问题.padding的标准盒模型和怪异盒模型 padding盒子模型 我们通过demo来讲这个问题,用文字干讲第一没意 ...

  4. div的标准盒模型和怪异盒模型

    (1)标准盒模型 标准盒模型宽高不会被padding和margin撑开 (2)怪异盒模型 怪异盒模型宽高会被padding和margin撑开

  5. 标准盒模型、怪异盒模型（box-sizing）

    CSS中Box model是分为两种: W3C标准(标准盒模型) 和 IE标准盒子模型(怪异盒模型).大多数浏览器采用W3C标准模型,而IE中则采用Microsoft自己的标准. 重要的一个属性是bo ...

  6. CSS3之盒模型

    1. 什么是盒模型? css中的每个元素都是一个盒模型, 包括html body元素, 浏览器解析css的时候也会把每个元素看成一个盒子来解析. 盒模型具备的属性(存在的特点)有: content ( ...

  7. IE盒模型和标准盒模型

    标准盒模型和ie盒模型(怪异盒模型) w3c标准盒模型 width和height不包括padding和border ie盒模型 width和height包含padding和border ie8以上都是 ...

  8. boxsizing属性 IE盒模型和标准盒模型

    CSS3有一个非常有用但应用不广泛的属性: box-sizing: content-box | border-box | inherit content-box,默认属性,遵从标准盒模型. borde ...

  9. css3：盒模型以及box-sizing属性

    文档中的每个元素被描绘为矩形盒子.渲染引擎的目的就是判定大小,属性——比如它的颜色.背景.边框方面——及这些盒子的位置.在CSS中,这些矩形盒子用标准盒模型来描述.这个模型描述了一个元素所占用的空间. ...

随机推荐

  1. 转 - Linux安装python3.6

    https://www.cnblogs.com/kimyeee/p/7250560.html

  2. git 回退各种场景操作

    在git的一般使用中,如果发现错误的将不想提交的文件add进入index之后,想回退取消,则可以使用命令:git reset HEAD <file>...,同时git add完毕之后,gi ...

  3. Linux 学习 (十一) 软件安装管理

    Linux软件安装管理 学习笔记 软件包简介 软件包分类: 源码包 :脚本安装包 二进制包(RPM 包.系统默认包) 源码包的优点: 开源,如果有足够的能力,可以修改源代码 可以自由选择所需的功能 软 ...

  4. 使用jenkins进行前端项目自动部署

    前面的话 后端的nodeJS项目可以使用pm2进行自动部署,由于前端项目打包后是静态资源,不需要进程守护.一般地,前端项目使用jenkins来进行自动部署,包括打包.测试等一系列流程.本文将详细介绍j ...

  5. 使用css实现无滚动条滚动+使用插件自定义滚动条样式

    使用css实现无滚动条滚动,摘抄自:曹小萌博客 使用css实现无滚动条滚动,大体思路是在div外面再套一个div.这个div设置overflow:hidden.而内容div设置 overflow-x: ...

  6. POJChallengeRound2 Guideposts 【单位根反演】【快速幂】

    题目分析: 这题的目标是求$$ \sum_{i \in [0,n),k \mid i} \binom{n}{i}G^i $$ 这个形式很像单位根反演. 单位根反演一般用于求:$ \sum_{i \in ...

  7. 怎样在ISE14.7中固化FLASH文件

    前言 当工程开发完成后,bit文件类型掉电后会消失,而此时采用FLASH固化就很重要了. 软件版本:ISE14.7 流程 1.对生成FLASH文件进行设置:配置速率为33,选择66貌似配置失败,中庸之 ...

  8. Java自定义异常类以及异常拦截器

    自定义异常类不难,但下面这个方法,它的核心是异常拦截器类. 就算是在分布式系统间进行传递也可以,只要最顶层的服务有这个异常拦截器类(下例是在 springboot 项目中) 1.自定义异常类,继承自 ...

  9. P1020 导弹拦截 (贪心+最长不降子序列)

    题目描述 某国为了防御敌国的导弹袭击,发展出一种导弹拦截系统.但是这种导弹拦截系统有一个缺陷:虽然它的第一发炮弹能够到达任意的高度,但是以后每一发炮弹都不能高于前一发的高度.某天,雷达捕捉到敌国的导弹 ...

  10. [NOI2005]维护数列——平衡树观止

    本题题解并不详细,不推荐大家看这一篇. 可以看这篇 题目描述 请写一个程序,要求维护一个数列,支持以下 6 种操作:(请注意,格式栏 中的下划线‘ _ ’表示实际输入文件中的空格) 100%的数据中, ...