重学前端，万字入门 HTML+CSS+响应式网页设计_重学前端,万字入门(1)

最新推荐文章于 2024-07-25 18:34:51 发布

2401_84976733

最新推荐文章于 2024-07-25 18:34:51 发布

阅读量970

点赞数 27

文章标签： c语言 c++ 学习

本文链接：https://blog.csdn.net/2401_84976733/article/details/138985993

版权

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上C C++开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以戳这里获取

background-color: rgba(45, 45, 45, 0.1);
padding: 10px;
font-size: 27px;

}


### box-shadow opactiy



> 
> CSS 里的`box-shadow` 属性用来给元素添加阴影，可以由逗号分隔添加多个阴影：
> 
> 
> * `offset-x` 阴影的水平偏移量
> * `offset-y` 阴影的垂直偏移量
> * `blur-radius` 模糊半径
> * `spread-radius` 阴影扩展半径
> * `color`
> * 其中两个半径可选填。
> 
> 
> 



> 
> `opacity` 属性用来设置元素的透明度，可取在 0 到 1 之间。
> 
> 
>

#thumbnail {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
0 6px 6px rgba(0, 0, 0, 0.23);
}

.links {
text-align: left;
color: black;
opacity: 0.7;
}


### text-transform




| 值 | 结果 |
| --- | --- |
| `lowercase` | “transform me” |
| `uppercase` | “TRANSFORM ME” |
| `capitalize` | “Transform Me” |
| `initial` | 使用默认值 |
| `inherit` | 使用父元素的 `text-transform` 值。 |
| `none` | \*\*Default:\*\*不改变文字。 |

h4 {
text-transform: uppercase;
}


### font



> 
> * `font-size`
> * `font-weight` 字体粗细
> * `line-height` 行高（行间距）
> 
> 
>

p {
font-size: 16px;
font-weight: 200;
line-height: 25px;
}


### :hover



> 
> 伪类是可以添加到选择器上的关键字，用来选择特定状态的元素。
> 
> 
> 可以使用 `:hover` 伪类选择器来选取超链接的悬停状态。
> 
> 
>

CatPhotoApp


### position


在 CSS 里一切 HTML 元素皆为盒子，也就是通常所说的盒模型。


块级元素自动从新的一行开始（比如 title、p 以及 div），行内(内联)元素排列在上一个元素后（比如 img 以及 span）。


元素默认按照这种方式布局称为文档的普通流，同时 CSS 提供了 position 属性来覆盖它。


各个方向偏移量的属性是 `left`、`right`、`top` 和 `bottom`，代表从原位置**远离**该方向。




