[toc]
## pre
height相较于width就单纯多了(前提在write-mode不改变的情况下)。
## heightの外部尺寸特性
height也有外部尺寸特性,不过值存在于绝对定位模型中,也就是**格式化宽度(高度)**时才会有所体现。
## 关于height:100%
### 父height:auto,子height:100%无效的情况
height还width:auto还有一个典型的区别在于,width即使为auto,其子元素使用百分比值也是可以的。
但如果是height:auto,那么其子元素若使用height:100%就会被忽略。
这是为什么呢?
因为规范如此:
如果包含块的高度没有显示指定(即高度由内容决定),并且该元素不是绝对定位元素,则计算值为auto。
而`auto*100/100=NaN`
那么为什么宽度就行呢?因为宽度并没有实际的规范这种情况下为auto,属于未定义行为,而各浏览器厂商一致决定将其解析为了具体的数值而不是auto
## height:100%与绝对定位和非绝对定位
当前元素非绝对定位的情况下,height:100%是相对于父元素的`content-box`计算的。
而绝对定位的情况下,是根据离得最近的定位祖先元素的`padding-box`来计算的(包括`格式化高度`)
![](https://box.kancloud.cn/2e6ae24d2db198b3beb35825224e4a1f_483x291.png)
- 空白目录
- 未处理
- webpack中的css模块化
- CSS预处理器
- 效果
- 元素装饰与美化
- 颜色
- checkbox
- img
- background
- clip-path
- 字体
- 文本控制
- text-indent
- letter-spacing
- word-spacing
- word-break和word-wrap
- white-space
- text-align
- text-decoration
- text-transform
- first-letter
- first-line
- 有关CSS百分单位的那些奇葩事儿
- 破坏性、包裹性、块状化
- 强大的absolute
- padding
- relative
- 继承性
- fixed
- float
- BFC
- z-index
- overflow
- clip
- 最佳可访问性隐藏
- 关于scrollHeight/Width
- 包含块
- margin
- 布局系统
- 杂
- Flex
- Grid
- 自定义布局系统
- gutter实现思路
- 选择器
- 伪元素和伪类
- css3
- appearance
- CSS2.1
- tmp
- 未定义行为
- 焦点元素
- outline轮廓
- 替换元素
- 盒子模型
- 块级元素/盒子
- 标记盒子
- 容器盒子(内在盒子)
- 内联元素/盒子
- 字母X
- line-height
- vertical-align
- font-size
- 内联元素盒子模型新解
- line-height定义
- line-height与行内框盒子模型
- line-height与内联元素的高度机制
- line-height值
- line-height与图片
- vertical-align支持的属性值及组成
- vertical-align起作用前提
- vertical-align与图片
- vertical-align与line-height
- vertical-align前后不一的行为表现
- vertical-align实际应用
- line-height与height
- width/height与auto
- 最小内容宽度
- 最大内容宽度
- min/max-width/height注意事项
- 流:外部尺寸与内部尺寸
- 流体布局下的宽度分离原则
- height:auto
- 浏览器渲染原理
- 移动端