标签：样式   一个   的区别   pre   out   html   inf   延伸   strong   

盒子模型

当对一个文档进行布局（lay out）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）。CSS 决定这些盒子的大小、位置以及属性（例如颜色、背景、边框尺寸…）。

——MDN

1. 盒子模型的组成

盒子模型由以下几个部分（四种盒子）组成：

• content box
• padding box
• border box
• margin box

这四种盒子分别对应着盒子中的四个区域：

• content area
• padding area
• border area
• margin area

2. 盒子模型中的关键四个属性

content area，padding area、border area和margin area都有相应的属性，并且通过相应的属性能够调节对应部分在盒子中所占的大小。

2.1 内容 content

内容区域用于显示内容。大小可以通过width和height设置。

div {
    width: 100px;
    height: 100px;
}

2.2 外边距 margin

一般使用外边距将两个相邻的盒子分开。可以通过margin属性来控制。

div {
    width: 100px;
    height: 100px;

    margin: 20px;/* 将margin的上下左右都设置20px */
}

实际上简写margin属性还有以下几种

• 四个值：上，右，下，左。 （从顶部开始顺时针旋转）
• 三个值：上，左右，下。
• 两个值：上下，左右。
• 一个值：上下左右。 （上面例子给出的情况）

margin值都是从上开始的。

如果只想控制某一边的外边距我们可以使用margin-top、margin-right、margin-bottom、margin-left

div {
    width: 100px;
    height: 100px;

		margin-top: 20px;/* 只将上外边距（上面的margin）设置20px */
}

2.3 边框 border

边框区域扩展自内边距区域，是容纳边框的区域。

控制尺寸的语法和margin是一样的。（border属性还可以控制边框颜色，框线样式，但是这里不讨论）

div {
    width: 100px;
    height: 100px;

		boder-top: 20px;/* 只讲上边框设置20px */
}

2.4 内边距 padding

内边距区域由内边距边界限制，扩展自内容区域，负责延伸内容区域的背景，填空元素中内容与边框的间距。

控制尺寸的语法和margin是一样的。

div {
    width: 100px;
    height: 100px;

		boder-top: 20px;/* 只讲上边框设置20px */
}

3. 两种盒子

在CSS中盒子分为两种。

• 标准盒子模型
• IE盒子模型

而这两种盒子的区别是对width和height这两种属性的解释。

3.1 概述

• 标准盒子模型（默认）

  width和height只控制content，也就是说改变标准盒子模型的width和height属性只会改变content area。

  div {
      width: 100px;
      height: 100px;
  }
  

  Firefox中盒子如下：

中间蓝色的部分是content area，大小为100*100。

• IE盒子模型

  在IE盒子中，width和height属性控制的是content area、padding area和border area三块区域之和。而标准盒子的长宽属性只能控制content area。

  div {
      box-sizing: border-box;
      width: 100px;
      height: 100px;
  
      padding: 20px;
  }
  

  Firefox中盒子如下：

当我们给外边距属性padding设置20px的时候，由于IE盒子的width和height属性控制的是content，padding，border三个区域的大小，所以原本应该是content的长和宽分了一部分给padding。

注意：在标准盒子中，如果你给border或者是padding添加了大小，那么将会撑大盒子。

3.2 使用

浏览器默认使用标准盒模型。我们可以通过CSS来设置是使用标准盒子还是使用IE盒子

div {
    box-sizing: border-box;/* 使用IE盒子 */
		box-sizing: content-box;/* 使用标准盒子 */
}

理解记忆一下：

两种盒子的不同其实就是计算width和height的方式不同，在标准盒子中只计算content area，而IE盒子中计算的是border area里面包含的padding area和content area。

这个时候我们再看box-sizing，换成中文可以理解成盒子的大小。而对应的两种属性，一个是content-box，理解为内容盒子，也就是说盒子的大小是内容盒子的大小，另一个是border-box，理解为以边框作为边界的盒子，也就是说盒子的大小是以边框为边界的盒子的大小。

CSS中的盒子模型

标签：样式   一个   的区别   pre   out   html   inf   延伸   strong   

原文地址：https://www.cnblogs.com/meakle/p/13943799.html