前端HTML/CSS知识点系列

1. 什么是块级格式化上下文？【BFC(Block formatting context)】

BFC（Block FormattingContext，块级格式化上下文）是一个独立的渲染区域，其中的元素的布局不会受到外部元素的影响，反之亦然。BFC的创建有助于解决一些常见的布局问题，如清除浮动、避免外边距合并等
From:国内直连GPT：GPT4o

1.1如何触发BFC

可以通过以下几种方式来创建BFC：

 浮动元素 (float 的值不为 none)
绝对定位元素 (position 的值为 `absolute` 或 `fixed`)
display 的值为 `inline-block、table-cell、table-caption` 或 `flex` 等
`overflow` 的值不为 `visible`复制

示例demo
在这里插入图片描述

2.关于页面布局

2.1 左侧固定宽度，右侧自适应的几种实现方式

2.1.1 Flex布局（推荐）

父容器设置display：flex,左侧子div设置一个固定宽度，右侧设置：flex:1，实现自适应宽度

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Layout</title>
    <style>
        .container {
            display: flex;
        }
        .left {
            width: 200px; /* 固定宽度 */
            background-color: lightcoral;
        }
        .right {
            flex: 1; /* 自适应宽度 */
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">左侧固定宽度</div>
        <div class="right">右侧自适应宽度</div>
    </div>
</body>
</html>
 复制

2.1.2 Grid布局

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Layout</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: 200px 1fr; /* 左侧固定宽度，右侧自适应 */
        }
        .left {
            background-color: lightcoral;
        }
        .right {
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">左侧固定宽度</div>
        <div class="right">右侧自适应宽度</div>
    </div>
</body>
</html>
 复制

2.1.2 使用浮动和BFC（传统方法）

使用浮动和BFC来实现布局

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Float Layout</title>
    <style>
        .container {
            overflow: hidden; /* 创建BFC */
        }
        .left {
            float: left;
            width: 200px; /* 固定宽度 */
            background-color: lightcoral;
        }
        .right {
            margin-left: 200px; /* 右侧宽度等于左侧固定宽度 */
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">左侧固定宽度</div>
        <div class="right">右侧自适应宽度</div>
    </div>
</body>
</html>
 复制

2.2 圣杯布局

圣杯布局是一个经典的三栏布局，左右两侧固定宽度，中间栏自适应宽度。

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Holy Grail Layout</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            margin: 0;
        }
        .header, .footer {
            height: 50px;
            background-color: #ccc;
        }
        .main {
            display: flex;
            flex: 1;
        }
        .main > .left, .main > .right {
            width: 200px;
            background-color: #f0f0f0;
        }
        .main > .center {
            flex: 1;
            background-color: #e0e0e0;
        }
    </style>
</head>
<body>
    <div class="header">Header</div>
    <div class="main">
        <div class="left">Left Sidebar</div>
        <div class="center">Main Content</div>
        <div class="right">Right Sidebar</div>
    </div>
    <div class="footer">Footer</div>
</body>
</html>
 复制

2.3 卡片、网格布局

在这里插入图片描述

2.3.1使用grid布局

 .grid-model-card {
  display: grid;
  /* grid-template-columns: repeat(4, 1fr); */
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
  padding: 10px;
  overflow: auto;
}
.kg-card-item {
  height: 288px;
}复制

2.3.1使用flex布局

使用flex布局有一点不方便，就是最后几个卡片可能会居中显示，而不是我们想要的从左到右，所以需要在html补上占位元素，这样右边就有了”看不见的元素“占位置