前端学习笔记--CSS盒

对于盒你了解多少呢？

盒

说到CSS的盒我相信大家并不陌生，毕竟布局和渲染的基本单位是盒。所以理解了盒，那么就可以轻松驾驭布局了。那么盒又分为哪几种呢？盒主要有块级盒子(block box)和内联盒子(inline box)，还有一种特殊的形态是块级盒子和内联盒子的中间状态块级内联盒子(inline block box)。下面做详细介绍：

块级盒子(block box)

说到块级盒子，我们先写个简单的代码

<div style="background-color:gray;height:20px"></div>
<div style="background-color:black;width:50px;height:20px;padding: 20px;margin: 10px;border: 2px solid blue;"></div>
<div style="background-color:red;height:20px"></div>

下面是浏览器渲染效果

div默认情况下是块级盒子，从上面的渲染效果我们可以得到一些块级盒子的特点。

• 绝大数情况下盒子会和父容器一样宽
• 每个盒子都会换行
• width和height属性可以更改盒子宽高
• padding、margin和border会将周围的元素推开。

内联盒子(inline box)

我们还是先看一段简单的代码，这里我用默认是内联盒子的span标签举例

<div style="background:blue;width:50%;margin:auto">
  <!--10px参考块-->
  <div style="width:10px;height:10px;background:orange;"></div>
  <!--内联盒子-->
  <span style="background: pink;">inline box</span><br>
  <span style="width:10px;height:10px;background:red;color:white;padding: 20px;margin:20px;border:2px solid green;">inline box 1</span> 
  <span style="width:10px;height:10px;background:gray;color:white">inline box 2</span>
</div>

浏览器渲染效果如下

从上面的渲染效果，我们也能得到内联盒子的一些特点。

• 内联盒子不会换行
• width和height属性不生效
• padding、margin和border会被应用，但是垂直方向不会产生推开的效果, 水平方向会产生推开的效果

display属性

我们知道了block box 和 inline box， 那么我怎么控制盒子的外部显示类型呢？这就是这个小节的主题了display属性。

• dispaly: block 是块级盒子

• display: inline 是内联盒子

• dispaly: inline-block 状态介于块级盒子和内联盒子之间，width和height属性会生效，padding，margin和border也会推开其他元素。可以看下面的代码和渲染效果

  <div>
    <span style="display:inline-block;background:red;color:white;width:100px;height:30px;">inline box 1</span><br>
    <span style="display:inline-block;background:green;color:white;width:120px;height:50px;padding:10px;margin:10px; border:2px solid pink;">inline block</span>
    <span style="display:inline-block;background:blue;color:white;width:100px;height:30px;">inline box 2</span>
  </div>
  

盒模型

什么是盒模型呢？

有哪几种盒模型呢？

盒模型有哪些部分组成呢？

我们先看一下盒模型的图示

什么是盒模型，其实盒模型是一个比喻。盒从里到外由内容(content)，内边距(padding)，边框(border)和外边距(margin)四个部分组成，这四个组成部分像我们生活中的盒子，所以比喻成盒模型。现在浏览器支持两种盒模型一种是标准盒模型，另外一种是代替盒模型。下面我们详细的了解一下。

盒模型的四个组成部分:

• content box：显示内容，大小通过width和height属性设置
• padding box：内容区外部的空白区域，大小可以通过padding属性来设置
• border box：包裹内容区和内边距的边框，大小通过border属性设置
• margin box：最外面的区域，是盒子与其他元素之间的空白区域。大小通过margin相关属性设置

两种盒模型：

• 标准盒模型(content-box)：浏览器默认的盒模型，即box-sizing:content-box。这种盒模型的调整宽高需要配合padding和border两个属性。所以盒子的高度 = 内容高度(height) + 上内边距高度 + 下内边距高度 + 上边框高度 + 下边框高度, 同理 盒子的宽度 = 内容宽度(width) + 左内边距宽度 + 右内边距宽度 + 左边框宽度 + 右边框宽度。
• 代替盒模型(border-box)：我们发现标准盒模型的宽高计算很麻烦，所以也就有了这个代替盒模型，即box-sizing:border-box。盒的宽高使用width和height属性就可以控制了。

了解了两种盒模型，其实我觉得标准盒模型挺符合生活中对盒子的设计的。我们要设计一个盒子，首先要知道商品(content)的尺寸，然后就是需要填充(padding)保证商品的安全，然后就是盒子的厚度，这才得到盒子的宽高。