共计 2892 个字符，预计需要花费 8 分钟才能阅读完成。
块级元素基本概念
块级元素：是一个水平流上只能单独显示一个元素，多个块级元素则换行显示。
块级元素”和“display 为 block 的元素”不是一个概念。
每个元素都两个盒子，外在盒子和内在盒子。外在盒子负责元素是可以一行显示，还是只能换行显示；内在盒子负责宽高、内容呈现什么的。
display 属性值是 inline-block 的元素既能和图文一行显示，又能直接设置 width/height。因为有两个盒子，外面的盒子是 inline 级别，里面的盒子是 block 级别
而盒子上的 width/height 作用在了内在盒子上。
width
width 的默认值是 auto，看似简单的默认值至少包含了以下 4 种不同的宽度表现。（1）充分利用可用空间。（2）收缩与包裹。（3）收缩到最小。（4）超出容器限制
尺寸也分“内部尺寸”和“外部尺寸”。其中“内部尺寸”由内部元素决定；还有一类叫作“外部尺寸”宽度由外部元素决定。
width 影响的外部尺寸
1、正常流宽度。“外部尺寸”的块级元素一旦设置了宽度，流动性就丢失了
a {
display: block;
width: 100%;
}
对 a 标签设置为 block 之后，自然会填充父元素，width: 100% 不仅仅是多余，更会造成元素在流动性上的丢失。
所谓流动性，并不是看上去的宽度 100% 显示这么简单，而是一种 margin/border/padding 和 content 内容区域自动分配水平空间的机制
eg. 设置了一个块级元素的 width 为 100% 之后，虽然看上去与 width:auto 没有差别，都占父元素的 100%，但是当为改元素设置 border、margin 时，其实际尺寸就会超过父元素，从而产生滚动条。
父元素
不限定 width 时，内容区域自动分配
限定时 父元素出滚动条
设置了外部尺寸之后，会影响元素的宽度
2、格式化宽度
格式化宽度仅出现在“绝对定位模型”中，也就是出现在 position 属性值为 absolute 或 fixed（position 默认值为 static）的元素中。当 left/top 或 top/bottom 对立方位的属性值同时存在的时候，元素的宽度表现为“格式化宽度”，其宽度大小相对于最近的具有定位特性（position 属性值不是 static）的祖先元素计算
上面的普通流一样，“格式化宽度”具有完全的流体性，也就是 margin、border、padding 和 content 内容区域同样会自动分配水平（和垂直）空间。
width 影响的内部尺寸
内部尺寸：假如这个元素里面没有内容，宽度就是 0，那就是应用的“内部尺寸”。
内部尺寸的三种表现形式：
1、包裹性
对于一个元素，如果其 display 属性值是 inline、inline-block，那么即使其里面内容再多，只要是正常文本，宽度也不会超过容器。
eg. 包裹性的实践：文字少的时候居中显示，文字超过一行的时候居左显示
.box {
text-align: center;
}
.content {
display: inline-block;
text-align: left;
}
2、首选最小宽度
所谓“首选最小宽度”，指的是元素最适合的最小宽度。在 CSS 世界中，图片和文字的权重要远大于布局，有图文存在时，不会让 width：auto 为 0 的
（3）最大宽度“最大宽度”实际等同于“包裹性”元素设置 white-space:nowrap 声明后的宽度。
实际运用的话，我认为跟 flex 布局有点像，用于不定宽度内元素的横向布局。
宽度分离原则
所谓“宽度分离原则”，就是 CSS 中的 width 属性不与影响宽度的 padding/border（有时候包括 margin）属性共存，也就是不能出现以下的组合：
.box {width: 100px; border: 1px solid;}
或者
.box {width: 100px; padding: 20px;}
分离，width 独立占用一层标签，而 padding、border、margin 利用流动性在内部自适应呈现。
缺点：多使用了一层标签，HTML 的成本也是成本，过深的嵌套是会增加页面渲染和维护成本的。但是一般来说，只要给最外面控制宽度的一层标签再加一层，所以与后期维护相比，成本可忽略不计。
改变 width/height 作用细节的 box-sizing
其实对于宽度分离来说，在决定宽度的 div 上设置 box-sizing 就可以不再外面套一层标签了。所起到的效果是一样的。
height
height:100%
。对于 width 属性，就算父元素 width 为 auto，其百分比值也是支持的；但是，对于 height 属性，如果父元素 height 为 auto，只要子元素在文档流中，其百分比值完全就被忽略了。如果包含块的高度没有显式指定（即高度由内容决定），并且该元素不是绝对定位，则计算值为 auto。
‘auto’ * 100/100 = NaN
所以子元素的高度设为 100% 是无效的。
如何让元素支持 height:100% 效果
（1）设定显式的高度值。（2）使用绝对定位。
div {
border: 1px solid blue;
height: 100%;
position: absolute;
}
此时的 height:100% 就会有计算值，即使祖先元素的 height 计算为 auto 也是如此。
需要注意的是，绝对定位元素的百分比计算和非绝对定位元素的百分比计算是有区别的，区别在于绝对定位的宽高百分比计算是相对于 padding box 的，也就是说会把 padding 大小值计算在内，但是，非绝对定位元素则是相对于 content box 计算的。
父元素
子元素
CSS min-width/max-width 和 min-height/max-height 二三事
min-width/max-width 出现的场景一定是自适应布局或流体布局中。
.container {
min-width: 1200px;
max-width: 1400px;
}
为了避免图片在移动端展示过大影响体验，经常会有下面的 max-width 限制：
img {
max-width: 100%;
height: auto !important;
}
height:auto 是必需的，否则，如果原始图片有设定 height，max-width 生效的时候，图片就会被水平压缩。
max-width 会覆盖 width，而且这种覆盖不是普通的覆盖，是会超越！important 的效果
任意高度元素的展开收起动画技术
.element {
max-height: 0;
overflow: hidden;
transition: max-height .25s;
}
.element.active {
max-height: 666px; /* 一个足够大的最大高度值 */
}
其中展开后的 max-height 值，我们只需要设定为保证比展开内容高度大的值就可以，因为 max-height 值比 height 计算值大的时候，元素的高度就是 height 属性的计算高度，在本交互中，也就是 height:auto 时候的高度值。于是，一个高度不定的任意元素的展开动画效果就实现了。
不过如果 max-height 值太大，在收起的时候可能会有“效果延迟”的问题。
