【CSS】布局方式梳理和总结

1. 前言

        网页布局是CSS的重点功能,布局的传统方案是基于盒子模型,依靠display属性、position属性和float属性,它对一些特殊布局很麻烦。

        CSS3推出的Flex布局和网格布局,让开发者更容易定制自己想要的布局。本篇梳理和总结一些布局方式。

2. CSS3多列
CSS属性说明示例
columns功能:column-width column-count;的简写

div {

  column-count: 3;

  column-gap: 10px;

  column-rule: 1px solide red; 

}

column-width

功能:指定各列的宽度

取值:auto | length

column-count

功能:指定需要分割的列数

取值:number | auto

column-span

功能:指定元素跨越多少列

取值:1 | all

column-gap

功能:列与列之间的间隙

取值:length | normal

column-rule

功能:column-rule-width column-rule-style column-rule-color;的简写

column-rule-width

功能:列与列之间的边框线宽度

取值:thin | medium | thick | length

column-rule-style

功能:列与列之间的边框线类型

取值:

1. none 没有规则

2. hidden 隐藏规则

3. dotted 点状规则

4. dashed 虚线规则

5. solid 实线规则

6. double 双线规则

7. groove 定义 3D grooved规则。该效果取决于宽度和颜色值

8. ridge 定义 3D ridged规则。该效果取决于宽度和颜色值

9. inset,定义 3D inset规则。该效果取决于宽度和颜色值

10. outset,定义 3D ouset规则。该效果取决于宽度和颜色值

column-rule-color功能:列与列之间的边框线颜色

本小节整理参考于:CSS3 多列 | 菜鸟教程 (runoob.com)

3. CSS3 Flex布局
CSS属性说明示例
display: flex | inline-box

功能:定义当前元素为弹性容器(flex container),所有子元素成员容器成员(flex item)

注:父元素定义为弹性布局,子元素的float、clear和vertcial-align属性会失效

div {

  display: flex;

}

容器属性(设置在父元素上的CSS属性)
flex-flow功能:<flex-direction> <flex-wrap>;的简写形式

div {

  display: flex;

  flex-direction: column;

  flex-wrap: wrap;

/*flex-flow: column wrap; */

}

flex-direction

功能:决定主轴的方向(即项目的排列方式)

取值:row | row-reverse | column | column-reverse

1. row 主轴水平方向,起点在左端(默认值)

2. row-reverse 主轴水平方向,起点在右端

3. column 主轴在垂直方向,起点在顶端

4. column-reverse 主轴在垂直方向,起点在底端

flex-wrap

功能:决定项目一条轴排不下的情况如何换行

取值:nowrap | wrap | wrap-reverse

1. nowrap 不换行(默认值)

2. wrap 换行,第一行在上方

3. wrap-reverse 换行,第一行在下方

justify-content

功能:决定项目在主轴上的对齐方式

取值:flex-start | flex-end | center | space-between | space-evenly | space-around | initial | inherit

1. flex-start 左对齐(默认值)

2. flex-end 右对齐

3. center 居中

4. space-between 两端对齐,项目之间间隔相等

5. space-evenly 均匀排列每个元素,每个元素之间的间隔相等

6. space-around 每个项目两侧间隔相等,项目两两之间的间隔比项目与边框之间的间隔大一倍

7. intial 设置该属性为它的默认值

8. inherit 从父元素继承

<略>
align-items

功能:决定项目在交叉轴上的对齐方式

取值:flex-start | flex-end | center | baseline | stretch

1. flex-start 交叉轴的起点对齐

2. flex-end 交叉轴的终点对齐

3. center 交叉轴的中点对齐

4. baseline 项目的第一行文字的基线对齐

5. stretch 如果项目未设置高度或设为auto,将占满整个容器的高度(默认值)

<略>
align-content

功能:决定多根轴线在交叉轴上的对齐方式,多根轴线的高度加起来小于交叉轴所有可用空间(垂直)

