下面是我的青训营笔记:
关于- CSS布局技巧：汇总CSS布局技巧，如浮动、定位、弹性盒子布局等，以及写出它们的应用场景和实操实践。
一.浮动模块
1.清除浮动：
在父元素的末尾添加一个空的div元素，并给其设置clear:both;属性，使其清除之前子元素的浮动。应用场景：当子元素使用浮动时，父元素的高度会塌陷，此时可以使用清除浮动的技巧来解决问题
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="clearfix"></div>
</div>
.parent {
/* 父元素设置 overflow: auto; */
overflow: auto;
}
.child {
float: left;
}
.clearfix {
/* 清除浮动 */
clear: both;
}
在父元素的末尾添加一个空的div元素，并给其设置clear:both;属性，即可清除之前子元素的浮动。同时，为了防止父元素高度塌陷，还需要给父元素设置 overflow: auto; 属性。
2.双飞翼布局:
通过使用负外边距和相对定位来实现三栏布局。应用场景：适用于需要在中间区域放置主要内容的网站。
```<div class="container">
<div class="main-content">
<!-- 主要内容 -->
</div>
<div class="left-sidebar">
<!-- 左侧边栏 -->
</div>
<div class="right-sidebar">
<!-- 右侧边栏 -->
</div>
</div>
```.container {
/* 设置容器的宽度和最小高度 */
width: 100%;
min-height: 300px;
}
.main-content {
/* 设置主要内容区域的宽度和左右外边距 */
width: 100%;
margin: 0 200px;
}
.left-sidebar {
/* 设置左侧边栏的宽度和左外边距，使用负外边距将其向左移动 */
width: 200px;
margin-left: -100%;
float: left;
position: relative;
left: -200px;
}
.right-sidebar {
/* 设置右侧边栏的宽度和右外边距，使用负外边距将其向右移动 */
width: 200px;
margin-right: -200px;
float: left;
}
通过设置主要内容区域的左右外边距，再使用负外边距和相对定位将左右侧边栏移动到正确的位置，即可实现双飞翼布局。同时，需要注意给左右侧边栏设置浮动属性。
3.圣杯布局：
通过使用负外边距和相对定位来实现三栏布局。应用场景：适用于需要在中间区域放置主要内容的网站。
```<div class="container">
<div class="main-content">
<!-- 主要内容 -->
</div>
<div class="left-sidebar">
<!-- 左侧边栏 -->
</div>
<div class="right-sidebar">
<!-- 右侧边栏 -->
</div>
</div>
```.container {
/* 设置容器的宽度和最小高度 */
width: 100%;
min-height: 300px;
/* 设置左右侧边栏和主要内容区域的相对定位 */
position: relative;
}
.main-content {
/* 设置主要内容区域的宽度和左右外边距 */
width: 100%;
margin: 0 200px;
/* 设置主要内容区域向左移动，腾出左侧边栏的位置 */
position: relative;
left: -200px;
}
.left-sidebar {
/* 设置左侧边栏的宽度和左外边距，使用负外边距将其向左移动 */
width: 200px;
margin-left: -100%;
float: left;
position: relative;
left: -200px;
}
.right-sidebar {
/* 设置右侧边栏的宽度和右外边距，使用负外边距将其向右移动 */
width: 200px;
margin-right: -200px;
float: left;
}
通过设置主要内容区域的左右外边距，再使用负外边距和相对定位将左右侧边栏移动到正确的位置，即可实现圣杯布局。同时，需要注意给左右侧边栏设置浮动属性，并将容器设置为相对定位。
4.浮动与inline-block结合：
将子元素设置为inline-block，父元素设置为text-align:center;，再给子元素添加浮动属性，可以实现水平居中的效果。应用场景：适用于需要水平居中元素的场景。
```<div class="container">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
```.container {
/* 设置容器的文本对齐方式为居中 */
text-align: center;
}
.child {
/* 将子元素设置为inline-block */
display: inline-block;
/* 给子元素添加浮动属性 */
float: left;
}
通过将子元素设置为inline-block，再给子元素添加浮动属性，即可实现水平居中的效果。同时，需要将父元素的文本对齐方式设置为居中，以使子元素水平居中。
二.定位模块
1. 相对定位： 通过使用position:relative;属性来设置元素的相对定位，再使用top、right、bottom、left等属性来调整元素的位置。应用场景：适用于需要微调元素位置的场景。
```<div class="container">
<div class="box"></div>
</div>
```.container {
/* 设置容器的宽度和高度 */
width: 300px;
height: 300px;
/* 设置容器相对定位 */
position: relative;
}
.box {
/* 设置盒子的宽度和高度 */
width: 100px;
height: 100px;
/* 设置盒子相对定位 */
position: relative;
/* 调整盒子的位置 */
top: 20px;
left: 20px;
/* 设置盒子的背景颜色 */
background-color: #f00;
}
通过设置元素的position:relative;属性，再使用top、right、bottom、left等属性来调整元素的位置，即可实现相对定位。将容器设置为相对定位，并将盒子设置为相对定位，并通过设置top和left属性来微调盒子的位置。 2. 绝对定位： 通过使用position:absolute;属性来设置元素的绝对定位，再使用top、right、bottom、left等属性来确定元素相对于其最近的已定位祖先元素的位置。应用场景：适用于需要将元素放置在指定位置的场景。
```<div class="container">
<div class="box"></div>
</div>
```.container {
/* 设置容器的宽度和高度 */
width: 300px;
height: 300px;
/* 设置容器相对定位 */
position: relative;
}
.box {
/* 设置盒子的宽度和高度 */
width: 100px;
height: 100px;
/* 设置盒子绝对定位 */
position: absolute;
/* 确定盒子相对于已定位祖先元素的位置 */
top: 20px;
left: 20px;
/* 设置盒子的背景颜色 */
background-color: #f00;
}
通过设置元素的position:absolute;属性，再使用top、right、bottom、left等属性来确定元素相对于其最近的已定位祖先元素的位置，即可实现绝对定位。将容器设置为相对定位，并将盒子设置为绝对定位，并通过设置top和left属性来确定盒子相对于容器的位置。
3. 固定定位： 通过使用position:fixed;属性来设置元素的固定定位，再使用top、right、bottom、left等属性来确定元素相对于浏览器窗口的位置。应用场景：适用于需要将元素固定在页面某个位置的场景。
```<div class="header">
<h1>这是页面的头部</h1>
</div>
<div class="content">
<p>这是页面的内容</p>
</div>
<div class="footer">
<p>这是页面的底部</p>
</div>
<div class="back-to-top">
<a href="#">返回顶部</a>
</div>
```.header {
/* 设置头部的高度和背景颜色 */
height: 60px;
background-color: #f2f2f2;
/* 设置头部固定定位 */
position: fixed;
top: 0;
left: 0;
right: 0;
}
.content {
/* 设置内容区域的上外边距 */
margin-top: 60px;
}
.footer {
/* 设置底部的高度和背景颜色 */
height: 100px;
background-color: #f2f2f2;
}
.back-to-top {
/* 设置返回顶部按钮的样式 */
position: fixed;
bottom: 20px;
right: 20px;
}
通过设置元素的position:fixed;属性，再使用top、right、bottom、left等属性来确定元素相对于浏览器窗口的位置，即可实现固定定位。将页面的头部设置为固定定位，并将其置于页面顶部；将返回顶部按钮设置为固定定位，并将其置于页面底部右下角。 4. 粘性定位： 通过使用position:sticky;属性来设置元素的粘性定位，可以使元素在滚动时保持在指定位置，直到其父元素边缘到达屏幕边缘为止。应用场景：适用于需要在页面滚动时保持元素位置的场景。
```<div class="header">
<h1>这是页面的头部</h1>
</div>
<div class="content">
<p>这是页面的内容</p>
</div>
<div class="side-bar">
<h2>这是侧边栏</h2>
<ul>
<li><a href="#">链接1</a></li>
<li><a href="#">链接2</a></li>
<li><a href="#">链接3</a></li>
</ul>
</div>
```.header {
/* 设置头部的高度和背景颜色 */
height: 60px;
background-color: #f2f2f2;
/* 设置头部粘性定位 */
position: sticky;
top: 0;
left: 0;
right: 0;
}
.content {
/* 设置内容区域的上外边距 */
margin-top: 60px;
}
.side-bar {
/* 设置侧边栏的宽度、背景颜色和内边距 */
width: 200px;
background-color: #f2f2f2;
padding: 20px;
/* 设置侧边栏粘性定位 */
position: sticky;
top: 80px; /* 粘性定位相对于父元素的位置 */
}
通过设置元素的position:sticky;属性，可以使元素在滚动时保持在指定位置，直到其父元素边缘到达屏幕边缘为止，即可实现粘性定位。将页面的头部设置为粘性定位，并将其置于页面顶部；将侧边栏设置为粘性定位，并将其置于页面顶部下方80像素处。
三.弹性布局:
1. flex-direction：用于设置弹性容器中主轴的方向。应用场景：适用于需要控制弹性容器中子元素排列方向的场景。
2. justify-content：用于控制弹性容器中子元素在主轴上的对齐方式。应用场景：适用于需要调整子元素在主轴上的排列位置的场景。
3. align-items：用于控制弹性容器中子元素在交叉轴上的对齐方式。应用场景：适用于需要调整子元素在交叉轴上的排列位置的场景。
4. flex-wrap：用于控制弹性容器中子元素是否换行。应用场景：适用于需要控制子元素在容器中是否换行的场景。
```<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
```.container {
/* 设置容器为弹性布局 */
display: flex;
/* 设置主轴方向为横向 */
flex-direction: row;
/* 设置子元素在主轴上居中对齐 */
justify-content: center;
/* 设置子元素在交叉轴上居中对齐 */
align-items: center;
/* 设置容器高度 */
height: 300px;
/* 设置子元素换行 */
flex-wrap: wrap;
}
.box {
/* 设置子元素的宽度和高度 */
width: 100px;
height: 100px;
/* 设置子元素的背景颜色 */
background-color: #f00;
}
将容器设置为弹性布局，并将主轴方向设置为横向，使子元素横向排列；将子元素在主轴上居中对齐，使它们水平居中；将子元素在交叉轴上居中对齐，使它们垂直居中；设置容器高度为300px，使其具有一定的高度；将子元素设置为换行，使它们可以自动换行。这种布局适用于需要在一定高度内排列多个元素，并使它们水平和垂直居中的场景。 以上为一些个人见解,.包括查询资料,如果有不对的地方大家多多包容,指出俺的错误,谢谢.
