前端学习笔记 - 布局方式总结

在CSS 中，布局是设计网页结构的关键，CSS 提供了多种布局方式，每种方式都具有不同的特性和使用场景。常见的CSS布局方式包括：

1. 定位布局

定位布局，让元素能够根据不同的方式定位。通常用于精准控制元素的位置。

示例：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <!-- 设置各个区域块的大小 -->
  <link rel="stylesheet" href="./base.css">
  <!-- 设置页面布局方式 -->
  <link rel="stylesheet" href="./position.css">
  <title>定位、浮动、弹性盒子、网格布局</title>
  <style>
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <div class="logo">logo</div>
      <div class="banner1">banner1</div>
      <div class="banner2">banner2</div>
    </div>
    <div class="menu">menu</div>
    <div class="main">
      <div class="main-left">
        <div class="main-header">
          <div class="item1">item1</div>
          <div class="item2">item2</div>
        </div>
        <div class="main-content">
          <div class="item3">item3</div>
          <div class="item4">item4</div>
          <div class="item5">item5</div>
          <div class="item6">item6</div>
        </div>
      </div>
      <div class="main-side-nav">
        <div class="item7">item7</div>
        <div class="item8">item8</div>
        <div class="item9">item9</div>
      </div>
    </div>
    <div class="footer">footer</div>
  </div>
</body>
</html>

css 复制代码

.container {
  position: relative;
}
.header {
  position: relative;
  line-height: 80px;
  top: 0;
  left: 0;
}
.logo, .banner1, .banner2 {
  position: absolute;
  top: 0;
  left: 0;
}
.banner1 {
  left: 210px;
}
.banner2 {
  left: 760px;
}
.menu {
  line-height: 30px;
  position: absolute;
  top: 90px;
}
.main {
  position: absolute;
  top: 130px;
}
.main-header {
  position: absolute;
  top: 0;
  left: 0;
}
.item1, .item2{
  position: absolute;
  top: 0;
  left: 0;
}
.item2 {
  left: 380px;
}
.main-content {
  position: absolute;
  top: 210px;
  left: 0;
}
.item3, .item4, .item5, .item6 {
  position: absolute;
  top: 0;
  left: 0;
}
.item4 {
  left: 190px;
}
.item5 {
  left: 380px;
}
.item6 {
  left: 570px;
}
.main-side-nav {
  position: absolute;
  top: 0;
  left: 760px;
}
.item8 {
  margin: 10px 0;
}
.footer {
  position: absolute;
  top: 550px
}

运行结果：：

2. 浮动布局

浮动布局，设计初衷是使文字环绕图片，并使它们向左或向右浮动。浮动元素会脱离文档流，造成父元素高度塌陷，所以通常需要通过clear属性来清除浮动。

示例（页面基础结构HTML参考定位布局）：

css 复制代码

.container::after {
  content: '';
  display: block;
  clear: both;
}
.header::after {
  content: '';
  display: block;
  clear: both;
}
.logo, .banner1, .banner2 {
  line-height: 80px;
  float: left;
}
.banner1 {
  margin: 0 10px;
}
.menu {
  margin: 10px 0;
}
.main::after {
  content: '';
  display: block;
  clear: both;
}
.main-left {
  float: left;
}
.main-header>[class^="item"] {
  float: left;
  margin-bottom: 10px;
}
.main-content>[class^="item"] {
  float: left;
  margin-bottom: 10px;
}
.main-side-nav {
  float: right;
}
.item8 {
  margin: 10px 0;
}
.item1, .item5 {
  margin-right: 10px;
}
.item4 {
  margin: 0 10px;
}

运行结果同上。

3. 弹性盒子布局

用于一维布局的CSS布局模型。它可以让子元素在容器中灵活地排列、对齐，并自动调整大小。适合用于响应布局。

示例（页面基础结构HTML参考定位布局）：

css 复制代码

.header {
  width: 960px;
  display: flex;
  justify-content: space-between;
}
.menu {
  margin: 10px 0;
}
.main {
  display: flex;
  justify-content: space-between;
}
.main-left {
  display: flex;
  width: 750px;
  height: 410px;
  flex-flow: column nowrap;
  justify-content: space-between;
}
.main-header {
  display: flex;
  justify-content: space-between;
}
.main-content {
  display: flex;
  justify-content: space-between;
}
.item8 {
  margin: 10px 0;
}
.footer {
  margin-top: 10px;
}

运行结果同上。

4. 网格布局

二维布局模型，可以实现更加复杂的布局，既可以进行行、列的布局，也可以灵活控制元素在网格中的位置。