取值:flex-start | flex-end | center | space-between | space-around | stretch | initial | inherit

1. flex-start 与交叉轴的起点对齐

2. flex-end 与交叉轴的终点对齐

3. center 与交叉轴的中心对齐

4. space-between 与交叉轴两端对齐,轴线之间的间隔均匀分布

5. space-around 每根轴两侧的间隔都相等,轴线两两之间的间隔比轴线与边框之间的间隔大一倍

6. stretch 轴线占满整个交叉轴(默认值)

7. intial 设置该属性为它的默认值

8. inherit 从父元素继承

<略>
项目属性(设置在子元素上的CSS属性)
order

功能:决定项目的排列顺序、数值越小越靠前

取值:number(默认0)

.item {

  order: 1;

}

flex

功能:<flex-grow> <flex-shrink> <flex-basis>;的简写,后两个属性可选

注:

flex: auto表示flex: 1 1 auto;

flex: none表示flex: 0 0 auto;

.item {

 flex: 1 2 30px;

}

flex-grow

功能:决定项目的放大比例,即剩余空间按比例等分,比如剩余空间100px,3个项目的flex-grow为1, 2, 3,则各项目在自身基础上分别加上 16.67px, 33.33px, 50px

取值:number(默认0,0表示不放大)

flex-shrink

功能:决定项目的缩小比例,比例值越大,缩的越小

取值:number(默认1,如空间不足,该项目将缩小)

flex-basis

功能:在分配多余空间之前,项目占据主轴的空间

取值:length | auto (默认auto)

align-self

功能:决定单个项目有与其他项目不一样的对齐方式

取值:auto | flex-start | flex-end | center | baseline | stretch

1. 父元素定义了align-items,则auto表示继承父元素的align-items的值

2. 父元素未定义align-items,则auto表示stretch

.item {

  align-self: flex-end;

}

 本小节整理参考于:Flex 布局语法教程 | 菜鸟教程 (runoob.com)

4. CSS3网格布局
CSS属性说明示例
display:grid | inline-grid

功能:定义当前元素为网格容器(grid container),所有直接子元素都将成为网格元素。

<略>

网格容器属性
grid

功能:属性的简写

取值:

1. none 不定义行或列的尺寸(默认值)

2. grid-template-rows / grid-template-columns

2. grid-template-areas

3. grid-template-rows / grid-auto-columns

4. grid-auto-rows / grid-template-columns

5. grid-template-rows / grid-auto-flow grid-auto-columns

6. grid-auto-flow grid-auto-rows / grid-template-columns

7. intial 设置该属性为它的默认值

8. inherit 从父元素继承

div {

  display: grid;

  grid-template-columns: auto auto auto auto;

  grid-template-rows: 50px 80px;

}

grid-template

功能:属性简写

取值:

1. none 不指定行与列的大小(默认值)

2. grid-template rows / grid-template-columns

3. grid-template-areas

4. intial 设置该属性为它的默认值

5. inherit 从父元素继承

<略>
grid-template-rows

功能:用于设置网格布局中的行数及高度

取值:none | auto | max-content | min-content | length | initial | inherit

1. none 不指定行的大小(默认值)

2. auto 行的大小由容器的大小及行中网格元素内容的大小决定

3. max-content 每行的大小设置为该行中最大网格元素的大小

4. min-content 每行的大小设置为该行中最小网格元素的大小

5. length 长度值 px或%,0是默认值

6. initial 将此属性设置为默认值

7. inherit 从父元素中继承该属性

<略>
grid-template-columns

功能:用于设置网格布局中列数及宽度

取值:none | auto | max-content | min-content | length | initial | inherit

1. none 不指定列的大小(默认值)

2. auto 列的大小由容器的大小及列中网格元素内容的大小决定

3. max-content 每列的大小设置为该列中最大网格元素的大小

4. min-content 每列的大小设置为该列中最小网格元素的大小

5. length 长度值 px或%,0是默认值

6. initial 将此属性设置为默认值

