CSS 布局专题

0x01 浮动布局

（1）常见网页布局

  • 顶部商标栏（Logo）：展示网站的标志、名称以及具有代表性的图片
  • 导航栏（Navigation）：展示网站大概的分类
  • 左侧边栏（Left-side Bar）：展示网站详细的分类
  • 内容栏（Content）：展示网站的主要内容
  • 右侧边栏（Right-side Bar）：展示在网站中比较热门的内容

（2）浮动布局概述

  • 流式布局

    • 块级元素的默认布局称为流式布局
    • 默认块级元素的宽度会填充整个页面，自上而下依次排列

  • 浮动布局

    • 不同于流式布局，浮动布局允许将块级元素并列排列
    • 设置块级元素的 float 属性，即可将该块级元素浮动起来

  • 举例：

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      div {
        width: 33%;
        height: 200px;
        float: left;
      }
      #b1 { background: red; }
      #b2 { background: green; }
      #b3 { background: blue; }
    </style>
  </head>
  <body>
    <div id="b1"></div>
    <div id="b2"></div>
    <div id="b3"></div>
  </body>
</html>

（3）使用浮动布局实现常见网页布局

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      #logo {
        background: red;
        height: 100px;
      }
      #nav {
        background: green;
        height: 100px;
      }
      #leftside {
        background: blue;
        float: left;
        width: 20%;
        height: 500px;
      }
      #content {
        background: yellow;
        float: left;
        width: 60%;
        height: 500px;
      }
      #rightside {
        background: blue;
        float: left;
        width: 20%;
        height: 500px;
      }
    </style>
  </head>
  <body>
    <div id="logo"></div>
    <div id="nav"></div>
    <div id="leftside"></div>
    <div id="content"></div>
    <div id="rightside"></div>
  </body>
</html>

0x02 定位布局

（1）概述

  • 定位方法用于实现复杂的布局
  • CSS 的定位方法通过 position 属性进行设置
  • 定位方法包括：static、relative、absolute、fixed、sticky

（2）static

  • static 是静态定位

  • 是 position 的默认值及默认布局方式

  • 从上到下、从左到右排列元素

div {
    position: static;
}

（3）relative

  • relative 是相对定位

  • 在确认元素的默认位置后，通过 top、left、right、bottom 属性来设置位置的偏移

  • 起始位置为此元素原先在文档流的位置

  • 偏移后的元素，其所占的空间还保留在原位，其他元素不会挤占它原本的空间

div {
    position: relative;
    top: 10px;
    left: 20px;
}

（4）absolute

  • absolute 是绝对定位

  • 在确认元素的默认位置后，通过 top、left、right、bottom 属性来设置位置的偏移

    • 与 relative 的区别在于，absolute 会相对于包含它的元素进行偏移
    • 如果附近某个元素设置了 transform 或 perspective 属性，那么这些元素就是 absolute 的包含元素
    • 通常使用 relative 定位来设置包含元素

  • 会将元素移出正常的文档流

  • 使用绝对定位的元素，它原本的空间会被其他元素挤占，但是会覆盖在挤占它的元素的上方

    • 后定义的 absolute 元素会覆盖在先定义 absolute 的元素的上方

  • 一般用于实现弹出层、叠加不规则的位置等布局形式

div {
    position: absolute;
    top: 10px;
    left: 20px;
}

（5）fixed

  • fixed 是固定定位

  • 在确认元素的默认位置后，通过 top、left、right、bottom 属性来设置位置的偏移

    • 与 absolute 的区别在于，fixed 的包含元素是当前浏览器窗口

    • 可以通过以下设置使元素宽度占满包含容器

      div {
    position: fixed;
    left: 0;
    right: 0;
}

    • 也可以通过以下设置使元素的高度占满包含容器

      div {
    position: fixed;
    top: 0;
    bottom: 0;
}

  • 无论页面如何滚动，fixed 元素会固定在页面的同一个位置

  • 一般用于固定浮窗、导航条等布局

（6）sticky

  • sticky 是粘性定位

  • 相当于 relative 和 fixed 的结合体

  • 可以让元素在距离浏览器窗口一定位置时，将其变成固定在该位置

  • 在确认元素的默认位置后，通过 top、left、right、bottom 属性来设置位置的偏移

div {
    position: sticky;
    top: 0;
}

（7）z-index

  • z-index 是设置 Z 轴方向的偏移（堆叠）

  • 默认值为 0，可以设置为负数

  • 值越大，其元素越在更上层（优先级更高）

    #b1 {
    position: absolute;
    z-index: 10;
}
#b2 {
    position: absolute;
}

  • 当两个元素以及其各自的包含元素都设置了 z-index 时，则这两个元素的堆叠顺序取决于包含元素的 z-index 值

