流、元素与基本尺寸（块级、内联、流等概念）

• 0、开篇
• 1、块级元素
• 2、内联元素
• 3、width细节
• 4、height细节
• 未完待续。。。。。。。

0、开篇

我们平时说的block、inline、inline-block、inline-table等这些看作是一个盒子。但实际上这里的每个盒子是由两个盒子构成的，一个是外在盒子一个是内在盒子。其中外在盒子决定是否具有换行性，内在盒子负责放置内容。同时外在盒子就叫外在盒子、内在盒子专业术语成为容器盒子。所以inline-block元素能对外能同一行，对内是单独一行，又比如当display为block时候，请脑补成block-block。

1、块级元素

• 也就是一个水平流上只能单独显示一个元素。说白就是外在盒子为块级的元素（注意不是说display为block，比如li的display为list-item，这里的外在盒子为list也是块级！！！）。例如div、p、li、table等等
• 这里要额外记住一个知识点，为什么
• 的元素前面会有一个点，因为li的除了有内外盒子之分，还具备主盒子与附加盒子之分，主盒子就是盛放内容的盒子，而附加盒子（术语叫做标记盒子）是自动生成盛放标记的，所以拥有标记盒子前面会有记号

2、内联元素

• 也就是一个水平流能与文字同行显示的。说白就是外在盒子为内联的元素。例如img、button
• 行框盒子：每一行就是一个行框盒子，注意，是每一行且由内联盒子构成，例如下面的一行就是由一个匿名内联盒子和一个匿名盒子构成。

<p>我就是一行文字我后面是内联盒子所以我是匿名内联盒子哦（内联盒子中的一种）<em>我当然是直接的匿名盒子啦</em></p>

• 幽灵空白节点：每一个行框盒子前面都有一个永远也无法获取、透明的、没有宽度、高度是18px的节点。例如下面的span标签明明没有内容、也没有高度。但最后的结果是。。。。

<!--首先这是一行哈，里面是span是内联盒子，所以满足这个是行框盒子-->
<div><span></span></div>

div{
    background-color:black;
}
span{
    display:inline-block
}

3、width细节

• 另外一篇帖子讲了width中的%，可以结合起来一起看。另外一篇的链接为：入口
  width的默认值是auto，那么这个auto是如何表现的呢？
• 先提前说明，一个元素有块级与内联之分。那我们就从这个上探讨。
• 对于div、p这些没有浮动、绝对定位的块级元素来说，with:auto表现一种外向的流的概念，也就是这些“干净（没有浮动、绝对定位）”的块级元素作为子元素时候，当他们的with为auto时候，自动像水流一样盛满父元素
• 对于“不干净（浮动、绝对定位）”以及inline-block或者table元素，with:auto表现一种方向内向的特性，书上成为包裹性，也就是这些“不干净（没有浮动、绝对定位）”的块级元素以及inline-block或者table元素，当with为auto时候，自动像向内温柔的包裹容器盒子中的内容
• 对于table-layout表格中时候auto是具有极强的包裹性，也就是不仅仅再是向内包裹，是用力的包裹，内容能被挤压到多小，就挤压到多小，好比本来是显示一行的汉字，遭受到这种极强的包裹后，成为竖着的一个文字后面接一个呈一列。但是受到父级容器大小的影响，不会超过父级容器的宽度
• 但是包裹性中还有一个包裹性，这种包裹性我把它想象为一个铁甲，子元素为内联且设置了white-space:nowrap时候，这个子元素就穿上了这个铁甲，比如一行文字设置这个属性之后，他就会排成一行，无论父元素宽度多少，他不会管，当文字长度大与父元素宽度时候，就会超出来，反正就是无法被父元素限制，好比给子元素穿上一件贴身的铁甲。

4、height细节

height要注意的就是%问题

• 子元素的高度是采用%时候，父元素一定要有一个可以生效的值，可以也是%也可以是一个具体的值
• 当然父元素的高度为auto时候，子元素高度为%时候是无效的，因为 %*auto = NAN
• 但是子元素开起绝对定位时候，就可以进行使用，但是这里的%计算是基于父元素高度+父元素上下padding

未完待续。。。。。。。