1. 度量单位em、rem、vh、vw、%
em
相对长度单位，相对于当前对象内文本的字体尺寸，根据父元素的font-size大小变化而变化
rem
相对长度单位，相对于根元素（即html元素）font-size的倍数，不会被它的父元素影响
rem布局的本质是等比缩放
大屏用户需要有选择要更大字体或者更多内容的自由，如果使用rem布局，那么用户就只能被迫接受更大字体
vh和vw
viewport height和viewport width，对应的是window.innerHeight和window.innerWidth，把浏览器导航栏下方到浏览器下方的距离化成了100份
%
相对于父元素的大小
2. rem布局加载闪烁问题
在使用rem布局时可能会出现加载闪烁的问题，也就是在加载的时候会出现元素一开始很小，闪烁后恢复正常大小的情况；这是因为引入的js文件中有修改font-size的部分，阻塞了后续的DOM解析和渲染；此时前面的DOM可以被正确地解析及渲染，所以会出现元素很小的情况，之后js解析完成后，元素恢复正常大小
可以使用媒体查询来设置html元素的font-size；这样dom还没有渲染完但是已经可以正常展现的时候，显示的元素大小也是正确的
https://blog.csdn.net/u013778905/article/details/77938784
https://yanhaijing.com/css/2017/09/29/principle-of-rem-layout/
3. position中的relative和absolute
relative
- 相对于原来位置移动，设置后元素仍然处于文档流中，可能会撑大容器
absolute
- 元素会脱离文档流，没有设置偏移量的话就还在原来的位置，会影响其他元素的位置定位
- 在父元素没有设置相对定位(
relative)或绝对定位(absolute+fixed)的情况下，元素相对于html元素偏移 - 父元素设置了相对定位或绝对定位后，元素会相对于离自己最近的设置了相对或绝对定位的父元素进行定位
https://www.runoob.com/w3cnote/css-position-static-relative-absolute-fixed.html
4. 三栏布局实现
- grid布局
.container {
display: grid;
grid-template-columns: 100px auto 200px;
} - flex布局
.container {
display: flex;
}
.item1 {
height: 60vh;
width: 100px;
}
.item2 {
height: 130vh;
flex: 1 0 auto;
}
.item3 {
height: 80vh;
width: 240px;
} - 浮动+BFC
.column1 {
float: left;
width: 100px;
height: 300px;
background-color: green;
}
.column2 {
float: right;
width: 100px;
height: 300px;
background-color: green;
}
.column3 {
overflow: hidden; /*创建bfc*/
height: 300px;
background-color: red;
}
5. BFC
块级格式化上下文，其中格式化上下文是指页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用
高度塌陷：
在文档流中，父元素的高度默认是被子元素撑开的，但是子元素设置成浮动后，子元素会脱离文档流，导致子元素无法撑起父元素的高度
可以将父元素高度写死防止高度塌陷的问题，但是一旦高度写死，父元素的高度将不能自动适应子元素的高度
形成BFC的条件
- 浮动元素
position(absolute、fixed)display为inline-block，table-cell，table-captionoverflow除了visible以外的值