| 值 | 描述 |
| --- | --- |
| [absolute](https://bbs.csdn.net/topics/618668825) | 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 |
| [fixed](https://bbs.csdn.net/topics/618668825) | 生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 |
| [relative](https://bbs.csdn.net/topics/618668825) | 生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。 |
| [static](https://bbs.csdn.net/topics/618668825) | 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
| [sticky](https://bbs.csdn.net/topics/618668825) | 粘性定位，该定位基于用户滚动的位置。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。 |
| inherit | 规定应该从父元素继承 position 属性的值。 |


#### relative



> 
> 当元素的定位设置为 `relative` 时，允许你通过 CSS 指定该元素在当前文档流页面下的**相对**偏移量。
> 
> 
> 这样并不会改变该元素在布局中所占的位置，也不会对其它元素的位置产生影响。
> 
> 
>

h2 {
position: relative;
bottom: 10px;
left: 15px;
}


#### absolute



> 
> 绝对定位会将元素从当前的文档流里面移除，周围的元素会忽略它。
> 
> 
> 元素的定位参照于最近的**祖先元素**。 如果它的父元素没有添加定位规则（默认是 `position: relative;`），浏览器会继续寻找直到默认的 `body` 标签。
> 
> 
>

Search:


#### fixed



> 
> `fixed` 定位是一种特殊的 `absolute` 定位，将元素相对于**浏览器窗口**定位。
> 
> 
> 与 `absoulte` 相同的是：它与 CSS 偏移属性一起使用，并且也会将元素从当前的文档流里面移除。其它元素会忽略它的存在，这样也许需要调整其他位置的布局。
> 
> 
> 最大的不同：`fixed` 定位的元素不会随着屏幕滚动而移动。
> 
> 
>

#navbar {
position: fixed;
top: 0px;
left: 0px;

width: 100%;
background-color: #767676;

}


### float



> 
> 设置元素的 `float` 属性，浮动元素不在文档流中，它向 `left` 或 `right` 浮动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
> 
> 
> 通常需要用 `width` 属性来指定浮动元素占据的水平空间。
> 
> 
>

#left {
float: left;
width: 50%;
}
#right {
float: right;
width: 40%;
}


### z-index



> 
> 可以使用 `z-index` 属性指定元素的堆叠次序。
> 
> 
> `z-index` 的取值是整数，数值大的元素会叠放到数值小的元素上面。
> 
> 
>

.first {
background-color: red;
position: absolute;
z-index: 2;
}
.second {
background-color: blue;
position: absolute;
left: 40px;
top: 50px;
z-index: 1;
}


### center horizontally



> 
> 可以通过 `display: block;` 把行内元素 img 变为块级元素，将图片水平居中。
> 
> 
>


### Color


[Color model - Wikipedia](https://bbs.csdn.net/topics/618668825)


当两个颜色恰好在色环的两端时，这两个颜色就互为补色。 两个互为补色的颜色会在混合后变成灰色。


选定主色之后，在色环上选择与它的补色相邻的两种颜色与之搭配。 此种搭配既有对比，又不失和谐。


#### hsl


Hue, Saturation, Lightness


**色相值** 就是色环里面的颜色对应的从 0 到 360 度的角度值。


**饱和度** 是指色彩的纯度，也就是颜色里灰色的占比。 饱和度越高则灰色占比越少，色彩也就越纯；反之则完全是灰色。 饱和度的取值范围是表示灰色所占百分比的 0 至 100。


**亮度** 决定颜色的明暗程度，也就是颜色里白色或者黑色的占比。 其中，100% 的亮度表示纯白色，0% 的亮度则表示纯黑色，而 50% 的亮度就表示在色相中选取的颜色。



> 
> `hsl()` 使 CSS 更改颜色色调更加方便。 比如，用 `l` 给一个纯色添加白色可以调出更浅的色调；添加黑色可以创造更深的色调。 另外，还可以通过 `s` 给纯色添加灰色来同时改变颜色的深浅和明暗。
> 
> 
> 所有元素的默认 `background-color` 都是 `transparent`，可以通过修改饱和度和亮度来调整色调和阴影。
> 
> 
>

Cooking with FCC!


#### linear-gradient



> 
> 第一个参数指定了颜色过渡的方向——它的值是角度。
> 
> 
> `90deg` 表示垂直渐变（从左到右），`45deg` 表示沿对角线渐变（从左下方到右上方）。
> 
> 
> 其他参数指定了渐变颜色的顺序。
> 
> 
>

div {
border-radius: 20px;
width: 70%;
height: 400px;
margin: 50px auto;
background: linear-gradient(35deg, #CCFFFF, #FFCCCC);
}



> 
> `repeating-linear-gradient()` 会重复指定的渐变。
> 
> 
> 有很多参数，本测试只用到角度值和色标。
> 
> 
>

div{
border-radius: 20px;
width: 70%;
height: 400px;
margin: 50 auto;
background: repeating-linear-gradient(
90deg,
yellow 0px,
blue 40px,
green 40px,
red 80px
);
}


### background



> 
> `background` 属性支持使用 `url()` 函数作为属性值
> 
> 
> 我们可以通过链接的方式引入纹理或样式的图片。
> 
> 
>


### transform


当使用伪类选取元素的指定状态（如 `:hover`）时，我们可以通过 `transform` 属性非常方便地给元素添加交互。


#### scale



> 
> 用来改变元素的显示比例。
> 
> 
>


#### skewX skewY



> 
> `skewX()`：使选择的元素沿着 X 轴（横向）翻转指定的角度。
> 
> 
> `skewY()`：使元素沿 Y 轴（垂直方向）翻转指定角度。
> 
> 
>

#top {
background-color: red;
transform: skewY(-10deg);
}

#bottom {
background-color: blue;
transform: skewX(24deg);
}


#### rotate



> 
> 旋转元素，正为顺时针，负则为逆时针。
> 
> 
>

.heart {
background-color: pink;
height: 50px;
width: 50px;
transform: rotate(-45deg);
}


### Create Graphics


#### Crescent Moon



> 
> 创建一个圆的、透明的图形，它具有模糊阴影并略微向两边递减。
> 
> 
> 如你所见，这个阴影就是新月形狀。
> 
> 
>


#### Heart



> 
> 伪元素 `::before` 和 `::after` 可以在所选元素之前或之后添加一些内容。
> 
> 
> 必须配合 `content` 来使用，这个属性通常用来给元素添加内容诸如图片或者文字。
> 
> 
> `content` 属性仍然是必需的，用来实现形状时它的值可以是**空字符串**。
> 
> 
>


### Animation



> 
> 给元素添加动画：animation 属性控制动画的外观，`@keyframes` 规则控制动画中各阶段的变化。
> 
> 
> `@keyframes` 通过给持续时间内的特定帧（从 0% 到 100%）加上 CSS 规则设置动画效果。
> 
> 
> 




| 8个属性值 | 说明 |
| --- | --- |
| *[animation-name](https://bbs.csdn.net/topics/618668825)* | 用来设置动画的名称，也就是在 `@keyframes` 里用到的名称。 |
| *[animation-duration](https://bbs.csdn.net/topics/618668825)* | 动画指定需要多少秒或毫秒完成 |
| *[animation-timing-function](https://bbs.csdn.net/topics/618668825)* | 设置动画将如何完成一个周期 |
| *[animation-delay](https://bbs.csdn.net/topics/618668825)* | 设置动画在启动前的延迟间隔 |
| *[animation-iteration-count](https://bbs.csdn.net/topics/618668825)* | 定义动画的播放次数 |
| *[animation-direction](https://bbs.csdn.net/topics/618668825)* | 指定是否应该轮流反向播放动画 |
| [animation-fill-mode](https://bbs.csdn.net/topics/618668825) | 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式 |
| *[animation-play-state](https://bbs.csdn.net/topics/618668825)* | 指定动画是否正在运行或已暂停 |


#### fill-mode




| 值 | 描述 |
| --- | --- |
| none | 不改变默认行为。 |
| forwards | 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。 |
| backwards | 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。 |
| both | 向前和向后填充模式都被应用。 |


#### iteration-count




| nimation-iteration-count | 描述 |
| --- | --- |
| *n* | 定义动画播放次数的数值。 |
| infinite | 规定动画应该无限次播放。 |


#### timing-function


[✿ cubic-bezier.com](https://bbs.csdn.net/topics/618668825)


使用名为三次贝塞尔（Cubic Bezier）函数的数学函数，来生成速度曲线。




| 值 | 描述 |
| --- | --- |
| linear | 动画从头到尾的速度是相同的。 |
| ease | 默认。动画以低速开始，然后加快，在结束前变慢。 |
| ease-in | 动画以低速开始，以高速结束。 |
| ease-out | 动画以高速开始，以低速结束。 |
| ease-in-out | 动画以低速开始和结束。 |
| cubic-bezier(*n*,*n*,*n*,*n*) | 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 |



> 
> `cubic-bezier` 函数包含了 1 \* 1 网格里的4个点：`p0`、`p1`、`p2`、`p3`。
> 
> 
> 其中 `p0` 和 `p3` 是固定值，代表曲线的起始点和结束点，坐标值依次为 (0, 0) 和 (1, 1)。
> 
> 
> 你只需设置另外两点的 x 值和 y 值，设置的这两点确定了曲线的形状从而确定了动画的速度曲线。
> 
> 
> 在 CSS 里面通过 `(x1, y1, x2, y2)` 来确定 `p1` 和 `p2`。
> 
> 
> 通俗的讲，将一条直线放在范围只有 1 的坐标轴中，并从中间拿 `p1` 和 `p2` 两个点来拉扯（X 轴的取值区间是 [0, 1]，Y 轴任意）
> 
> 
>


## 🍏Applied Accessibility


### img alt



> 
> `alt` 属性可以帮助用户在图片加载失败或者不可见的情况下理解图片内容， 搜索引擎也通过它来理解图片内容，并将其加入到搜索结果中。
> 
> 
> 屏幕阅读器可以识别 `alt` 属性，朗读其中的内容，来告知视觉障碍用户图片包含的关键信息。
> 
> 
> 在图片已经有了文字说明，或者仅仅为了美化页面，`img` 仍然需要一个 `alt` 属性，但可以设置为空字符串。
> 
> 
> 对于有标题的图片，依然需要添加 `alt` 文本，这样有助于搜索引擎记录图片内容。
> 
> 
>


### Elements


HTML5 引入了诸如 `main`、`header`、`footer`、`nav`、`article`、`section` 等大量新标签，给予开发者更多的选择，也包含辅助功能。


默认情况下，浏览器呈现这些元素的方式类似于普通的 `div`。 但是，在适当的地方使用它们会让标记文本具有更多的含义。


#### h1 ~ h6


每个页面应只有一个 `h1` 标签，用来概括说明页面的主题。


六个标题标签可以让搜索引擎获取页面的大纲。


#### main


`main` 标签用于呈现网页的主体内容，且每个页面应只有一个。


它有一个内嵌的特性，以便辅助技术快速定位到页面的主体。


如果在页面顶部看到过“跳转到主要内容”链接，那么使用 `main` 标签会自动让辅助设备具有这个跳转的功能。


#### article


`article` 是一个分段标签，用于呈现独立及完整的内容。 这个标签适用于博客、论坛帖子或者新闻文章。


删除了所有周围的上下文，这个内容仍然有意义，确定内容可以单独作为一部分。


`article` 用于独立且完整的内容，而 `section` 用于对与主题相关的内容进行分组，可以根据需要来嵌套使用。



> 
> 举个例子：如果一本书是一个 `article` 的话，那么每个章节就是 `section` 。
> 
> 
> 


当内容组之间没有联系时，我们可以使用 `div`。


#### header


`header` 可以为父级标签呈现简介信息或者导航链接，适用于那些在多个页面顶部重复出现的内容。


`header` 应当在 HTML 文档的 `body` 标签内使用，与包含页面标题、元信息的 `head` 标签不同。


#### nav


`nav` 也是一个具有语义化特性的 HTML5 标签。


它可以使屏幕阅读器快速识别出页面中的导航信息。 它用于呈现页面中的主导航链接。


#### footer


`footer` 元素也具有语义化的特性，可以让辅助工具快速定位到它。


它位于页面底部，用于呈现版权信息或者相关文档链接。


#### audio


`audio` 标签用于呈现音频内容或音频流，它也具有语义化特性。 音频内容也需要备用文本，供聋哑人或听力困难的人使用。


`audio` 标签支持 `controls` 属性， 用于显示浏览器默认播放、停止和其他控制，以及支持键盘功能。


**注意：** 音频片段的播放速度可能会快到难以理解，但是对于屏幕阅读器用户来说这是正常速度。


### figure figcaption



> 
> `figure` 标签以及 `figcaption` 标签一起用于展示可视化信息（如：图片、图表）及其标题。
> 
> 
>

Photo of Camper Cat executing a roundhouse kick — Master Camper Cat demonstrates proper form of a roundhouse kick.


### label for



> 
> `label` 标签的文本内容通常会是表单组件的名称或标签。
> 
> 
> 这些文本表明了组件的意义，也提升了表单的可访问性。
> 
> 
> `label` 标签的 `for` 属性将标签与表单组件绑定，屏幕阅读器也会读取 `for` 属性的属性值。
> 
> 
> 为了让标签可以在点击的时候也选中输入框，可以将单选按钮 input 标签嵌套在了 `label` 标签里面。 或者使用 `for` 属性，使其与表单组件的 `id` 属性值相同。
> 
> 
>

Email:


### fieldset legend



> 
> `fieldset` 标签包裹整组单选按钮，使用 `legend` 标签来提供分组的描述，以便屏幕阅读器用户会阅读 `fieldset` 元素中的每个选项。
> 
> 
> 而当选项的含义很明确时，如“性别选择”，使用包含 `for` 属性的 `label` 标签就足够了。
> 
> 
>

Choose one of these three items: Choice One
Choice Two
Choice Three


### input date


![image-20210909171454787](https://img-blog.csdnimg.cn/img_convert/406ffa6338e79295cf9b9d2b5f8105c1.png)

Enter a date:


### time datetime

Thank you to everyone for responding to Master Camper Cat's survey. The best day to host the vaunted Mortal Kombattournament is Thursday, September 15^th . May the best ninja win!


### ScreenReader-only



> 
> 添加一些只对屏幕阅读器可见的内容，可以用 CSS 来实现。
> 
> 
> **注意：**
> 
> 
> * `display: none;` 或 `visibility: hidden;` 会把内容彻底隐藏起来，屏幕阅读器也无法获取这些内容。
> * 如果把值设置为 0px，如 `width: 0px; height: 0px;`，意味着让元素脱离文档流，这样做同样也会让屏幕阅读器忽略此元素。
> 
> 
>

.sr-only {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
top: auto;
overflow: hidden;
}


### High Contrast Text


Web 内容无障碍指南（WCAG）建议正常文本的对比度至少为 4.5 : 1。


对比度是通过比较两种颜色的相对亮度值来计算的。


对比度的范围是从相同颜色的 1:1（无对比度）到白色与黑色的最高对比度 21:1。


可以通过将较暗的颜色变暗、将较淡的颜色变淡的方法来使对比度达到 4.5:1。


在色轮中，较暗的颜色通常是蓝色、紫色、洋红和红色，而较淡的颜色通常是橙色、黄色、绿色和蓝绿色。


### accesskey


HTML 提供 `accesskey` 属性，用于指定激活元素或者使元素获得焦点的快捷键。


添加 `accesskey` 属性可以让使用键盘的用户更高效率地导航。


HTML5 允许在任何标签上使用这个属性。 该属性尤其适用于链接、按钮、表单组件等元素。


### tabindex



> 
> 当用户使用键盘浏览页面时，诸如链接、表单控件等元素可以**自动获得**焦点，获得焦点的顺序与它们出现在 HTML 文档流中的顺序一致。当然可以通过将其他标签（如 `div`、`span`、`p` 等）的 `tabindex` 属性值设为 0 来让它们实现类似的效果。
> 
> 
> **注意：** `tabindex` 属性值为负整数（通常为 -1）的标签也是可以获得焦点的，只是不可以通过键盘操作（如 tab 键）来获得焦点。使用 `tabindex` 属性还可以让 CSS 伪类 `:focus` 在 `p` 标签上生效。
> 
> 
>

I need keyboard focus!



> 
> 给元素设置 `tabindex="1"`，键盘将首先把焦点放在这个元素上。
> 
> 
> 然后它按照指定的 `tabindex` 值（2、3 等等）顺序循环，再移动到默认值和 `tabindex="0"` 项目。
> 
> 
>


## 🍉Responsive Web Design Principles


### @media



> 
> 可以根据不同的视口大小调整内容的布局。
> 
> 
> 视口是指浏览器中，用户可见的网页内容。 视口会随访问网站的设备不同而改变。
> 
> 
>

p {
font-size: 20px;
}

@media (max-height: 800px) {
p {
font-size: 10px;
}
}


### Responsive Image



> 
> 使图片自适应设备尺寸：
> 
> 
> * 设置 `max-width` 值为 `100%` 可确保图片不超出父容器的范围。
> * 设置 `height` 属性为 `auto` 可以保持图片的原始宽高比。
> 
> 
>

freeCodeCamp stickers set


### Retina Image



> 
> 针对高分辨率屏幕应使用视网膜图片：由于“视网膜显示屏”和“非视网膜显示屏”显示器之间像素密度的不同，某些未考虑高分辨率显示器的图像在高分辨率显示器上渲染时，可能因出现“像素化”而不够清晰。
> 
> 
> 让图像正确出现在高分辨率显示器上的最简单方式， 是定义它们的 `width` 和 `height` 值为原始值的一半。
> 
> 
>

freeCodeCamp sticker that says 'Because CamperBot Cares'


### vw vh vmin vmax



> 
> 视窗单位是相对于**设备的视窗尺寸**（宽度或高度），百分比是相对于**父级元素**的大小。
> 
> 
> 个不同的视窗单位分别是：
> 
> 
> * `vw`：如 `10vw` 的意思是视窗宽度的 10%。
> * `vh：` 如 `3vh` 的意思是视窗高度的 3%。
> * `vmin：` 如 `70vmin` 的意思是视窗的高度和宽度中较小一个的 70%。
> * `vmax：` 如 `100vmax` 的意思是视窗的高度和宽度中较大一个的 100%。
> 
> 
>

Importantus Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.


## 🍈CSS Flexbox


[Play Flex Box Adventure – CSS Game to Learn Flexbox (codingfantasy.com)](https://bbs.csdn.net/topics/618668825)


[Knights of the Flexbox table](https://bbs.csdn.net/topics/618668825)


[Flexbox Froggy - A game for learning CSS flexbox](https://bbs.csdn.net/topics/618668825)


[Flexbox Defense](https://bbs.csdn.net/topics/618668825)


[Flexbox Zombies (mastery.games)](https://bbs.csdn.net/topics/618668825)


给元素添加 `display: flex` 属性可以让它变成 flex 容器， 然后可以让元素的项目排列成行或列。


### flex-direction


属性值设置为 row 或 column，即可横向排列或纵向排列它的所有子元素。




| 值 | 描述 |
| --- | --- |
| row | 默认值。flex 项目将水平显示，正如一个行一样。 |
| row-reverse | 与 row 相同，但是以相反的顺序。 |
| column | 灵活的项目将垂直显示，正如一个列一样。 |
| column-reverse | 与 column 相同，但是以相反的顺序。 |


### justify-content


flex 子元素有时不能充满整个 flex 容器， 可以通过 `justify-content` 属性的不同值来实现告诉 CSS 以什么方式排列 flex 子元素。


子元素排列的方向被称为 **main axis（主轴）**。 对于行，主轴水平贯穿每一个项目； 对于列，主轴垂直贯穿每一个项目。




| 值 | 描述 [Playit (runoob.com)](https://bbs.csdn.net/topics/618668825) |
| --- | --- |
| flex-start | 默认值。从 flex 容器的起始位置开始排列项目。 对行来说是把项目移至左边， 对于列是把项目移至顶部。 |
| flex-end | 从 flex 容器的终止位置开始排列项目。 对行来说是把项目移至右边， 对于列是把项目移至底部。 |
| center | flex 子元素在 flex 容器中居中排列。 |
| space-between | 项目间保留一定间距地沿主轴居中排列。 第一个和最后一个项目被放置在容器边沿。 例如，在行中第一个项目会紧贴着容器左边，最后一个项目会紧贴着容器右边，然后其他项目均匀排布。 |
| space-around | 与`space-between`相似，但头尾两个项目不会紧贴容器边缘，所有项目之间的空间均匀排布。 |
| space-evenly | 头尾两个项目不会紧贴容器边缘，所有项目之间的空间均匀排布。 |


### align-items


Flex 容器中，与主轴垂直的叫做 **cross axis（交叉轴）**。 行的交叉轴是垂直的，列的交叉轴是水平的。


`align-items` 属性用来定义 flex 子元素沿交叉轴的对齐方式。


对行来说，定义的是元素的上下对齐方式； 对列来说，是定义元素的左右对齐方式。




| Attributes | Description [Playit (runoob.com)](https://bbs.csdn.net/topics/618668825) |
| --- | --- |
| stretch | 默认值。拉伸项目，填满 flex 容器。 例如，排成行的项目从容器顶部拉伸到底部。 |
| center | 把项目居中放置。 对行来说，垂直居中（项目距离顶部和底部的距离相等）； 对列来说，水平居中（项目距离左边和右边的距离相等）。 |
| flex-start | 从 flex 容器的起始位置开始对齐项目。 对行来说，把项目移至容器顶部； 对列来说，是把项目移至容器左边。 |
| flex-end | 从 flex 容器的终止位置开始对齐项目。 对行来说，把项目移至容器底部； 对列来说，把项目移至容器右边。 |
| baseline | 沿基线对齐。 基线是文本相关的概念，可以认为它是字母排列的下端基准线。 |


### flex-wrap



> 
> 以我的理解就是截断，如同 JetBrains 的软件设置里通常会有的 Hard-wrap ，用来设置每行最多有多少字符，会在你格式化代码 Ctrl+Alt+L 的时候强制插入换行符，形成显示效果上的换行。
> 
> 
> 


默认情况下，flex 容器会调整项目大小，把它们都塞到一起。 对于行来说，所有项目都会在一条直线上。


使用 `flex-wrap` 属性可以使项目换行展示。 这意味着多出来的子元素会被移到新的行或列。 换行发生的断点由子元素和容器的大小决定。




| 值 | 描述 |
| --- | --- |
| nowrap | 默认值，不换行。 |
| wrap | 如果排列以行为基准，就将行从上往下排列；如果排列以列为基准，就将列从左往右排列。 |
| wrap-reverse | 如果排列以行为基准，就将行从下往上排列；如果排列以列为基准，就将列从右往左排列。 |


### Child Elements


以上提到的属性都应用于 flex 容器（flex 子元素的父元素），下面讲一些子元素的实用属性。


#### flex-shrink


使用之后，如果 flex 容器太小，则子元素会自动缩小。


当容器的宽度小于里面所有子元素的宽度之和时，所有子元素都会自动压缩。


子元素的 `flex-shrink` 接受数值作为属性值。 数值越大，则该元素与其他元素相比会被压缩得更厉害。


比如，一个项目的 `flex-shrink` 属性值为 1，另一个项目的 `flex-shrink` 属性值为 3 ，那么后者相比前者会受到 3 倍压缩。


#### flex-grow


`flex-shrink` 会在容器太小时对子元素作出调整。


相应地，`flex-grow` 会在容器太大时对子元素作出调整。


如果一个项目的 `flex-grow` 属性值为 1，另一个项目的 `flex-grow` 属性值为 3，那么值为 3 的一个会较另一个扩大 3 倍。


#### flex-basis


`flex-basis` 属性定义了在使用 CSS 的 `flex-shrink` 或 `flex-grow` 属性对元素进行调整前，元素的初始大小。


`flex-basis` 属性的单位与其他表示尺寸的属性的单位一致（`px`、`em`、`%` 等）。 如果值为 `auto`，则项目的尺寸随内容调整。



> 
> 可以三种属性值一起设置：例如，`flex: 1 0 10px;`
> 
> 
> 会把项目属性设为 `flex-grow: 1;`、`flex-shrink: 0;` 以及 `flex-basis: 10px;`。
> 
> 
> **默认**设置是 `flex: 0 1 auto;`。
> 
> 
> 


#### order


默认情况下，项目排列顺序与源 HTML 文件中顺序相同。


`order` 属性表明 CSS flex 容器里子元素的顺序。接受数字作为参数，可以使用负数。


#### align-self


`align-self` 允许你调整单个子元素自己的对齐方式，而不会影响到全部子元素。


可设置的值与 `align-items` 的一样，并且它会覆盖 `align-items` 所设置的值。


因为 `float`、`clear` 和 `vertical-align` 等调整对齐方式的属性都不能应用于 flex 子元素，所以这个属性显得十分有用。


## 🍍CSS Grid


[Grid Garden - A game for learning CSS grid (cssgridgarden.com)](https://bbs.csdn.net/topics/618668825)


[Play Grid Attack – CSS Game to learn CSS Grid (codingfantasy.com)](https://bbs.csdn.net/topics/618668825)


[CSS Grid Cheat Sheet (alialaa.github.io)](https://bbs.csdn.net/topics/618668825)


通过将属性 `display` 的值设为 `grid`，HTML 元素就可以变为网格容器。


在 CSS 网格中，父元素称为容器（container），它的子元素称为项（items）。


### grid-template


#### rows columns

.container {
display: grid;

/\* 在网格容器中添加两列，宽度均为50px \*/
grid-template-columns: 50px 50px;

/\* 在网格容器中添加两行，宽度均为50px \*/
grid-template-rows: 50px 50px;

}


#### fr



> 
> 在 CSS 网格中，可以使用绝对单位（如 `px`）或相对单位（如 `em`）来定义行或列的大小。
> 
> 
> 下面的单位也可以使用：
> 
> 
> * `fr`：设置列或行占剩余空间的比例。
> * `auto`：设置列宽或行高自动等于它的内容的宽度或高度。
> * `%`：将列或行调整为它的容器宽度或高度的百分比。
> 
> 
>

.container {
font-size: 40px;
width: 100%;
background: LightGray;
display: grid;

/\*

第一列的宽与它的内容宽度相等；
第二列宽 50px；第三列宽是它容器的 10%；
最后两列，将剩余的宽度平均分成三份，第四列占两份，第五列占一份。
*/
grid-template-columns: auto 50px 10% 2fr 1fr;
}


### grid-gap

.container {
display: grid;
width: 100%;

/\* 所有列之间都添加 10px 的空白间距 \*/
grid-column-gap: 10px;
/\* 所有行添加高度为 5px 的间距 \*/
grid-row-gap: 5px;

/\* 第一个值表示行间距，第二个值表示列间距 \*/
grid-gap: 10px 20px;
/\* 只有一个值表示均为这个值 \*/
grid-gap: 10px;

}


### grid-column grid-row



> 
> 以上所有的讨论都是围绕网格容器的。
> 
> 
> 


`grid-column` 和 `grid-row` 属性是用于网格项本身的属性。


网格中，假想的水平线和垂直线被称为线（lines），这些线在网格的左上角从 1 开始编号，垂直线向右、水平线向下累加计数。


![3×3 的网格线条](https://img-blog.csdnimg.cn/img_convert/4a319e1f706de1d59a40b02267e6f2d4.png)

.item5 {
background: PaleGreen;

/\* 占据网格的后两列，即列线2~4的部分 \*/

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

iner），它的子元素称为项（items）。

grid-template

rows columns

.container {
    display: grid;
    
    /\* 在网格容器中添加两列，宽度均为50px \*/
    grid-template-columns: 50px 50px;
    
    /\* 在网格容器中添加两行，宽度均为50px \*/
    grid-template-rows: 50px 50px;
}

fr

在 CSS 网格中，可以使用绝对单位（如 px）或相对单位（如 em）来定义行或列的大小。

下面的单位也可以使用：

fr：设置列或行占剩余空间的比例。
auto：设置列宽或行高自动等于它的内容的宽度或高度。
%：将列或行调整为它的容器宽度或高度的百分比。

.container {
    font-size: 40px;
    width: 100%;
    background: LightGray;
    display: grid;

    /\* 
 第一列的宽与它的内容宽度相等；
 第二列宽 50px；第三列宽是它容器的 10%；
 最后两列，将剩余的宽度平均分成三份，第四列占两份，第五列占一份。 
 \*/
    grid-template-columns: auto 50px 10% 2fr 1fr;
}

grid-gap

.container {
    display: grid;
	width: 100%;
    
    /\* 所有列之间都添加 10px 的空白间距 \*/
    grid-column-gap: 10px;
    /\* 所有行添加高度为 5px 的间距 \*/
    grid-row-gap: 5px;

    /\* 第一个值表示行间距，第二个值表示列间距 \*/
    grid-gap: 10px 20px;
    /\* 只有一个值表示均为这个值 \*/
    grid-gap: 10px;
}

grid-column grid-row

以上所有的讨论都是围绕网格容器的。

grid-column 和 grid-row 属性是用于网格项本身的属性。

网格中，假想的水平线和垂直线被称为线（lines），这些线在网格的左上角从 1 开始编号，垂直线向右、水平线向下累加计数。

3×3 的网格线条

.item5 {
    background: PaleGreen;
    
    /\* 占据网格的后两列，即列线2~4的部分 \*/


[外链图片转存中...(img-2Vi1cHNP-1715891157206)]
[外链图片转存中...(img-BzMFNQoB-1715891157207)]

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化的资料的朋友，可以添加戳这里获取](https://bbs.csdn.net/topics/618668825)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**