本笔记汇总了CSS布局技巧，如浮动、定位、弹性盒子布局等，列举了它们的应用场景和实操实践。
一、CSS是用来定义页面元素的样式，包括设置字体和颜色；设置位置和大小；添加动画效果。
如下是书伴网页当中的.css文件，定义了网站的部分style，可以粗略的了解CSS的实际使用
#bookfere-memo-digest {
display: flex; flex-direction: column; justify-content: center; position: relative; margin: 40px 0; border: 2px dotted #8766a0; min-height: 120px; padding: 2rem; font-size: 1.2rem; color: #142046;}
二、CSS布局是指选择网页中的元素，并且控制它们，使用CSS控制HTML元素的布局和位置。常用的CSS布局技巧有：
- 浮动布局：使用float属性可以使元素向左或向右浮动，从而在页面上占据额外空间，可以用于创建水平布局和多列布局；
- 响应式布局：使用媒体查询等技术可以创建响应式布局，即根据屏幕大小自动调整页面布局，实现合适的布局和响应式交互效果；
- 弹性布局：使用flexbox属性可以创建具有自适应宽度的列或网格，帮助元素更灵活地布局和定位，在容器内部按照一定的规则和比例排列和对齐子元素，可以轻松地实现垂直、水平居中等效果；
- 网格布局：可以通过定义网格行和网格列，以此来控制元素的位置，创建网格布局后元素被放置在网格格子中。这可以用于创建具有不同大小的列和行的布局；
- 相对定位：相对定位可以帮助元素在原始位置上进行微调，可以轻松地实现微调布局等效果；
- 绝对定位：绝对定位可以帮助元素在父元素内进行定位，可以轻松地实现重叠布局等效果，这可以用于创建相对于其他元素的位置关系；
以上布局技巧只是CSS布局中的一小部分，还有许多其他技巧可用于创建各种布局，随着网页设计越来越重要，我们需要不断学习掌握这些技巧，以便将设计放到实践中
三、布局的应用场景
浮动布局的应用场景：
- 左右布局：
.left {
float: left;
width: 50%;
}
.right {
float: right;
width: 50%;
}
- 图片与文本环绕
img {
float: left;
margin-right: 10px;
}
- 多栏布局
.column {
float: left;
width: 33.3%;
margin-right: 3%;
}
- 清除浮动
.clearfix:after {
content: '';
display: block;
clear: both;
}
弹性布局的应用场景：
- 固定宽度多列均分：常见的多列布局，每列宽度相等，并且在需要时可以自适应宽度。
.container {
display: flex;
}
.item {
flex: 1;
}
- 垂直居中：在垂直居中的场景下，通常需要使用复杂的布局技巧来实现。而使用Flexbox，只需要设置容器的justify-content和align-items属性为center即可实现垂直居中
.container {
display: flex;
justify-content: center;
align-items: center;
}
- 容器内大小不一：在容器内元素大小不一的情况下，Flexbox可以很方便地实现元素之间的间隔和对齐效果。使用flex属性可以控制元素的比例和大小，而使用justify-content属性可以控制元素之间的间隔和对齐方式
.container {
display: flex;
justify-content: space-between;
}
.item {
flex: 0 0 auto;
}