7. inherit 从父元素中继承该属性

注:可以使用单位fr,1fr表示一等份

grid-template-areas

功能:用于设置网格布局

取值:none | itemnames

1. none 没有引用命名的网格

2. itemnames 指定每列和每行应如何显示

注:.号表示没有名称的网格项

.item1 {

  grid-area: myArea;

}

.grid-container {

  grid-template-areas: 'myArea myArea . . .';

}

grid-auto-rows

功能:用于设置网格容器中行的默认大小

取值:auto | max-content | min-content | length

注:仅影响未设置大小的行

<略>
grid-auto-columns

功能:用于设置网格容器中列的默认大小

取值:auto | max-content | min-content | length

注:仅影响未设置大小的列

<略>
grid-auto-flow

功能:精确指定在网格中被自动布局的元素怎样排列

取值:row | column | dense | row dense | column dense

1. row 通过填充每一行放置网格元素,在必要时增加新列(默认值)

2. column 通过每一列来放置网格元素,在必要时增加新列

3. dense 该关键字指定自动布局算法使用一种"稠密"堆积算法,如果后面出现了稍小的元素,则会试图去填充网格中前面留下的空白。这样做会填上稍大元素留下的空白,但同时也可能导致原来出现的次序被打乱

4. row dense 按行来填充网格中前面留下的空白

5. column dense 按列来填充网格中前面留下的空白

<略>
justify-content

功能:用于对齐网格内的网格

取值:flex-start | flex-end | center | space-between | space-evenly | space-around | initial | inherit

1. flex-start 左对齐(默认值)

2. flex-end 右对齐

3. center 居中

4. space-between 两端对齐,项目之间间隔相等

5. space-evenly 均匀排列每个元素,每个元素之间的间隔相等

6. space-around 每个项目两侧间隔相等,项目两两之间的间隔比项目与边框之间的间隔大一倍

7. intial 设置该属性为它的默认值

8. inherit 从父元素继承

注:网格的总宽度必须小于容器的宽度才能使justify-content属性生效

<略>
align-content

功能:决定多根轴线在交叉轴上的对齐方式,多根轴线的高度加起来小于交叉轴所有可用空间(垂直)

取值:flex-start | flex-end | center | space-between | space-around | stretch | initial | inherit

1. flex-start 与交叉轴的起点对齐

2. flex-end 与交叉轴的终点对齐

3. center 与交叉轴的中心对齐

4. space-between 与交叉轴两端对齐,轴线之间的间隔均匀分布

5. space-around 每根轴两侧的间隔都相等,轴线两两之间的间隔比轴线与边框之间的间隔大一倍

6. stretch 轴线占满整个交叉轴(默认值)

7. intial 设置该属性为它的默认值

8. inherit 从父元素继承

<略>
网格间隔

grid-gap(gap)

功能:<grid-row-gap> <grid-column-gap>;的简写

<略>

grid-row-gap(row-gap)

功能:设置网格行之间的网格间隔<略>

grid-column-gap(column-gap)

功能:设置网格列之间的网格间距<略>
网格元素属性
grid-area

功能:简写属性

取值:grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname

1. grid-row-start / grid-column-start / grid-row-end / grid-column-end

2. itemname 指定元素名称

<略>
grid-row

功能:简写属性

取值:grid-row-start / grid-row-end

<略>
grid-row-start

功能:指定哪一行开始显示网格元素

取值:auto | row-line

1. auto 按正常顺序排列

2. row-line 设置第几行开始

<略>
grid-row-end

功能:指定哪一行停止显示网格元素

取值:auto | row-line | span n;

1. auto 按正常顺序排列

2. row-line 设置第几行结束

3. 跨n行

<略>
grid-column

功能:简写属性

取值:grid-column-start / grid-column-end

<略>
grid-column-start

功能:指定哪一列开始显示网格元素

取值:auto | span n | column-line

1. auto 网格元素按流设置(默认值)

2. span 指定网格元素将跨越的列数

