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