示例（页面基础结构HTML参考定位布局）：

css 复制代码

.header {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 10px;
}
.menu {
  margin: 10px 0;
}
.main {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: space-between;
}
.main-header {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 10px;
  margin-bottom: 10px;
}
.main-content {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 10px;
}
.item8 {
  margin: 10px 0;
}
.footer {
  margin-top: 10px;
}

运行结果同上。

5. 多列布局

用于将文本内容分成多列，类似于报纸的排版方式。

示例（实现某些壁纸网站效果）：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>多列布局</title>
  <style>
    .container {
      width: 1000px;
      margin: 0 auto;
      column-count: 3;
      column-gap: 20px;
    }
    .container>img {
      width: 100%;
      transition: 0.1s linear transform, border-shadow;
    }
    .container>img:hover {
      transform: scale(1.02);
      box-shadow: 0 0 10px black;
    }
  </style>
</head>
<body>
  <div class="container">
    <img src="./images/1.jpg"alt="">
    <img src="./images/2.jpg"alt="">
    <img src="./images/3.jpg"alt="">
    <img src="./images/4.jpg" alt="">
    <img src="./images/5.jpg" alt="">
    <img src="./images/6.jpg" alt="">
    <img src="./images/7.jpg" alt="">
    <img src="./images/8.jpg" alt="">
    <img src="./images/9.jpg" alt="">
    <img src="./images/10.jpg" alt="">
    <img src="./images/11.jpg" alt="">
    <img src="./images/12.jpg" alt="">
    <img src="./images/13.jpg" alt="">
    <img src="./images/14.jpg" alt="">
    <img src="./images/15.jpg" alt="">
  </div>
</body>
</html>

运行结果：

6. 响应式布局

通过媒体查询（@media）来动态调整布局，使其在不同的尺寸荧幕下可以更好的呈现网页设计。常用于移动设备和桌面设备之间的切换。

示例：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>响应式布局</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    .global-nav {
      height: 40px;
      font-size: 12px;
      background-color: rgba(245, 245, 247, .8);
    }
    .global-nav-content {
      height: 40px;
      max-width: 980px;
      margin: 0 auto;
      overflow: auto
    }
    .global-nav-content a {
      text-decoration: none;
      color: #666;
    }
    .global-nav-content img {
      width: 20px;
      cursor: pointer;
    }
    .global-nav-content>ul {
      list-style: none;
      margin: 0;
      padding: 0;

      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .global-nav-content>ul .img-nav {
      padding: 0 8px;
    }
    .global-nav-content>ul .text-nav {
      line-height: 40px;
    }
    .global-nav-content>ul>li:last-child {
      display: none;
    }

    @media only screen and (max-width: 832px) {
      .global-nav-content>ul {
        margin-top: 10px;
      }
      .global-nav-content>ul .text-nav {
        display: none;
      }
      .global-nav-content>ul .img-nav {
        padding: 0 16px;
      }
      .global-nav-content>ul>li:last-child {
        display: block;
      }
      .global-nav-content>ul>li:first-child {
        flex-grow: 1;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="global-nav">
      <div class="global-nav-content">
        <ul>
          <li class="img-nav">
            <img src="./images/apple.png" alt="apple">
          </li>
          <li class="text-nav">
            <a href="#">Store</a>
          </li>
          <li class="text-nav">
            <a href="#">Mac</a>
          </li>
          <li class="text-nav">
            <a href="#">Ipad</a>
          </li>
          <li class="text-nav">
            <a href="#">Iphone</a>
          </li>
          <li class="text-nav">
            <a href="#">Watch</a>
          </li>
          <li class="text-nav">
            <a href="#">Vision</a>
          </li>
          <li class="text-nav">
            <a href="#">AirPods</a>
          </li>
          <li class="text-nav">
            <a href="#">TV & Home</a>
          </li>
          <li class="text-nav">
            <a href="#">Entertainment</a>
          </li>
          <li class="text-nav">
            <a href="#">Accessories</a>
          </li>
          <li class="text-nav">
            <a href="#">Support</a>
          </li>
          <li class="img-nav">
            <img src="./images/search.png" alt="search">
          </li>
          <li class="img-nav">
            <img src="./images/bag.png" alt="bag">
          </li>
          <li class="img-nav">
            <img src="./images/menu.png" alt="menu">
          </li>
        </ul>
      </div>
    </div>
  </div>
</body>
</html>

运行效果：

屏幕尺寸大于832px时：
屏幕尺寸小于等于832px时