CSS —— 界面布局

server/2024/9/20 3:55:12/ 标签: css, 前端

flexbox - 弹性盒子布局(弹性布局)

一维方向,横纵向排列。

采用flex布局的元素,称为 Flex 容器(flex container),简称"容器"

 flex-direction

用于设置主轴方向;子元素默认是按照主轴线排列的,所以 flex-direction 也指定了弹性子元素在弹性容器中的排列方式

  • row(默认):主轴为水平方向,起点在左端
  • row-reverse:主轴为水平方向,起点在右端
  • column:主轴为垂直方向,起点在上沿
  • column-reverse:主轴为垂直方向,起点在下沿

主轴 &交叉轴:交叉轴垂直于主轴

flex-wrap 

用于设置自动换行;如果flexbox 容器 (container) 的宽度不足以存放 所有 flex元素 , 就会出现滚动条,确保所有的 flex元素 都在一行;若想实现超出container的宽度就自动换行,可设置flex-wrap: wrap

  • nowrap(默认):不换行
  • wrap:换行,换到下面
  • wrap:换行,换到上面

flex-flow

flex-direction和flex-wrap的简写形式,默认为row nowrap

flex-basis

定义元素的基础宽度(是在默认主轴方向为row的时候;当修改flex-direction为column时,主轴方向就为列,那此时flex-basis这个属性控制的就是元素的高度;还需要注意的是,当你设置了width又设置了flex-basis那width的值就会被flex-basis覆盖掉。)

<!DOCTYPE html>
<html lang="en">
<head><style>.wrapper {/* 内部显示规则为flexbox布局;外部显示规则时block (div class="wrapper") */display: flex; /* 指定flex元素的间距 */gap: .5em; /* 设置水平为主轴,左侧为起点,换行 */flex-flow: row wrap;}.wrapper > div {/* 边框  属性值:边框线粗细像素 线条种类 线条颜色 */border:1px solid black;}</style>
</head>
<body><div class="wrapper">  <div>1</div><div>2</div><div> 3<br>3<br>3<br>3</div><div>444</div><div style="flex-basis: 300px">5</div><div style="flex-basis: 200px">6</div><div style="flex-basis: 100px">777777777777777</div><div>8888888888888</div></div>
</body>
</html>

flex-grow

如果有剩余空间,这个元素可以分配到多少的比例

<!DOCTYPE html>
<html lang="en">
<head><style>.wrapper {display: flex;gap: .5em; flex-flow: row wrap;border:1px solid red;}.wrapper > div {border:1px solid black;}</style>
</head>
<body><div class="wrapper">  <div>1</div><div>2</div><div> 3<br>3<br>3<br>3</div><div style="flex-grow: 3">5</div><div style="flex-grow: 2">6</div><div style="flex-grow: 1">7</div><div>8888888888888</div>  </div>
</body>
</html>

flex-shrink 

注意:不要设置wrap自动换行,才能看出来

如果 flex容器空间比所有 flex元素空间总和小,这个元素空间缩减的比例

参考:

flex 的 三个参数:flex-grow、flex-shrink、flex-basis_flex属性的三个值-CSDN博客

深入理解CSS之flex精要之 flex-basis flex-grow flex-shrink 实战讲解-CSDN博客

主轴对齐——justify-content 

  • flex-start:flex元素和容器主轴方向开始位置对齐(左对齐;flex-direction默认值为row)
  • flex-end:flex元素和容器主轴方向结束位置对齐(右对齐)
  • center:flex元素和容器主轴方向中间位置对齐
  • space-between:flex元素 均匀分布在主轴上,间距相同;第一个 flex元素 和 container的主轴方向开始位置平齐,最后一个 flex元素 和 container的主轴方向结束位置平齐
  • space-around:flex元素 均匀分布在主轴上,间距相同;第一个 flex元素 和 container的主轴方向开始位置的间距 以及 最后一个 flex元素 和 container的主轴方向结束位置的间距都是flex元素间距的一半
  • space-evenly:flex元素 均匀分布在主轴上,间距相同;第一个 flex元素 和 container 的主轴方向开始位置的间距 以及 最后一个 flex元素 和 container的主轴方向结束位置的间距都于flex元素间距相同

从轴对齐——align-items

该属性缺省的条件下,所有的 flex元素和最高的flex元素保持一致

  • flex-start:flex元素和容器从轴方向的开始位置对齐(上边对齐)
  • flex-end:flex元素和容器从轴方向的结束位置对齐(下边对齐)
  • center:flex元素和容器从轴方向的中间位置对齐

grid - 网格布局

可以定义由行和列组成的二维布局。

列布局

grid-template-columns

指定列的数量和宽度;

指定网格的固定宽度

        grid-template-columns: 100px 200px 300px;  => 指定了网格有3列,从左到右,每列的宽度分别是 100px、 200px、 300px

