元素的 display 为 table，但是它们都是 “块级元素”，因为它们都符合块级元素的基本特征，水平方向独占一行，多个块级元素之间换行显示
正是由于 “块级元素” 具有换行的特性，因此理论上可以配合 clear 属性清除浮动带来的影响
.clear:after {
display: table;
clear: both;
content: ‘’;
}
由于 list-item 会添加一个项目符号 【·】，所以不经常使用
如何解释 display: inline-block
为了方便理解，可以认为每个元素都有两个盒子组成，"外在盒子" 和 "内在盒子"，外在盒子负责元素是否可以在一行显示还是换行显示，内在盒子负责元素的宽高和内容的呈现。按照 display 属性值的不同，
- 值为
block 的元素的盒子实际是由外在的 “块级盒子” 和内在的 “块级盒子” 组成
- 值为
inline-block 的元素则由外在的 “内联盒子” 和内在的 “块级盒子” 组成
- 值为
inline 的元素则内外都是由 “内联盒子” 组成
width 作用的具体细节
width: auto (默认值就是 auto，所以一般直接省略 width 这个属性，采用默认值)，具有以下几种不同的表现
-
充分利用可用空间：块级元素的宽度默认是 100% 于父元素的。
-
收缩和包裹：如果元素设置了浮动或者绝对定位或者 display: inline-block/inline-table 后，宽度就等于其 “内容尺寸”，称之为 “包裹性”。
-
超出父容器宽度限制：如果元素设置了明确的 width，否则正常情况下是不会超出父容器的宽度的，但凡事总有例外。内容很长的连续的英文字符和数字，或者内联元素被设置了 white-space: nowrap，这个时候元素的 width 就会超过父容器
内部尺寸和外部尺寸
- 内部尺寸就是元素的尺寸由内部元素的内容决定，当元素 width 表现为 “包裹性” 时，我们可以称元素的尺寸是内部尺寸。
- 外部尺寸就是元素的尺寸由外部的容器决定。
外部尺寸分为哪几种情况
- 正常流宽度：上面所说的第一种充分利用可用空间，其实就是 CSS 世界中的 “流体特性”，自动填充满容器的大小（水平方向，垂直方向填充不是一种默认行为，具备必要的条件才可以）。注意这种水平方向的自动填充不是想象的那么简单，它是一种
margin\padding\border\content 自动分配水平空间的机制。
<div class="nav">
<a href="" class="nav-a">导航1</a>
<a href="" class="nav-a">导航2</a>
<a href="" class="nav-a">导航3</a>
</div>
.nav {
background-color: #ccc;
width: 300px;
height: 90px;
}
.nav-a {
display: block;
height: 29px;
width: 100%;
border-bottom: 1px solid;
padding: 0 10px;
}
- 格式化宽度：格式化宽度仅出现在 “绝对定位模型” 中，也就是出现在
position 属性为 absolute 和 fixed 元素中。默认情况下，绝对定位元素的宽度表现为 “包裹性”，宽度由 “内部尺寸” 决定。但是。有一种情况下宽度是由 “外部尺寸” 决定的：对于非替换元素，当 left/right，或者 top/bottom 对立方位属性值同时存在时，元素的宽高表现为 “格式化宽高”，其宽高尺寸相对最近父元素的具有定位特性（position 属性值不是 static）的祖先元素计算。
<div class="fixed">
<div class="fixed-box"></div>
</div>
.fixed {
position: relative;
width: 200px;
height: 200px;
background: #999;
}
.fixed-box {
position: absolute;
left: 0;
right: 0;
height: 50px;
margin-right: 50px;
border: 10px solid green;
background: #f80;
}
内部尺寸和流体特性（有三种表现形式：包裹性、首选最小宽度、最大宽度）
- 包裹性：当元素设置
float\绝对定位\inline-block 属性时，其宽度就表现为包裹性，但是具有 “包裹性” 的元素的宽度其实还是受到了父容器宽度的限制，始终小于等于父容器的 width，并自动换行显示。
但是，如果父容器的尺寸小于 “首选最小宽度” 的时候，就不适用了。看上面的这个 demo ，内部尺寸大于容器尺寸。
<div style="width:5px; background: #666">我</div>
如何实现文字只有一行的时候居中对其，大于一行的时候左对齐：
<div style="width: 300px; background: #ccc; text-align: center">
<div style="display: inline-block; text-align: left;">说的话就发货发货是否会回复 i 的回</div>
</div>
-
首选最小宽度：在 CSS 世界中，图片和文字的权重要远大于布局，因此，CSS 设计者们不会让图文在 width: 0 时宽度变成 0 ，此时所表现的宽度就是 “首选最小宽度”。具体表现规则：
** 东亚文字（如汉子）最小宽度为单个汉子的宽度；
** 西方文字最小宽度由特定的连续的英文字符单元决定。并不是所有的英文字符都会组成连续单元，一般会终止于 空格、短横线、问号以及其他非英文字符等；
** 对于图片这样的替换元素，首选最小宽度就是该元素的内容的宽度。
<div style="width:5px; background: #666"><span>我</span></div>
<div style="width:5px; background: #666"><span>display:inline-block</span></div>
- 最大宽度：就是元素内容在没有换行时的最大宽度。比如说元素设置了
white-space: nowrap;
<div style="width: 300px; background: #999; white-space: nowrap">ABCjdsfhfhhfkdshjfhfkhfkhfhjfhfhfhkhfkhfkhfjkdhsfjkdhsfjkhfjkh</div>
盒模型
盒模型包含哪些部分：margin\padding\border\content
width 属性作用在 content 部分，不含 margin、padding 和 border 部分。通常我们可以设置 box-sizing 属性，来改变 wdit 作用的部分。
box-sizing 属性有三个属性值：border-box | content-box | padding-box (Firefox 曾今支持过，现在不支持了)
height 作用的具体细节
height: auto
相比于 width: auto 要简单很多。一般情况下元素设置 height: auto 后，其高度受子元素 height 的影响。有一个地方需要说明一下，就是，height: auto 也有 “外部尺寸” 特性。仅存在于 “绝对定位模型” 中，称之为 “格式化高度”。
<div class="fixed">
<div class="fixed-box-1"></div>
</div>
.fixed {
position: relative;
width: 200px;
height: 200px;
background: #999;
}
.fixed-box-1 {
position: absolute;
top: 0;
bottom: 0;
width: 100px;
height: auto;
border: 10px solid green;
background: #f80;
}
注意：默认情况下块级元素的 height 的默认值就是 auto；
height: 100%
对于 width 属性，就算父元素 width 为 auto ，其百分比值也是支持的；但是，对于 height 属性，如果父元素 height 为 auto， 只要元素在文档中，其百分比值就完全被忽略。看看下面的 demo
<div>
<div style="height: 50px; background: #666;">1111</div>
<div style="height: 100%; background: #f80;">2222</div>
</div>
如何让元素支持 height: 100% 效果？？
<div style="height: 100px;">
<div style="height: 50px; background: #666;">1111</div>
<div style="height: 100%; background: #f80;">2222</div>
</div>
<div style="position: relative;">
<div style="height: 50px; background: #666;">1111</div>
<div style="height: 100%; background: #f80; position: absolute;">2222</div>
</div>
注意：使用绝对定位后的元素，其 height 百分比的值是相对于 “包含块” 的 padding box 进行计算的，而不是 content box
- 当父元素被设置绝对定位具有格式化高度的时候，子元素的高度也可以使用百分比值;
任意高度元素的展开收起动画技术
有一种情况，元素的 height 不是固定的一个数值，而是根据内容高度的变化而自适应，这个时候 height 就是默认值 auto。那么就不能通过 transitio 设置 height 的过渡动效。
<div class="transf">
<div style="height: 200px; background: #999" class="transf-con">max-height</div>
</div>
.transf {
/*height: 100px;*/
max-height: 100px;
width: 100px;
/*transition: height 1s ease;*/
transition: max-height 1s ease;
overflow: hidden;
}
.transf:hover {
/*height: auto;*/
max-height: 220px;
}
展开后的 max-height 值，我们只需要设定为保证比展开内容高度大的值就可以。max-height 值比 height 计算值大的时候，元素的高度就是 height 属性的计算高度。
注意： 虽然 max-height 值设置的越大越安全，但是对于我们这里的动效来说，如果 max-height 值太大，动效展开就无法达到预期的效果，总是比预期的要快，同时动画收起的时候有明显的 “延迟”。所以，一般建议 max-height 使用足够安全的最小值就可以了，即使我们的效果和预期不一样，但是也不会太大，用户一般情况下是无法察觉的。
内联元素
这里不做详细的介绍，下面说说什么是 “内联盒子” 和 “行框盒子”
内联盒子
“内联盒子” 不会让内容成块显示，而是排成一行，这里的 “内联盒子” 实际指的就是元素的 “外在盒子”，用来决定元素是内联还是块级，该盒子可以分为 “内联盒子” 和 “匿名内联盒子”。简单的说其实就是，当 “外在盒子” 决定元素是在一行显示的时候，那么这个元素就是 “内联盒子”。比如说设置了 display: inline-block 属性的元素就是一个内联盒子。
什么是匿名内联盒子呢？
<div style="color: red">
<span style="color: black">sfjjfhfjh</span>
会务费和返回份盒饭好烦好烦
<span style="color: black">fhhdfhfhfh</span>
</div>
上面红色汉子的部分就是 “匿名内联盒子”
注意： 并不是所有文字的部分都是 “匿名内联盒子”。这个要看这段文字前后的标签类型，如果标签类型是块级元素，那么它就属于 “匿名块级盒子”。
行框盒子
如果当前行是由 “内联盒子” 所组成的，那么这一行就可以被称之为 “行框盒子”
幽灵空白节点
“幽灵空白节点” 是内联盒模型中非常重要的一个概念，具体指的是：HTML5 文档声明中，内联元素的所有解析和渲染表现就如同每个行框盒子的前面有一个 “空白节点” 一样。这个空白节点透明、不占据任何宽度、看不见也无法通过脚本获取，就像幽灵一般。但是，它又确实存在，表现如同文本节点一样。
注意： 这里有一个前提条件。就是，文档声明必须是 HTML5 文档声明（）
<div style="background: #ccc;">
<img src="https://demo.cssworld.cn/images/common/l/1.jpg" alt="" width="100">
</div>
上面的这个 demo 显示 父元素的底部和图片的底部有间隙，这是为什么呢？。
Blog copied to clipboard
mengtuifrontend
