首页 > 其他分享 >CSS 布局专题

CSS 布局专题

时间：2024-04-03 22:14:00浏览次数：16  
标签：flex 元素 设置 布局 专题 grid background 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-

标签：flex,元素,设置,布局,专题,grid,background,CSS
From： https://www.cnblogs.com/SRIGT/p/18113607

相关文章

  • 前端学习思维导图总结~~~CSS篇
    一、前端学习总结CSS部分：二、随记分享这是前端学习过程中总结的思维导图，总结并分享出来，希望给有需要的朋友呀一些帮助，给各位看官一些参考总结的思维导图文件在 主页资源（免费）：前端三件套之一：css学习总结思维导图资源-CSDN文库https://download.csdn.net/download/m0_615......
  • 布局零工市场，促进灵活就业
    数字零工市场是嗨聘（Jobmall）践行国家“支持多渠道灵活就业”，促进劳动者充分就业而推出的线上招工找活服务平台。我们通过“互联网+零工市场”模式，通过大数据、人工智能等先进技术手段，为劳动者和企业提供更高效便捷的服务。平台将打破地域限制，提供全国各地优质零工岗位，同时依托完......
  • 56.html+css网页设计实例/“家乡”主题上海介绍/web前端期末大作业/
    一、前言  本实例以上海为主题设计，div+css布局，页面简单大气，代码精简，供大家参考。【关注作者|获取更多源码（2000+个Web案例源码）|优质文章】；您的支持是我创作的动力！【点赞收藏博文】，Web开发、课程设计、毕业设计有兴趣的联系我交流分享，3Q！二、网页文件三、网页效果以下......
  • Nuxt3-自定义路由配置以及使用自定义布局layout
    一、不自定义路由下，如何使用自定义布局1、根目录下app.vue<template><div><NuxtLayout><NuxtPage/></NuxtLayout></div></template>2、layout文件夹下新建文件main.vue<template><divclass="_app">......
  • 2024年：如何根据项目具体情况选择合适的CSS技术栈
    2024年：如何根据项目具体情况选择合适的CSS技术栈（请注意，这是一篇主观且充满个人技术偏好的文章）方案一:antd/elementui/类似竞品适合情形:项目没有设计师or大部分人不熟悉CSS且项目赶时间。antd自带样式，开发人员无需学习CSS，仅需查看参考文档就可以制作出基本不丑的UI界面。......
  • 在静态页中，js和css使用虚拟路径指向网站根目录
    第一步：修改web.config<configuration><system.webServer><handlers><addname="x"verb="GET"path="*.css.ashx"type="FileResolver"/><addname="xx"verb=&quo......
  • 纯CSS实现未读消息显示99+
    在大佬那看到这个小技巧，我觉得这个功能点还挺常用，所以给大家分享下具体的实现。当未读消息数小于100的时候显示准确数值，大于99的时候显示99+。1.实现效果2.组件封装<template><spanclass="col"><sup:style="{'--num':num}">{{num}}</sup></span></template......
  • 【Docker】专题六：Docker Registry 详解
    以下内容均来自个人笔记并重新梳理，如有错误欢迎指正！如果对您有帮助，烦请点赞、关注、转发！欢迎扫码关注个人公众号！目录一、基本介绍二、Registry创建方法三、Registry常用API请求四、Registry镜像清理一、基本介绍笔者在【Docker】专题一：Docker基本架构 中介绍......
  • [HTML、CSS]知识点
    【版权声明】未经博主同意，谢绝转载！（请尊重原创，博主保留追究权）https://www.cnblogs.com/cnb-yuchen/p/18032061出自【进步*于辰的博客】注：本文中“子级”指子级盒子或子级标签；“逻辑位置”指根据理论推断的所在位置，“实际位置”指实际显示的所在位置。目录1、其他知识点链接......
  • 界面组件DevExpress WinForms v23.2 - 进一步增强HTML & CSS支持
    DevExpressWinForms拥有180+组件和UI库，能为WindowsForms平台创建具有影响力的业务解决方案。DevExpressWinForms能完美构建流畅、美观且易于使用的应用程序，无论是Office风格的界面，还是分析处理大批量的业务数据，它都能轻松胜任！DevExpressWinForms控件日前正式发布了v23.2，此......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99