CSS-基础
前言
推荐阅读
掘金
基础知识
很基础的用法就不进行整理了，主要是主观地记录一些易忘和非常规的用法。
盒模型
padding 百分比的使用
padding属性值如果是百分比值，则无论是水平方向还是垂直方向都相对于宽度计算。
应用场景：可以用于 img 元素的占位使用。
height: 100%; 不生效
浏览器的 css 渲染是自上而下、自外而内的，即先渲染父元素，再渲染子元素。
height 默认的是 auto 模式，即由浏览器进行计算并给出高度，如果不受其他样式元素影响则高度由子元素高度决定。
对于height属性，如果父元素 height 为 auto，只要子元素在文档流中，其百分比值完全就被忽略了。在 flex 布局中，父元素没有确定的 height 值，子元素的 flex: 1; 也会失效。所以需要父级元素有一个确定的高度。
如果包含块的高度没有显式指定（即高度由内容决定），并且该元素不是绝对定位，则计算值为auto。auto和百分比计算，肯定是算不了的：auto * 100/100 = NaN。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 100vh; /* 令后续子元素 height: 100%; 生效的关键所在 */
}
.container {
width: 100%;
height: 100%;
}
.wrap {
display: flex;
flex-direction: column;
height: 100%;
}
.box1 {
height: 80px;
background-color: burlywood;
}
.box2 {
flex: 1;
/* height: 100%; */
background-color: cadetblue;
}
</style>
</head>
<body>
<div class="container">
<div class="wrap">
<div class="box1"></div>
<div class="box2"></div>
</div>
</div>
</body>
</html>如何使 height: 100% 生效
父元素给定明确的高度。
使用绝对定位。
绝对定位元素的百分比计算和非绝对定位元素的百分比计算是有区别的，区别在于绝对定位的宽高百分比计算是相对于padding box的，也就是说会把 padding 大小值计算在内，但是，非绝对定位元素则是相对于 content box 计算的。
这种方式支持隐式高度计算，但本身脱离文档流，所以在特殊场景下使用会有奇效：如图片左右半区点击分别上一张图下一张图效果。
《 CSS 世界》- 3.2 width / height 作用的具体细节
扩展阅读：
从height:100%不支持聊聊CSS中的“死循环” - 张鑫旭
简单总结一下：CSS 是静态渲染的，先渲染父元素的宽高再渲染子元素的宽高，所以不会存在进入样式渲染死循环当中，但是有时父元素会出现滚动条，那么子元素可操作的空间 content box 需要减去滚动条的距离。