0x03 Display

（1）概述

  • display 属性是设置元素的显示方式，会影响元素内部与外部的环境表现
  • 当采用了 flex 布局或 grid 布局时，其中的子元素无法改成其他元素模式
  • 显示方式包括：inline、block、flex、grid、none、contents

（2）inline

  • inline 是行内元素（又称内联元素）
  • 常见行内元素包括 a、strong、span 等
  • 本质上尽可能占最少的空间
  • 行内元素之间没有换行，除非超出浏览器窗口宽度
  • 行内元素的宽高、内外边距无法修改
  • 外部环境表现为行内元素，内部环境表现为其他类型元素：
    • inline-block：内部环境表现为块级元素
      • 行内元素的宽高、内外边距可以修改
    • inline-flex 或 inline flex：内部环境表现为弹性盒元素
    • inline-grid：内部环境表现为网格盒元素

（3）block

  • block 是块级元素
  • 常见块级元素包括 div、h1~h6、p 等
  • 每个块级元素都从新的一行开始，并且其后的元素也另起一行
  • 块级元素的宽高、行高、内外边距都可以修改
  • 块级元素的宽度默认为父容器的 \(100%\)

（4）flex

  • flex 是弹性盒元素
  • 当 flex 在块级元素中时，其外部环境表现为块级元素，内部环境表现为弹性盒元素
  • 详细介绍在第 5 节中

（5）grid

  • grid 是网格盒元素
  • 当 grid 在块级元素中时，其外部环境表现为块级元素，内部环境表现为网格盒元素
  • 详细介绍在第 6 节中

（6）none

  • none 可以使元素“消失”，即不占用文档流
  • 与 visibility: hidden; 的区别在于，visibility 的方式让元素不显示，但是仍然占用文档流

（7）contents

  • 与 none 区别在于，contents 不会隐藏其中的子元素

0x04 盒子模型

（1）概述

  • 所有的 HTML 元素都可以看作盒子
  • CSS 的盒模型本质上是一个盒子，封装周围的 HTML 元素
  • 盒子模型包括：外边距 margin、边框 border、内边距 padding 和实际内容 content
  • 每个盒子都有各自的大小和位置，并且影响其他盒子的大小和位置

（2）盒子类型

  • box-sizing 属性是盒子类型，用于修改盒子模型中计算宽高的方法
  • content-box 值是默认值，元素的宽度 = 盒子模型中 content 的宽度，元素会膨胀
  • border-box 值，元素的宽度 = 盒子模型中 content 的宽度 + 内边距 padding + 边框 border，元素不会膨胀

（3）其他

  • 为保证盒子模型的稳定性，设置的优先级为：width>padding>margin

    • 优先尝试设置 width，无法设置则尝试设置 padding、margin

  • 根据样稿设计页面时，应遵循以下顺序：

    graph LR A[建立 HTML 结构]-->选择布局方式-->设置行内元素-->确定盒子类型-->设置宽高-->设置内外边距

0x05 Flex

https://www.bilibili.com/video/BV1BJ41197XE

（1）概述

  • Flex 布局是一维布局方式，按行或按列排列（行模式 / 列模式）
  • 解决了元素对齐、分布和响应式的问题
  • 通过对外层容器设置 display: flex; 即可开启 Flex 布局，默认按行排列

（2）行模式

  • 行模式下，水平方向称为主轴，垂直方向称为交叉轴
  • 改变主轴方向上的布局，可以使用 justify-content 属性，取值包括 flex-start、center、flex-end、space-around、space-between、space-evenly 等
  • 改变交叉轴方向上的布局，可以使用 align-items 属性，取值包括 flex-start、center、flex-end

（3）列模式

  • 通过设置 flex-direction: column; 改变 Flex 布局方式为列模式
  • 列模式下，水平方向称为交叉轴，垂直方向称为主轴
    • 其他设置项与行模式类似

（4）其他

  • 非固定尺寸的子元素，可以通过设置 flex 属性，调整该子元素在空间中的占比

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      .column {
        margin: 5px;
        padding: 20px;
        text-align: center;
        border: 3px solid black;
        border-radius: 5px;
        background-color: #1e8;
        color: white;
        font-size: larger;
      }
      .column:nth-child(2) {
        flex: 2;
      }
      #container {
        display: flex;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div class="column">Column 1</div>
      <div class="column">Column 2</div>
      <div class="column">Column 3</div>
    </div>
  </body>
