# 盒子

# CSS的盒子模型有几种？

CSS中Box model是分为两种，第一种是W3C的标准模型，另一种是IE的传统模型，

W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。
IE6以下版本和标准 W3C 盒子模型不同的是:：IE 盒子模型的 content 部分包含了 border 和 padding，其内容真正的宽度是(width-padding-boder)；

可以提一下 box-sizing 属性：

content-box ：width = content width
border-box ：width = border left&right + padding left&right + content width

# 对 BFC 的理解和触发条件和常用场景

BFC ：块级格式化上下文：block formatting context

有几条规则：

BFC 里面的 box 都会以垂直方向排列
同一个 BFC 里的 box 的 margin 会重叠（margin 塌陷）
BFC 块不与 float 重叠
BFC 的元素是隔离了的容器，内部的元素不会影响外部的元素

触发条件：

float：none 以外的值
position：absolute 或者 fixed
overflow：visible 以外的值
display：line-block ，table-cell，line-flex，flex

场景：

margin 塌陷（放开注释看看效果）

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .box1 {
      width: 100px;
      height: 100px;
      margin: 50px;
      background-color: #ff8000;
    }
    .box2 {
      width: 100px;
      height: 100px;
      margin: 50px;
      background-color: #ff0000;
      /* display:inline-block; */
    }
  </style>
</head>
<body>
  <div class="box1"></div>
  <div class="box2"></div>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

两栏自适应（在布局专栏有说明）

BFC里面的元素不会影响外面的元素（放开注释看看效果）

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box1 {
      width: 100px;
      height: 100px;
      background-color: #ff8000;

    }

    .box2 {
      width: 200px;
      height: 200px;
      background-color: #ff0000;
      /* display: inline-block; */
    }
    .son {
      width: 100px;
      height: 100px;
      background: #000;
      margin-top: -50px;
    }
  </style>
</head>

<body>
  <div class="box1"></div>
  <div class="box2">
    <div class="son"></div>
  </div>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

# 为什么img标签是inline元素还可以设置宽高？

可替换元素 (opens new window) 的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。

简单来说，它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置，但不会影响到可替换元素自身的内容。某些可替换元素，例如 `` (opens new window) 元素，可能具有自己的样式表，但它们不会继承父文档的样式。

CSS 能对可替换元素产生的唯一影响在于，部分属性支持控制元素内容在其框中的位置或定位方式。

典型可替换元素有：

iframe
video
embed
img

HTML 规范也说了 <input> 元素可替换，因为 "image" 类型的 <input> 元素就像<img> 一样被替换。

← 布局属性 →