指定每列的宽度占container宽的比例

     grid-template-columns: 1fr 2fr 3fr;  =>  指定了网格有3列,从左到右,每列的宽度分别是container宽的 1/6、 1/3 (2/6)、 1/2 (3/6)

好处:网格的列宽可以随着 container 宽度的变化而动态的变化,始终占满 container宽度

     grid-template-columns: 20% 30% 40%; => 表示这列占 container 的宽的 百分比

固定宽度和比例混合使用

     grid-template-columns: 200px 1fr 2fr; => 指定了网格有3列,从左到右,第1列的宽度固定为 200px, 剩余2列的宽度分别是container除了第1列剩余宽度的 1/3、 2/3

连续相同宽度

repeat()标记

{

        /* 等价于 200px 200px 200px */

        grid-template-columns: repeat(3, 200px);

        /* 等价于 1fr 1fr 1fr 1fr */

        grid-template-columns: repeat(4, 1fr);

        /* 等价于 20px 1fr 1fr 1fr 1fr */

        grid-template-columns: 20px repeat(4, 1fr);

        /* 等价于 1fr 2fr 1fr 2fr 1fr 2fr */

        grid-template-columns: repeat(3, 1fr 2fr);

}

auto 

列宽由内容决定

注意:

对于非固定宽度eg.1fr 1fr 1fr,如果cell里面的内容超过了当前cell的设定宽度,cell会自动变宽以适应内容的宽度。 

而对于指定固定宽度eg.200px 200px 200px,如果cell里面的内容超过了当前cell的设定宽度,cell边界不会变化,cell里面的内容会跨越边界。

行布局 

显式指定 —— grid-template-rows

指定行的数量和高度 ;但不能限定总行数

<!DOCTYPE html>
<html lang="en"><head><style>body{height: 100vh;/* 自己注释掉试一下;border边框区,margin外边距区域 ;去掉大盒子的外边距*/margin: 0; display: grid;/* 行间距为5px */gap: 5px;/* 指定了3行内容,其中导航栏和页脚高度由其内容决定,正文值为 1fr ,且没有其它fr(有2个fr就占1/2),表示该行的高度占满除了导航栏和页脚以外的全部高度 */grid-template-rows:  auto 1fr auto;}    div {border: 1px solid teal;}</style></head><body> <div>导航栏</div><div>正文<pre>2222222        </pre></div><div>页脚</div></body>
</html>

 grid-template-columns没有指定,缺省值为none,只有一列

▲:grid-template-rows: 100px 100px; 只能指定前2行的高度是 100px,当元素超过2个时,后续元素产生在新行中,总数不受 grid-template-rows 指定行数限制。

gap属性:gap: 1.8em 1.3em; => 指明了行间距为1.8em ; 列间距为1.3em

gap: 1.8em 1.3em 是 row-gap 和 column-gap 的缩写

{row-gap: 1.8em;column-gap: 1.3em;
}

如果 row-gap 和 column-gap 一样,比如都是 1em,可以更简单的写为

{gap: 1em;
}
 隐式指定(全局指定) ——  grid-auto-rows

grid-auto-rows: 100px;  => 不管产生的有多少行, 都是 grid-auto-rows 指定的高度100px

几种特殊情况:

{       /* row 的高度由其内容决定 */

        grid-auto-rows: auto;

        /* row 的高度是container的10% */

        grid-auto-rows: 10%;

        /*一组值的循环*/

        grid-auto-rows: 50px 100px 150px;

        grid-auto-rows: 0.5fr 3fr 1fr;

        /*row 的高度由其内容决定,但至少是 100px;minmax 第1参数指定最小值, 第2个参数指定最大值。规则是保证 min 一定满足的情况下,尽量取max值*/

        grid-auto-rows: minmax(100px, auto);

}

元素跨行跨列 

网格线:grid布局,网格是由 网格线 划分而成的;从左到右,列网格线编号依次从1开始,从上到下,行网格线编号依次从1开始。

通常是一个子项占一个网格,当然也可以让一个子项占多个网格;怎么实现呢?

——通过grid-column-start , grid-column-end , grid-row-start , grid-row-end这四个属性;分别指定子项元素占据网格的起始线、终止线,从而指定占据多少个网格。

<!DOCTYPE html>
<html lang="en"><head><style>.wrapper {display: grid;gap: .8em .3em;grid-template-columns: repeat(3, 1fr);grid-auto-rows: 100px;}/* 指定列网格线从1->4 ; 行网格线从1->3 ; 也就是说box1占据了3列2行的空间 */.box1 {grid-column-start: 1;grid-column-end: 4;grid-row-start: 1;grid-row-end: 3;}/* 指定列网格线从1->2 ; 行网格线从3->5 ; 也就是说box1占据了1列2行的空间 */.box2 {grid-column-start: 1;grid-row-start: 3;grid-row-end: 5;}.wrapper > div {border: 1px solid teal;}</style></head><body>  <div class="wrapper"><div class="box1">One</div><div class="box2">Two</div><div class="box3">Three</div><div class="box4">Four</div><div class="box5">Five</div></div></body>
</html>