3. 指定从哪列开始显示网格元素

<略>
grid-column-end

功能:指定哪一列结束显示网格元素

取值:auto | span n | column-line

1. auto 网格元素按流设置(默认值)

2. span 指定网格元素将跨越的列数

3. 指定从哪列结束显示网格元素

<略>

本小节梳理参考于:CSS 网格布局 | 菜鸟教程 (runoob.com)

5. 多媒体查询

        CSS2也有@media规则,CSS3进行改进,CSS3 @media语法如下:

@media not|only mediatype and (mediafeature and|or|not mediafeature) {CSS-Code;
}

或者通过<link>标签根据条件使用不同的外部样式表:

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

 @media可以检测4种媒体类型,如下:

说明
all所有多媒体类型设备
screen电脑屏幕、平板、智能手机
print打印机
speech屏幕阅读器

媒体查询规则用到的操作符:

操作符说明
and与,将多种媒体查询规则组成成单条媒体查询,所有查询规则都为真则该媒体查询为真

or

或逗号, 

或,将多种媒体查询规则组成成单条媒体查询,有一条查询规则为真则该媒体查询为真
not非,查询规则为真时返回true
only仅,整个匹配才用于应用样式

 媒体功能:

说明
aspect-ratio定义输出设备中的页面可见区域宽度与高度的比率
color定义输出设备每一组彩色原件的个数。如果不是彩色设备,则值等于0
color-index定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表,则值等于0
device-aspect-ratio定义输出设备的屏幕可见宽度与高度的比率。
device-height定义输出设备的屏幕可见高度。
device-width定义输出设备的屏幕可见宽度。
grid用来查询输出设备是否使用栅格或点阵。
height定义输出设备中的页面可见区域高度。
max-aspect-ratio定义输出设备的屏幕可见宽度与高度的最大比率。
max-color定义输出设备每一组彩色原件的最大个数。
max-color-index定义在输出设备的彩色查询表中的最大条目数。
max-device-aspect-ratio定义输出设备的屏幕可见宽度与高度的最大比率。
max-device-height定义输出设备的屏幕可见的最大高度。
max-device-width定义输出设备的屏幕最大可见宽度。
max-height定义输出设备中的页面最大可见区域高度。
max-monochrome定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。
max-resolution定义设备的最大分辨率。
max-width定义输出设备中的页面最大可见区域宽度。
min-aspect-ratio定义输出设备中的页面可见区域宽度与高度的最小比率。
min-color定义输出设备每一组彩色原件的最小个数。
min-color-index定义在输出设备的彩色查询表中的最小条目数。
min-device-aspect-ratio定义输出设备的屏幕可见宽度与高度的最小比率。
min-device-width定义输出设备的屏幕最小可见宽度。
min-device-height定义输出设备的屏幕的最小可见高度。
min-height定义输出设备中的页面最小可见区域高度。
min-monochrome定义在一个单色框架缓冲区中每像素包含的最小单色原件个数
min-resolution定义设备的最小分辨率。
min-width定义输出设备中的页面最小可见区域宽度。
monochrome定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备,则值等于0
orientation定义输出设备中的页面可见区域高度是否大于或等于宽度。
resolution定义设备的分辨率。如:96dpi, 300dpi, 118dpcm
scan定义电视类设备的扫描工序。
width定义输出设备中的页面可见区域宽度。

本小节梳理参考于:CSS3 @media查询 | 菜鸟教程 (runoob.com)

注:以上,如有不合理之处,还请帮忙指出,大家一起交流学习~  

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/587980.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java常见面试题:请解释一下Java中的常用ORM框架,如Hibernate、MyBatis等。

ORM&#xff08;Object-Relational Mapping&#xff09;框架在Java中主要用于将关系型数据库中的数据映射到Java对象&#xff0c;从而使得开发者可以更加方便地操作数据库&#xff0c;而不需要编写大量的SQL代码。以下是两个常用的ORM框架&#xff1a;Hibernate和MyBatis。 Hi…

