Flex（弹性布局）属性手册
容器默认存在两根轴：**水平的主轴（main axis）** 和**垂直的交叉轴（cross axis）** 。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
Flex布局分容器属性和子项属性两种类型。
Flex布局的步骤为
1.设置为flex容器
display: flex;
2.设置主轴方向是行还是列
flex-direction: row;
3.设置换不换行
flex-wrap: wrap;
然后
justify-content
flex
|
display: flex;
display: inline-flex;
flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;
flex-flow: row nowrap;
justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;
align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: baseline;
align-items: stretch;
align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-between;
align-content: space-around;
align-content: stretch;
flex: <flex-grow> <flex-shrink> <flex-basis>;
flex: 1;
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
align-self: auto;
align-self: flex-start;
align-self: flex-end;
align-self: center;
align-self: baseline;
align-self: stretch;
order: 0;
|
Grid（网格布局）属性手册
网格（grid）是一组相交的水平线和垂直线，它定义了网格的列和行。
网格布局（grid）由一个父元素（`网格容器`）及一个或多个子元素（项目）组成。
CSS 提供了一个基于网格的布局系统，带有行和列，可以让我们更轻松地设计网页，而无需使用浮动和定位。
网格容器：
要使 HTML 元素变成一个`网格容器`，可以将 display属性设置为 grid 或 inline-grid。
网格容器包含了一个或多个网格元素。
网格元素：
默认情况下，网格容器的每一列和每一行都有一个网格元素，我们也可以设置网格元素跨越多个列或行，行和列为行号。
网格容器内放置着由列和行内组成的网格元素。
以下是一个简单的网页布局，使用了网格布局。
display: grid;
display: inline-grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: 100px auto;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template:
"header header" 100px
"sidebar main" auto
"footer footer" 50px
/ 1fr 2fr;
grid-column-gap: 10px;
grid-row-gap: 15px;
gap: 10px 15px;
justify-items: start;
align-items: center;
justify-content: space-around;
align-content: space-between;
grid-auto-columns: 100px;
grid-auto-rows: 200px;
grid-auto-flow: row;
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 4;
grid-column: 1 / 3;
grid-row: 2 / 4;
grid-area: header;
justify-self: end;
align-self: stretch;
|
Position（定位）属性手册
position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;
top: 10px;
right: 10px;
bottom: 10px;
left: 10px;
- 子元素相对父元素进行定位。例如右上角的关闭图片，标签图片等。
- 使用方法：设置父元素position: relative; 子元素设置position: absolute;然后进行定位。
- 应用场景：默认定位，适用于不需要特定位置调整的元素。
- 特性：元素按文档流正常排列，不能使用偏移属性 (top, right, bottom, left)。
- 应用场景：用于微调元素位置，同时保留原位置的占位；例如，轻微调整图片或文本位置。
- 特性：元素偏移，但不脱离文档流，原位置仍保留。
- 应用场景：用于精确控制元素位置，例如弹出层、浮动按钮。
- 特性：元素脱离文档流，相对于最近的定位祖先（非 static）偏移，如果无定位祖先则相对于视口。
- 应用场景：用于固定在视口的元素，如固定的导航栏、回到顶部按钮。
- 特性：元素脱离文档流，始终固定在视口的指定位置，不受页面滚动影响。
- 应用场景：用于在页面滚动到一定位置时保持固定的元素，如“粘性”导航栏。
- 特性：元素在指定偏移位置上滚动到达后固定，其他位置按文档流排列。
.header {
position: sticky;
top: 0;
}
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.tooltip {
position: absolute;
top: -10px;
left: 100%;
}
|
瀑布流布局/无限滚动（Masonry Layout）
5 种瀑布流场景的实现原理解析
| 瀑布流 |
特点 |
| 纵向+高度排序 |
纯 CSS 多列实现，是最简单的瀑布流写法 |
| 纵向+高度排序+根据宽度自适应列数 |
通过 JS 根据屏幕宽度计算列数，在 web 端更加灵活的展示瀑布流 |
| 横向 |
纯 CSS 弹性布局实现，是最简单的横向瀑布流写法 |
| 横向+高度排序 |
横向+高度排序的瀑布流，需要通过 JS 计算每一列高度，损耗性能，但是可以避免某列特别长的情况，体验更好 |
| 横向+高度排序+根据宽度自适应列数 |
需要通过 JS 计算每一列高度，并根据屏幕宽度计算列数，损耗性能，但是可以避免某列特别长的情况，并且可以在 web 端更加灵活的展示瀑布流，体验更好，是 5 种瀑布流中用户体验最好的 |
@media 媒体类型 (条件) {
}
@media not|only mediatype and (expressions) {
}
{
- not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。
- only: 用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说，如果存在only关键字，移动
设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设
备但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件。
- all: 所有设备，这个应该经常看到。
}
@media screen {
}
@media print {
}
@media all {
}
@media (min-width: 600px) {
}
@media (max-width: 1200px) {
}
@media (min-height: 500px) {
}
@media (orientation: landscape) {
}
@media (orientation: portrait) {
}
@media (min-resolution: 2dppx) {
}
@media (min-resolution: 300dpi) {
}
@media (color) {
}
@media (monochrome) {
}
@media screen and (min-width: 600px) and (orientation: landscape) {
}
@media not screen and (color) {
}
@media only screen and (max-width: 768px) {
}
@media (max-width: 600px) {
body {
font-size: 14px;
padding: 10px;
}
}
@media (min-width: 601px) and (max-width: 1024px) {
body {
font-size: 16px;
padding: 15px;
}
}
@media (min-width: 1025px) {
.container {
max-width: 1200px;
margin: 0 auto;
}
}
@media print {
.header, .footer {
display: none;
}
}
@media screen and (orientation: landscape) and (min-width: 1024px) {
.header {
font-size: 24px;
}
}
|
CSS常见单位解释及其应用场景
px
%
em
rem
vw
vh
vmin
vmax
cm
mm
in
pt
pc
|
-
像素 (px): 适合需要精确控制的尺寸，例如边框宽度、图像大小等。
-
百分比 (%): 常用于宽度、高度等属性，以便元素在父元素中的相对位置调整。
-
相对单位 (em, rem): 适用于字体和布局设置，可以通过父元素或根元素的字体大小进行灵活调整，便于响应式设计。
-
视口单位 (vw, vh, vmin, vmax): 适合用于响应式布局，可以根据浏览器窗口的大小动态调整元素的尺寸。
-
绝对单位 (cm, mm, in, pt, pc): 主要用于打印或特定场景下，不常用于网页设计。