▲:结束边界线如果不指定,缺省为起始位置+1 ;

剩余的没有指定的 grid 条目元素,在不重叠的前提下,尽量按照从上到下,从左到右的次序摆放

简写:

1.

  .box1 {grid-column: 1 / 4;grid-row: 1 / 3;}.box2 {grid-column: 1;grid-row: 3 / 5;}

2.使用 span 指定跨几个格子。

  .box1 {grid-column: 1 / span 3;grid-row: 1 / 3;}.box2 {grid-column: 1;grid-row: 3 / span 2;}

3.使用负数指定网格线,表示反方向计数的网格线

  .box1 {grid-column: 1 / -1;grid-row: 1 / 3;}

本文参考自:

22 flex布局容器六大属性_flex容器属性-CSDN博客

界面布局 - Flexbox | 白月黑羽

CSS布局----flex弹性布局(移动端完美解决方案)_flex-basis: auto;-CSDN博客


http://www.ppmy.cn/server/117320.html

相关文章

WORD批量转换器MultiDoc Converter

WORD批量转换器MultiDoc Converter https://www.52pojie.cn/thread-1318745-1-1.html 可批量将doc、docx等文件格式转成doc、docx、pdf、rtf、txt、html、epub等格式。 安装包下载地址&#xff1a;https://wws.lanzouj.com/irvVbiz0pkd 最终下载文件打包地址&#xff08;未作成…

JQuery简介 - 什么是jQuery

jQuery 是一个快速、小巧、功能丰富的 JavaScript 库。它使得 HTML 文档遍历和操作、事件处理、动画和 Ajax 交互对于 Web 开发来说更加简单和快捷。jQuery 设计的宗旨是“write less, do more”&#xff08;写得更少&#xff0c;做得更多&#xff09;&#xff0c;它封装了 Jav…

算子级血缘在金融数据环境的实践应用

在企业的数据管理领域&#xff0c;算子级血缘极大优化了脚本内部字段口径的理解与追踪。面对几十、几百乃至几千行代码的复杂脚本&#xff0c;并且有着各种函数调用、数据转换等复杂的加工逻辑&#xff0c;如果通过传统的 ETL 工作模式&#xff0c;开发人员就不得不采用“盲人摸…

【吊打面试官系列-Redis面试题】使用过 Redis 做异步队列么,你是怎么用的?

大家好&#xff0c;我是锋哥。今天分享关于【使用过 Redis 做异步队列么&#xff0c;你是怎么用的&#xff1f;】面试题&#xff0c;希望对大家有帮助&#xff1b; 使用过 Redis 做异步队列么&#xff0c;你是怎么用的&#xff1f; 一般使用 list 结构作为队列&#xff0c;rpus…

物品识别——基于python语言

目录 1.物品识别 2.模型介绍 3.文件框架 4.代码示例 4.1 camera.py 4.2 interaction.py 4.3 object_detection.py 4.4 main.py 4.5 运行结果 5.总结 1.物品识别 该项目使用Python&#xff0c;OpenCV进行图像捕捉&#xff0c;进行物品识别。我们将使用YOLO&#xff08…

847. 图中点的层次

847. 图中点的层次 给定一个 n 个点 m 条边的有向图&#xff0c;图中可能存在重边和自环。 所有边的长度都是 1&#xff0c;点的编号为 1∼n。 请你求出 1号点到 n号点的最短距离&#xff0c;如果从 1号点无法走到 n号点&#xff0c;输出 −1。 输入格式 第一行包含两个整数…

idea连接数据库大避雷!!!

再跟着黑马学习的时候&#xff0c;用黑马的资料安装的数据库&#xff0c;命令行能正常启动&#xff0c;SQLyog也能正常连接&#xff0c;就是tmd idea连接不了。不论是原始的jdbc,还是其它方式都不行&#xff0c;一直报错&#xff1a; 然后就各种搜&#xff0c;有的说数据库驱动…

Qt中QGraphicsView窗口大小与视图大小的关系

在Qt框架中&#xff0c;QGraphicsView窗口和视图的大小之间存在一定的关系。为了更好地理解这种关系&#xff0c;我们可以从以下几个方面来阐述&#xff1a; 1. 窗口大小 定义&#xff1a;窗口大小指的是QGraphicsView部件在屏幕上占据的矩形区域的大小。它由宽度和高度两个维…

神经网络卷积层和最大池化

