CSS布局|豆包MarsCode AI 刷题

CSS布局包括浮动布局，定位，弹性盒子布局，网络布局，多列布局，表格布局，响应式布局七种布局。
浮动布局是浮动元素脱离文档流，将其定位到容器的左侧或者右侧，以前用于网页布局。常见问题是脱离文档六，浮动元素的折叠和影响后续元素。脱离文档流是浮动元素会从普通文档中脱离，非浮动的块级元素会忽略浮动元素的高度。浮动元素的折叠是如果父元素只包含浮动子元素，父元素的高度会被折叠为0.影响后续元素是浮动元素后的非浮动元素会环绕元素排列。应用场景用于实现简单的多列布局和图文混排（图片与文字左右对齐）。

<div class="container">
  <div class="left">左侧内容</div>
  <div class="right">右侧内容</div>
</div>

.container {
  overflow: hidden; 
}
.left {
  float: left;
  width: 50%;
}
.right {
  float: right;
  width: 50%;
}

定位是通过position属性定义元素在页面中的位置，包括static，relative，absolute，fixed和sticky。static是默认定位方式，元素按正常文档流排列，不受top，right，left，bottom等属性影响。relative是元素在正常文档流位置不变，可以通过top，right，bottom，left相对于自身位置进行偏移，与其他元素不重叠。absolute会脱离文档流，别的元素会占据他的位置。fixed是固定的，无论页面如何滚动，不会保留文档流的原位置。sticky结合了相对定位和固定定位，元素在滚动到某一临界点会变为固定定位。应用在实现悬浮菜单，制作提示框或弹窗和粘性头部导航栏。

<div class="menu">菜单</div>

.menu {
  position: fixed;
  top: 0;
  right: 0;
  background: #333;
  color: white;
  padding: 10px;
}

弹性盒子布局是一种一维布局模型，用display：flex定义容器，其子项可以在主轴或交叉轴上排列。应用在实现动态伸缩的导航栏。   

<div class="flex-container">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

.flex-container {
  display: flex;
  justify-content: center; 
  align-items: center;   
  height: 100vh;          
}

网格布局是一种二维布局系统，通过display：grid定义容器，可以在实现复杂的行列布局，常应用在设计图片或产品卡片网格。网格布局的核心属性包括定义网格的行和列，grid-template-rows和grid-template-columns，使用重复模式，使用自动填充和网格间距。

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 两列，等分宽度 */
  gap: 10px; /* 网格间距 */
}

多列布局是使用column系列属性快速实现内容分栏，常应用在新闻或者博客的多列布局，书籍样式的排版。多列布局有几个核心属性包括column-count，column-width，column-gap，column-rule和break-inside。

<div class="multi-column">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

.multi-column {
  column-count: 3; /* 三列 */
  column-gap: 20px; /* 列间距 */
}

表格布局是通过display：table和相关属性模拟表格布局，常应用在兼容性高度场景和实现均匀分布的布局（表格）。

<div class="table-container">
  <div class="row">
    <div class="cell">A</div>
    <div class="cell">B</div>
  </div>
</div>

.table-container {
  display: table;
  width: 100%;
}
.row {
  display: table-row;
}
.cell {
  display: table-cell;
  border: 1px solid #ccc;
}

响应式布局是结合媒体查询和弹性布局，实现适应不同屏幕尺寸的设计，常用在创建弹性图片文字和容器，响应式网页设计，适配手机，平板和桌面。响应式布局的三个核心要素是流体网络系统，响应式图片和CSS媒体查询。流体网络系统是页面布局基于百分比而不是固定的像素，页面元素宽度会随着屏幕大小的变化而变化。响应式图片是图片会根据容器的大小来调整大小，保证不会溢出屏幕。CSS媒体查询允许根据设备的大小应用不同的样式。

.container {
  display: flex;
  flex-wrap: wrap;
}
.item {
  flex: 1 1 calc(33.333% - 10px); /* 三列布局 */
  margin: 5px;
}
@media (max-width: 768px) {
  .item {
    flex: 1 1 calc(50% - 10px); /* 两列布局 */
  }
}