【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; }
总结记忆： 1. 父元素 display: flex | line-flex; // 设置一个flex弹性盒子 1.1 排列 flex-direction: row | row-reverse | column | column-reverse;  flex-wrap: nowrap | wrap | wrap-reverse; flex-flow: <flex-direction> <flex-wrap> 1.2 对齐 justify-content: flex-start | flex-end | center | space-between | space-around;  align-items: flex-start | flex-end | center | stretch | baseline; align-content:  flex-start | flex-end | center | space-between | space-around | stretch; 2. 子元素 2.1 排列 order: 1;  // 数字越小越排前面 2.2 缩放 flex-grow: 1; // 按比例等分剩余空间，默认0，0的话则不放大 flex-shrink: 1; // 等比例缩小，默认1，0的话则不缩小 flex-basis: 12px // 分配多余空间之前，项目占据的主轴空间 flex: <flex-grow><flex-shrink><flex> 2.3 对齐 align-self: flex-start | flex-end | center | stretch | baseline;

 本小节整理参考于：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)

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