文章目录 一、卷积层原理二、相关函数的概念三、卷积层的应用四、最大池化原理五、最大池化案例 一、卷积层原理 ./ 当前目录&#xff1b;…/ 上级目录 父类&#xff08;也称为基类或超类&#xff09;是指在类继承体系中被其他类继承的类。也就是被其他子类进行调用的类 当In_…

【计算机网络 - 基础问题】每日 3 题(六)

✍个人博客&#xff1a;Pandaconda-CSDN博客 &#x1f4e3;专栏地址&#xff1a;http://t.csdnimg.cn/fYaBd &#x1f4da;专栏简介&#xff1a;在这个专栏中&#xff0c;我将会分享 C 面试中常见的面试题给大家~ ❤️如果有收获的话&#xff0c;欢迎点赞&#x1f44d;收藏&…

JavaEE:文件内容操作(二)

文章目录 文件内容操作读文件(字节流)read介绍read() 使用read(byte[] b) 使用 read(byte[] b, int off, int len) 使用 写文件(字节流)write介绍write(int b) 使用write(byte[] b) 使用write(byte[] b, int off, int len) 使用 读文件(字符流)read() 使用read(char[] cbuf) 使…

解决antd-design-vue给选择组件a-select下拉菜单ant-select-dropdown设置样式不生效

实现效果&#xff1a;正常a-select会根据分辨率、缩放比例动态计算位置等&#xff0c;现在web端已经实现自适应分辨率&#xff0c;需要给下拉菜单设置固定的定位和宽度等样式&#xff0c;不让组件自动瞎设置定位、大小 1、a-select组件加上:getPopupContainer"(triggerNo…

Python 数据分析与可视化

在当今的数据驱动时代&#xff0c;数据分析与可视化已成为各行各业的重要工具。Python凭借其强大的数据处理能力和丰富的可视化库&#xff0c;成为数据分析的热门语言。本指南将为您提供Python数据分析与可视化的基础知识、实用技巧和实际操作案例&#xff0c;帮助您快速上手。…

Centos7 Hadoop 单机版安装教程(图文)

本章教程,主要记录如何在Centos7中安装Hadoop单机版。 一、软件安装包和基础环境 CentOS7.x,jdk8,hadoop 通过网盘分享的文件:Hadoop 链接: https://pan.baidu.com/s/1_qGI9QeXMAJNb3TydHhQGA?pwd=xnz4 提取码: xnz4 当然你也可以自己去官网下载。 java8:https://www.ora…

先有正态分布,还是先有高斯函数?

正态分布&#xff08;也称为高斯分布&#xff09;是由德国数学家卡尔弗里德里希高斯在研究天文学中的误差分布时提出的。而高斯函数通常指的是正态分布的概率密度函数&#xff0c;它是描述正态分布特性的一个数学表达式。因此&#xff0c;可以明确地说&#xff0c;是先有正态分…

MyBatis-Plus插入优化:降低IO操作的策略与实践

在使用MyBatis-Plus进行数据库操作时&#xff0c;我们常常面临插入操作需要频繁执行的场景。特别是在处理大量数据时&#xff0c;这种频繁的插入操作不仅会导致显著的IO开销&#xff0c;还可能影响系统的性能和响应时间。本文将探讨如何通过优化策略降低这些IO操作&#xff0c;…

VS Code 配置 Rust-Analyzer 报错

报错信息&#xff1a; Bootstrap Error" rust-analyzer requires glibc > 2.28 in latest build. 参考了好多地方&#xff0c; https://github.com/rust-lang/rust-analyzer/issues/11558 https://blog.csdn.net/aLingYun/article/details/120923694 https://rust-anal…

IDEA 通义灵码 插件使用体验

目录 前言 主要功能 演示代码 解释代码 生成单元测试 生成代码注释 生成优化建议 代码片段补全 总结 前言 自从 AI 技术开始大规模应用&#xff0c;老板就想让下面的牛马借助 AI 工具来提高编码效率&#xff0c;由于团队都没有在实际编码中深度使用过 AI 工具&#x…

线性规划------ + 案例 + Python源码求解(见文中)

目录 一、代数模型&#xff08;Algebraic Models&#xff09;详解1.1什么是代数模型&#xff1f;1.2代数模型的基本形式1.3 安装所需要的Python包--运行下述案例1.4代数模型的应用案例案例 1&#xff1a;市场供需平衡模型Python求解代码Python求解结果如下图&#xff1a; 案例 …

[译] 当Go程序结束时会发生什么

本篇内容是根据2021年2月份When Go programs end音频录制内容的整理与翻译,两位主持人邀请Go团队的Michael Knyszek,讨论了当Go程序结束时会发生什么 过程中为符合中文惯用表达有适当删改, 版权归原作者所有. Mat Ryer: 大家好&#xff0c;欢迎收听 Go Time。我是 Mat Ryer。今…