【Delphi 基础知识 8】常用的运算符

目录 算术运算符关系运算符逻辑运算符位运算符 Delphi是一种基于Object Pascal语言的集成开发环境&#xff08;IDE&#xff09;&#xff0c;它支持多种运算符用于执行各种操作。以下是一些常见的Delphi运算符&#xff0c;以及简单的代码示例&#xff1a; 算术运算符 &#xff…

安装Hadoop:Hadoop的单机模式、伪分布式模式——备赛笔记——2024全国职业院校技能大赛“大数据应用开发”赛项

前言 Hadoop包括三种安装模式&#xff1a; 单机模式&#xff1a;只在一台机器上运行&#xff0c;存储是采用本地文件系统&#xff0c;没有采用分布式文件系统HDFS&#xff1b;伪分布式模式&#xff1a;存储采用分布式文件系统HDFS&#xff0c;但是&#xff0c;HDFS的名称节点…

门控循环单元(GRU)-多输入时序预测

目录 一、程序及算法内容介绍&#xff1a; 基本内容&#xff1a; 亮点与优势&#xff1a; 二、实际运行效果&#xff1a; 三、部分代码&#xff1a; 四、完整代码数据下载&#xff1a; 一、程序及算法内容介绍&#xff1a; 基本内容&#xff1a; 本代码基于Matlab平台编译…

工具--Git详解快来看看吧

目录 学习目标&#xff1a; 学习内容&#xff1a; 学习产出&#xff1a; Git的基本概念和工作原理&#xff1a; 版本控制系统的发展历程&#xff1b; 分布式版本控制系统的优势&#xff1b; Git的基本概念&#xff1a;仓库、提交、分支等&#xff1b; Git的工作原理&#xff1a…

IO密集型场景和CPU密集型场景——具体场景汇总

前言 多线程适合处理IO密集型任务&#xff0c;而多进程适合处理CPU密集型任务。选择使用哪种并发模型需要根据具体的应用场景和需求进行权衡。在 Python 中&#xff0c;可以使用 threading 模块实现多线程编程&#xff0c;使用 multiprocessing 模块实现多进程编程。 进阶详解…

DL Homework 13

目录 编程实现优化算法&#xff0c;并3D可视化 1. 函数3D可视化 2.加入优化算法&#xff0c;画出轨迹 3.复现CS231经典动画 4.结合3D动画&#xff0c;用自己的语言&#xff0c;从轨迹、速度等多个角度讲解各个算法优缺点 5.总结 编程实现优化算法&#xff0c;并3D可视化 …

编程笔记 html5cssjs 005 网页上都有哪内容、形式和操作

编程笔记 html5&css&js 005 网页上都有哪内容、形式和操作 一、内容分类二、样式三、互动小结 在编写网页之前&#xff0c;对网页内容及操作进行一个基本分类&#xff0c;然后接下来的任务就分别加以处理。 网页上的内容和操作有很多种&#xff0c;以下是一些常见的内容…

【深度解析C++】const成员函数

系列文章目录 &#x1f308;座右铭&#x1f308;&#xff1a;人的一生这么长、你凭什么用短短的几年去衡量自己的一生&#xff01; &#x1f495;个人主页:清灵白羽 漾情天殇_计算机底层原理,深度解析C,自顶向下看Java-CSDN博客 ❤️相关文章❤️&#xff1a;Cthis指针&#xf…

Kafka_01_Kafka初识

Kafka_01_Kafka初识 Kafka基础概念延迟任务 Kafka Kafka: ZooKeeper协调的分布式消息系统 基于Scala语言编写的高性能、多分区、多副本Kafka高性能的原因&#xff1a;页缓存、顺序IO、零拷贝 具有以下特性&#xff1a; 消息中间件: 系统解耦、冗余存储、流量消峰、异步通信…

C++的面向对象学习(7):面向对象编程的三大特性之:继承

