html里面什么是盒子-猿码集

1. 概述

盒子（Box）是 HTML 中的一种基本元素，也是布局的基本单位，所有 HTML 元素都可以看成是盒子。盒子模型（Box Model）是 CSS 中的一个重要概念，它指每个 HTML 元素所占用的空间，由 content、padding、border 和 margin 四个属性组成。

其中，content 属性指的是 HTML 元素的内容区域，padding 属性指的是内容区域和边框之间的空白区域，border 属性指的是内容区域和 margin 之间的边框，margin 属性指的是边框和相邻元素之间的空白区域。

<div style="width: 200px; height: 100px; 
    padding: 20px; border: 2px solid #000;
    margin: 10px;">
  <p>这是一个盒子</p>
</div>

2. 盒子模型

2.1 标准盒子模型

在标准盒子模型中，盒子的宽度（width）指的是内容区域的宽度，不包括 padding、border 和 margin，而盒子的高度（height）指的是内容区域的高度，同样不包括 padding、border 和 margin。


/* 标准盒子模型 */
.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 2px solid #000;
  margin: 10px;
}

如上述代码所示，这个盒子的宽度为 200px + 2 x 20px + 2 x 2px = 244px，高度为 100px + 2 x 20px + 2 x 2px = 144px。

2.2 IE盒子模型

在 IE 盒子模型中，盒子的宽度（width）指的是内容区域加上 padding 和 border 的宽度，而盒子的高度（height）指的是内容区域加上 padding 和 border 的高度。


/* IE 盒子模型 */
.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 2px solid #000;
  margin: 10px;
  box-sizing: border-box;
}

如上述代码所示，通过将 box-sizing 属性设置为 border-box，这个盒子的宽度即为 200px，高度即为 100px。

3. 盒子的定位方式

3.1 盒子的默认定位方式

盒子的默认定位方式为 normal flow，即元素按照其在 HTML 中的顺序依次排列，从左往右、从上往下。如果两个相邻的元素宽度之和超出了父元素的宽度，那么第二个元素会被折行。


<div style="width: 200px; height: 100px; 
    border: 2px solid #000;">
  <p style="float: left;">盒子1</p>
  <p style="float: right;">盒子2</p>
  <p>盒子3</p>
</div>

如上述代码所示，盒子1 和盒子2 分别浮动到了左侧和右侧，盒子3 则按照正常流的顺序排列。

3.2 盒子的浮动定位方式

浮动（float）定位方式指的是将盒子脱离正常流，通过让盒子“浮动”在其他元素之上的方式进行布局。浮动的盒子会尽可能向上靠拢，并尽可能贴近它前面的其他盒子。当盒子无法再向上浮动时，它就会被“折行”到下一行。


<div style="width: 400px; height: 200px; 
    border: 2px solid #000;">
  <div style="width: 100px; height: 100px; 
      float: left; border: 2px solid red;"></div>
  <div style="width: 100px; height: 100px; 
      float: left; border: 2px solid blue;"></div>
  <div style="width: 100px; height: 100px; 
      float: left; border: 2px solid green;"></div>
  <div style="clear: both;"></div>
</div>

如上述代码所示，三个盒子都浮动到了左侧。因为盒子之间没有设置间距，所以它们紧贴在一起。需要添加一个空的 div 元素并设置 clear 属性，来清除浮动影响，保证父元素能够正常地包含盒子。

3.3 盒子的绝对定位方式

绝对定位（absolute positioning）方式指的是将盒子脱离正常流，并相对于它的最近的一个定位祖先元素进行位置定位。如果没有找到定位祖先，那么就相对于文档的 body 元素进行位置定位。


<div style="width: 400px; height: 200px; 
    border: 2px solid #000; position: relative;">
  <div style="width: 100px; height: 100px; 
      position: absolute; right: 0; top: 0; 
      border: 2px solid red;"></div>
</div>

如上述代码所示，盒子1 相对于父元素的右侧和顶部进行了绝对定位。由于父元素设置了 position: relative，所以盒子1 会相对于父元素进行绝对定位。如果父元素没有设置定位，那么盒子1 就会相对于文档的 body 元素进行绝对定位。

3.4 盒子的固定定位方式

固定定位（fixed positioning）方式指的是将盒子固定在浏览器的窗口中，不随页面的滚动而移动。


<div style="width: 100px; height: 100px; 
    position: fixed; right: 0; bottom: 0; 
    border: 2px solid red;"></div>

如上述代码所示，盒子1 固定在浏览器窗口的右下角。

4. 参考资料

MDN - 盒子模型

MDN - 定位和层叠上下文

《CSS 权威指南》

html里面什么是盒子