学习资料专用

shanxinlin · Jun 9, 2023 · 22c42fc · 22c42fc
commit 22c42fc
Show file tree

Hide file tree

Showing 723 changed files with 78,282 additions and 0 deletions.
diff --git a/CSS Layout/CSS Layout Note.md b/CSS Layout/CSS Layout Note.md
@@ -0,0 +1,22 @@
+# CSS Layout Note
+
+**Float、Grid、Flex、position、display 和盒模型**是用于制作布局的一些关键主题。
+
+以下是一些关于这方面的资料：
+
+- [Introduction to CSS layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Introduction)
+- [学习 CSS 布局](https://zh.learnlayout.com/)
+- [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
+- [Flex 布局](https://github.com/lio-zero/blog/blob/main/CSS/Flex%20%E5%B8%83%E5%B1%80.md)
+- [The box model](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model)
+- [The CSS Display Property - Display None, Display Table, Inline Block and More](https://www.freecodecamp.org/news/the-css-display-property-display-none-display-table-inline-block-and-more/)
+- [FLEXBOX FROGGY](https://flexboxfroggy.com/)
+- [A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)
+- [GRID GARDEN](https://cssgridgarden.com/)
+- [All About Floats](https://css-tricks.com/all-about-floats/)
+- [Absolute, Relative, Fixed Positioning: How Do They Differ?](https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/)
+- [Understanding Flexbox: Everything you need to know](https://www.freecodecamp.org/news/understanding-flexbox-everything-you-need-to-know-b4013d4dc9af#.pr6cltk9j)
+- [CSS Flexible Box Layout](https://www.w3.org/TR/css-flexbox-1/) 和 [CSS Grid Layout](https://www.w3.org/TR/css-grid-1/) 规范。
+- [The Holy Grail Layout with CSS Grid](https://bitsofco.de/holy-grail-layout-css-grid/)
+- [magic-of-css](https://adamschwartz.co/magic-of-css/)
+- [CSS Grid and Grid Highlighter Now in Firefox Developer Edition](https://hacks.mozilla.org/2016/12/css-grid-and-grid-highlighter-now-in-firefox-developer-edition/)
diff --git a/CSS Layout/CSS 多列（column）.md b/CSS Layout/CSS 多列（column）.md
@@ -0,0 +1,93 @@
+# CSS 多列（column）
+
+CSS `columns` 属性用来设置元素的列宽和列数。
+
+## 浏览器支持情况
+
+## 相关属性
+
+- `column-width: <length unit>` 列的宽度。
+- `column-count: <number> | auto` 指定元素的列数。
+- `columns` 为 `column-width` 和 `column-count` 的简写形式
+- `column-rule-style` 指定两列间边框的样式
+- `column-rule-width` 指定两列间边框的厚度
+- `column-rule-color` 指定两列间边框的颜色
+- `column-rule` 为上面三个的简写形式，规定列之间的宽度、样式和颜色。
+- `column-gap` 控制列之间的距离
+- `column-span: none | all` 指定元素要跨越多少列
+- `column-fill: all | balanced` 指定如何填充列
+
+您可以使用 `break-before`，`break-after` 或者 `break-inside` 来如何控制每一列中的内容显示。
+
+默认情况下，列与内容保持平衡。如果您希望列不平衡，可以使用 `column-fill: auto` 进行设置。其默认行为为 `column-fill: balanced`。
+
+```css
+.container {
+  width: 300px;
+  margin: 100px auto;
+  columns: 8;
+  column-rule: 1px dashed rgb(213, 213, 213);
+  direction: rtl;
+  word-wrap: break-word;
+  text-align: center;
+}
+```
+
+> [查看效果](https://codepen.io/lio-zero/pen/mdRpNjm)
+
+我们再来看看两个例子。
+
+## 三列
+
+```html
+<div class="three-col">
+  Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos pariatur sunt
+  consequatur vitae corrupti dolores praesentium sapiente dolorum laudantium
+  dolor ut natus, cum animi, cumque molestias libero eius nobis! Quod, veniam.
+  Velit quo quos repudiandae minus est quaerat recusandae maiores impedit labore
+  asperiores numquam amet, libero in dolorem cupiditate! Repudiandae impedit
+  corporis sapiente sint velit similique, voluptatum cum nemo est magnam non
+  ratione aliquam adipisci error perspiciatis voluptas quos dicta voluptatibus
+  suscipit nam. Ad labore nihil sint quisquam eum corrupti nam. Explicabo,
+  commodi. Labore molestias reiciendis vitae eos, iste possimus odio, voluptates
+  quasi nam, voluptate est? Odio architecto doloribus quia.
+</div>
+```
+
+CSS 如下：
+
+```css
+.three-col {
+  column-count: 3;
+  column-gap: 20px;
+  column-rule: 1px dashed #ccc;
+}
+```
+
+## 导航栏
+
+```css
+.nav {
+  columns: 100px 4;
+  column-gap: 0;
+  column-rule: 1px solid #1a242f;
+  background: #2c3e50;
+}
+
+.nav a {
+  display: block;
+  padding: 1em;
+  border-bottom: 1px solid #1a242f;
+  color: white;
+  text-align: center;
+  text-decoration: none;
+}
+
+.nav a:hover {
+  background: #1a242f;
+}
+```
+
+> [查看效果](https://codepen.io/lio-zero/pen/zYNROYG)
+
+你可以查阅 [When And How To Use CSS Multi-Column Layout](https://www.smashingmagazine.com/2019/01/css-multiple-column-layout-multicol/) 以了解更多关于这方面的内容。
diff --git a/CSS Layout/CSS 居中.md b/CSS Layout/CSS 居中.md
@@ -0,0 +1,206 @@
+# CSS 居中
+
+基本结构如下：
+
+```html
+<div class="container">
+  <div class="box"></div>
+</div>
+```
+
+基本样式如下：
+
+```css
+.container {
+  width: 200px;
+  height: 200px;
+  background-color: pink;
+}
+
+.box {
+  width: 50px;
+  height: 50px;
+  background-color: plum;
+}
+```
+
+## table-cell
+
+```css
+.container {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.box {
+  margin: auto;
+}
+```
+
+或者：
+
+```css
+.container {
+  display: table-cell;
+  text-align: center;
+  vertical-align: middle;
+}
+
+.box {
+  display: inline-block;
+}
+```
+
+## position
+
+**未知宽度和高度的元素**，可以使用绝对定位和 `transform` 属性的 `translate`。
+
+```css
+.container {
+  position: relative;
+}
+
+.box {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+```
+
+`transform` 还可以使用 `margin` 代替，但需要提前知道元素的宽高：
+
+```css
+.container {
+  position: relative;
+}
+
+.box {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin: -25px 0 0 -25px; // width 和 height 的负一半
+}
+```
+
+另一种方式，设置 `absolute` 的偏移值（`top`、`left`、`right` 和 `bottom`）为 `0`，并使用 `margin: auto`，好处是不需要提前知道元素的尺寸兼容性好。
+
+```css
+.container {
+  position: relative;
+}
+
+.box {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  margin: auto;
+}
+```
+
+## Flex
+
+使用 `justify-content` 和 `align-item`：
+
+```css
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+```
+
+使用 `justify-content` 和 `align-self`：
+
+```css
+.container {
+  display: flex;
+  justify-content: center;
+}
+
+.box {
+  align-self: center;
+}
+```
+
+使用 `margin: auto`：
+
+```css
+.container {
+  display: flex;
+}
+
+.box {
+  margin: auto;
+}
+```
+
+## 使用 Grid 居中
+
+`grid` 用于二维布局，但当只有一个子元素时，一维布局与二维布局都一样。
+
+```css
+.container {
+  display: grid;
+  justify-content: center;
+  align-content: center;
+}
+/* or */
+.container {
+  display: grid;
+  justify-items: center;
+  align-items: center;
+}
+```
+
+上面属性的简写形式：
+
+```css
+.container {
+  display: grid;
+  place-items: center;
+}
+/* or */
+.container {
+  display: grid;
+  place-content: center;
+}
+```
+
+更简便的技巧：
+
+```css
+.container {
+  display: grid;
+}
+
+.box {
+  margin: auto;
+}
+```
+
+另一种方式，我们可以单独控制子元素的对齐方式：
+
+```css
+.container {
+  display: grid;
+}
+
+.box {
+  align-self: center;
+  justify-self: center;
+  /* 简写形式 */
+  /* place-self: center; */
+}
+```
+
+搭配众多，一个个尝试。
+
+> [演示地址](https://codepen.io/lio-zero/pen/XWVyqjZ)
+
+## 更多资料
+
+- [Centering in CSS: A Complete Guide](https://css-tricks.com/centering-css-complete-guide/)
+- [How to horizontally center an element](https://stackoverflow.com/questions/114543/how-to-horizontally-center-an-element)