文章目录 前言一、继承&#xff1a;继承的类除了拥有上一级类的共性&#xff0c;也拥有自己的特性。二、继承方式&#xff1a;公有继承&#xff08;public inheritance&#xff09;、私有继承&#xff08;private inheritance&#xff09;和保护继承&#xff08;protected inhe…

PHP Swoole Client

PHP常用socket创建TCP连接&#xff0c;使用CURL创建HTTP连接&#xff0c;为了简化操作&#xff0c;Swoole提供了Client类用于实现客户端功能&#xff0c;并增加了异步非阻塞模式&#xff0c;让用户在客户端也能使用事件循环。 作为客户端使用&#xff0c;Swoole Client可以在F…

C练习——爱因斯坦台阶问题(穷举法)

题目&#xff1a;爱因斯坦曾经提出过这样一道有趣的数学题&#xff1a;有一个长阶梯&#xff0c;若每步上2阶&#xff0c;最后剩下1阶&#xff1b;若每步上3阶&#xff0c;最后剩2阶&#xff1b;若每步上5阶&#xff0c;最后剩下4阶&#xff1b;若每步上6阶&#xff0c;最后剩5…

排序算法讲解

1&#xff09;排序思想&#xff1a; 2&#xff09;排序代码&#xff1a; 3&#xff09;注意点&#xff1a; 4&#xff09;时间/空间复杂度和稳定性 下面的排序是以实现升序讲解的。 &#xff08;一&#xff09;直接插入排序 1&#xff09;排序思想&#xff1a; 把待排序的…

linux 网络系统管理 技能大赛 samba配置

SMB&#xff08;Server Messages Block&#xff0c;信息服务块&#xff09;是一种在局域网上共享文件和打印机的一种通信协议&#xff0c;它为局域网内的不同计算机之间提供文件及打印机等资源的共享服务 Samba共享服务的匿名访问 yum -y install samba //安装samba服务 c…

Java注解学习,一文掌握@Autowired 和 @Resource 注解区别

&#x1f3c6;作者简介&#xff0c;普修罗双战士&#xff0c;一直追求不断学习和成长&#xff0c;在技术的道路上持续探索和实践。 &#x1f3c6;多年互联网行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责人。 &#x1f389;欢迎 &#x1f44d;点赞✍评论…

[NOIP2002 普及组] 级数求和

[NOIP2002 普及组] 级数求和 题目描述 已知&#xff1a; S n 1 1 2 1 3 … 1 n S_n 1\dfrac{1}{2}\dfrac{1}{3}…\dfrac{1}{n} Sn​121​31​…n1​。显然对于任意一个整数 k k k&#xff0c;当 n n n 足够大的时候&#xff0c; S n > k S_n>k Sn​>k。 现给…

Python教程(19)——python异常处理

异常处理 什么是异常异常处理方式try-except语句捕获异常类型 相关的异常类型 什么是异常 在计算机编程中&#xff0c;异常&#xff08;Exception&#xff09;是指在程序执行过程中发生的错误或异常情况。当出现异常时&#xff0c;程序无法正常继续执行&#xff0c;因此需要采…

【Java进阶篇】SimpleDateFormat是线程安全的吗? 使用时应该注意什么?

SimpleDateFormat是线程安全的吗?使用时应该注意什么? ✔️ 典型解析✔️拓展知识仓✔️SimpleDateFormat用法✔️日期和时间模式表达方法✔️输出不同时区的时间✔️SimpleDateFormat线程安全性✔️问题重现✔️线程不安全原因✔️如何解决✔️使用局部变量✔️加同步锁✔️…

Java Log 学习笔记

参考文章&#xff1a; 1.Java 日志从入门到实战 2.Java日志框架的发展历史&#xff0c;你不想了解一下吗 背景 想自定义 logback 配置文件进行日志分级别记录到不同文件&#xff0c;遇到了几个问题&#xff08;使用的是 spring-boot 构建的项目&#xff0c;spring-boot 版本为…