青训营前端实践笔记
一.CSS布局汇总
1.浮动（Float）
a.应用方式：通过设置元素的浮动属性，将元素从流动位置移动到指定位置。使用`float`属性可以将元素向左或向右浮动。
b.应用场景：浮动常用于实现多栏布局，例如将两个侧边栏固定在页面的两侧，中间内容流动显示。也可用于图片文字环绕效果。
c.项目实例：一个新闻网站的页面，页面分为头部导航栏，左侧侧边栏，右侧内容栏，底部信息栏。通过浮动左侧侧边栏和右侧内容栏实现多栏布局。
2.定位（Positioning）
a.应用方式：通过设置元素的定位属性，可以将元素定位在页面的绝对位置。常见的定位属性有`position: relative`、`position: absolute`和`position: fixed`。
b.应用场景：定位常用于实现精确定位效果，例如悬浮按钮、浮动广告、弹出框等。
c.项目实例：一个电子商务网站的页面，页面中有一个悬浮的购物车按钮，用户可以随时点击查看购物车的内容。通过设置购物车按钮的定位属性实现悬浮效果。
3.弹性盒子布局（Flexbox）
a.应用方式：通过设置容器元素的`display`属性为`flex`，可以将其内部元素按照一定的规则进行布局。通过设置`flex`属性、`justify-content`属性和`align-items`属性等，可以实现弹性盒子的灵活布局。
b.应用场景：弹性盒子布局常用于实现响应式布局和等分布局效果，可以动态调整内部元素的位置和大小。
c.项目实例：一个页面需要实现一个九宫格布局的图片展示，图片数量不确定。通过使用弹性盒子布局，在不同屏幕尺寸下，自适应调整图片的大小和位置。
4.网格布局（Grid Layout）
a.应用方式：通过设置容器元素的`display`属性为`grid`，可以将其内部元素按照网格布局进行排列。通过设置`grid-template-columns`和`grid-template-rows`等属性，可以控制网格的列数和行数。
b.应用场景：网格布局适用于实现复杂的多栏布局和平铺布局，可以创建对齐整齐的网格，方便页面元素的排列。
c.项目实例：一个后台管理系统的页面，页面中有多个卡片式布局的模块，每个模块拥有不同的宽度、高度和位置。通过使用网格布局，可以方便地进行灵活的布局操作。
5.多列布局（Multi-column Layout）：
a.应用方式：通过设置容器元素的`column-count`、`column-width`和`column-gap`属性，可以将元素内容分割为多个列。使用`column-gap`属性可以定义列之间的间距。
b.应用场景：多列布局适用于实现文章、图文混排等排版效果，可以让页面内容更易读。
c.项目实例：一个新闻网站的页面，页面中有多篇新闻文章需要展示。通过使用多列布局，可以将文章内容分为多个列，使得用户可以一次性看到多篇文章的标题。
6.栅格（Grid）
a.应用方式：栅格是一种响应式布局系统，将页面分割为等宽的列，并且可以在不同屏幕尺寸下进行自适应调整。通常使用栅格系统，可以通过设置类似`col-md-4`的类名，将元素设置为占据指定列数的大小。
b.应用场景：栅格适用于构建响应式布局，使得页面在不同设备上呈现合适的排列，如手机、平板和电脑等。
c.项目实例：一个电商网站的页面，页面中有多个商品展示区域。通过使用栅格系统，可以在不同屏幕尺寸下，动态调整商品展示区域的列数和大小。
7.位置居中
a.应用方式：通过使用`margin: auto`和`text-align: center`等属性，可以将元素水平居中，还可以使用`position: absolute`和`translate`等属性将元素垂直居中。
b.应用场景：居中布局适用于在页面中居中显示某个元素，使其在不同设备上居中对齐。
c.项目实例：一个登录页面，页面中有登录表单和登录按钮。通过使用居中布局，可以将登录表单和按钮垂直和水平居中，使其在不同屏幕尺寸下都呈现居中的效果。
8.响应式布局（Responsive Layout）
a.应用方式：响应式布局是一种能够根据不同设备屏幕尺寸来自适应调整页面布局的技巧。通常使用媒体查询（Media Queries）和相应的CSS规则，对指定的屏幕尺寸应用不同的样式。
b.应用场景：响应式布局适用于构建在不同设备上都能有较好用户体验的网页，如适配手机、平板和电脑等。
c.项目实例：一个新闻网站的页面，页面需要在手机、平板和电脑等不同设备上都呈现合适的布局。通过使用响应式布局技巧，可以根据不同屏幕尺寸应用不同的样式，使页面在不同设备上呈现较好的排列和用户体验。
二.实例
1.浮动（Float）
HTML：
<div class="container">
<div class="sidebar"></div>
<div class="content"></div>
</div>
CSS：
.container {
width: 100%;
}
.sidebar {
float: left;
width: 20%;
}
.content {
float: left;
width: 80%;
}
2.定位（Positioning）
HTML：
<button class="floating-button">购物车</button>
CSS：
.floating-button {
position: fixed;
top:20px;
right: 20px;
}
3.弹性盒子布局（Flexbox）
HTML：
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
CSS：
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
.item {
flex: 1;
}
4.网格布局（Grid Layout）
HTML：
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
< class="item">3</div>
</div>
CSS：
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
.item {
background-color: #ccc;
}
5.多列布局（Multi-column Layout）
HTML：
<div class="container">
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque malesuada urna, at aliquet eros fermentum id.</p >
</div>
CSS：
.container {
column-count: 3;
column-gap: 20px;
}
.text {
margin-bottom: 20px;
}
6.栅格（Grid）
HTML：
<div class="container">
<div class="col-md-4">1</div>
<div class="col-md-4">2</div>
<div class="col-md-4">3</>
</div>
CSS：
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.col-md-4 {
padding: 20px;
}
7.位置居中
HTML：
<div class="container">
<div class="centered-element">居中显示</div>
</div>
CSS：
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
.centered-element {
text-align: center;
}
8.响应式布局（Responsive Layout）
HTML：
<div class="container">
<div class="responsive-element">响应式内容</div>
</div>
CSS：
.container {
max-width: 1200px;
margin: 0 auto;
}
.responsive-element {
width: 100%;
}
@media (min-width: 768px) {
.responsive-element {
width: 50%;
}
}