</html>

  • 使用 flex-basis 设置伸缩基准值

  • 使用 flex-grow 设置扩展比率

  • 使用 flex-shrink 设置缩小比率

0x06 Grid

（1）概述

  • Grid 布局是将容器划分成行列，产生单元格，并指定盒子所在的单元格
  • 相比 Flex 的一维布局，Grid 可以看作是二维布局，更加灵活、强大
  • Grid 由水平线和垂直线构成
    • 水平线之间称为行轨道
    • 垂直线之间称为列轨道

（2）格栅

以按列布局为例

  1. 准备页面

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      .column {
        margin: 5px;
        padding: 20px;
        text-align: center;
        border: 3px solid black;
        border-radius: 5px;
        background-color: #1e8;
        color: white;
        font-size: larger;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div class="column">Column 1</div>
      <div class="column">Column 2</div>
      <div class="column">Column 3</div>
      <div class="column">Column 4</div>
      <div class="column">Column 5</div>
      <div class="column">Column 6</div>
    </div>
  </body>
</html>

  2. 开启 Grid 布局

    #container {
  display: grid;
}

  3. 设置按列布局，并指定每列的宽度

    • 可以是固定宽度：px 等单位

      #container {
  display: grid;
  grid-template-columns: 150px 300px 150px;
}

    • 也可以是浮动宽度：fr 单位

      #container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

    • 当需要重复设置大量相同宽度时，可以使用 repeat(次数, 宽度)

      #container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}
      • 可以设置次数为 auto-fill，此时会根据父元素的宽度变化，自动调整列数
      • 可以对宽度使用 minmax(minWidth, maxWidth) 方法，此时会根据浏览器窗口的宽度变化，在指定范围中调整宽度

  4. 设置列间距

    #container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  column-gap: 50px;
}

  5. 设置行间距

    #container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  column-gap: 50px;
  row-gap: 50px;
}

  6. 统一设置间距

    #container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 50px;
}

（3）区域

  1. 准备页面

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      .block {
        margin: 5px;
        padding: 20px;
        text-align: center;
        border: 3px solid black;
        border-radius: 5px;
        color: white;
        font-size: larger;
      }
      header {
        background-color: red;
      }
      aside {
        background-color: green;
      }
      main {
        background-color: blue;
      }
      footer {
        background-color: orange;
      }
      #container {
        display: grid;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <header class="block">header</header>
      <aside class="block">sidebar</aside>
      <main class="block">content</main>
      <footer class="block">footer</footer>
    </div>
  </body>
</html>

  2. 设置各个单元格（区域）的内容

    #container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

  3. 为每个块命名

    header {
  background-color: red;
  grid-area: header;
}
aside {
  background-color: green;
  grid-area: sidebar;
}
main {
  background-color: blue;
  grid-area: content;
}
footer {
  background-color: orange;
  grid-area: footer;
}

（4）对齐

  • Grid 的对齐方式与 Flex 布局类似，有水平方向上的行轴，有垂直方向上的块轴
  • 在垂直方向上对齐子元素，可以使用 align-items 属性，取值包括 start、center、end 等
  • 在水平方向上对齐子元素，可以使用 justify-items 属性，取值包括 start、center、end、space-between 等
  • 当行轨道和列轨道的尺寸小于使用 Grid 布局的容器时，可以设置与轨道对齐
    • 水平方向上，使用 align-content 属性
    • 垂直方向上，使用 justify-content 属性

0x07 响应式布局

  • 响应式布局特点：确保页面在任何终端都能达到合适的显示效果

  • 响应式布局设计单位：% 或 rem

  • 响应式布局主要依靠媒体查询

  • 媒体查询又称媒介查询，用于为不同尺寸的屏幕设定不同的 CSS 样式

  • 媒体查询常用参数

    属性名称 说明
    width 浏览器可视宽度
    height 浏览器可视高度
    device-width 设备屏幕的宽度
    device-height 设备屏幕的高度

  • 举例，根据屏幕尺寸变化，调整 div 背景颜色

    div {
  width: 50rem;
  height: 50rem;
}
@media screen and (min-device-width: 1px) and (max-device-width: 400px) {
  div {
    background-color: red;
  }
}
@media screen and (min-device-width: 401px) and (max-device-width: 800px) {
  div {
    background-color: green;
  }
}

-End-

posted @ 2024-04-03 21:59  SRIGT  阅读(65)  评论(0)    收藏  举报