Drive_FLY_0204

Author: DriveFLY

DriveFLY_FullStack_Compass.md

@@ -14,7 +14,7 @@
 
 概要：对 CSS 的内容进行了基础面的补充，同时开始观看[Full-Stack Social Media App Tutorial](https://www.youtube.com/watch?v=o080tU3sd0k)了解 React && Next.JS。参与本次共学的目的主要也是围绕这两个方面进行的：更全面地对 CSS 的常用属性有一个了解、额外掌握 Tailwind CSS、了解并使用 React 与 Next.JS 框架，至于产品设计的部分，时间有限，暂时不考虑做过多涉及。
 
-### display
+#### display
 
 每一个元素根据标签的不同都有默认的`display`值，最为常见的有这些：
 
@@ -34,7 +34,7 @@
 
 默认的`display`是可以被重写的，例如可以重写`li`为`inline`用于制作水平菜单。
 
-### width
+#### width
 
 width 可以限定元素的宽度，避免长段文字占据整个屏幕，用户需要不断将眼睛焦点从左到右移动，配合 margin 的`auto`可以将元素居中展示。
 
@@ -47,15 +47,15 @@ width 可以限定元素的宽度，避免长段文字占据整个屏幕，用
 
 但美中不足的是在浏览器本身宽度小于 width 时会展示滚动条。这时可以将`width`替换为`max-width`，实现在有空间时尽可能变宽，空间不足时则主动收缩。
 
-### 盒模型
+#### 盒模型
 
 ![盒模型示意图](https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Styling_basics/Box_model/box-model.png)
 
 元素的 border 与 padding 会撑开 box，也就是说实际上元素的实际宽度或高度是 width/height+padding+border。
 
 通过设置`box-sizing: border-box`，可以启用代替盒模型，盒子实际宽高即设置宽高，不会再向外扩展。
 
-### 边距
+#### 边距
 
 padding 和 margin 接收 1~4 个参数，分别对应不同情况：
 
@@ -75,7 +75,7 @@ padding: 1em 2em 2em;
 padding: 5px 1em 0 2em;
 ```
 
-### position
+#### position
 
 position 的默认值是`static`。设置为`static`的元素不会被`positioned`，即特殊地定位，设置为其他值（relative、fixed、absolute）则反之。
 
@@ -89,11 +89,57 @@ relative 单独使用与 static 一致，没有额外的效果。当配合 top
 
 **absolute（绝对的）**
 
-与 fixed 类似，但定位的对象不是页面整体而是最近的`positioned`祖先（设置为非`static`的元素），若无祖先则相对页面。
+与 fixed 类似，元素会被移出正常文档流，但定位的对象不是页面整体而是最近的`positioned`祖先（设置为非`static`的元素），若无祖先则相对页面。
 
-### Reference
+#### Reference
 
 https://zh.learnlayout.com/
+
+### 02.04
+
+#### 英文长单词溢出容器
+
+对于英文长单词（没有空格连续字母），如果没有主动设置换行规则，即使父元素设置宽度，英文单词也会直接溢出父容器。而中文由于可以被任意分割，不会出现类似的情况。
+
+在这种情况下，需要对容器主动配置换行规则：
+
+`overflow-wrap`
+
+- `normal`：默认行为，长单词不换行，可能会溢出容器。
+
+- `break-word`：强制长单词在容器的边界处换行，避免溢出。
+
+> `overflow-wrap` 是 `word-wrap` 的新标准名称，后者在 CSS3 中被重新命名为 `overflow-wrap`，但为了兼容性，旧属性 `word-wrap` 仍然有效。
+
+#### position 实践
+
+![position-code](images\DriveFLY\position-code.png)
+
+![position-preview](images\DriveFLY\position-preview.png)
+
+#### float
+
+float 用于实现文字环绕图片，将需要被环绕的元素放置在环绕元素前即可。
+
+```css
+img {
+  float: right;
+  margin: 0 0 1em 1em;
+}
+```
+
+#### 相对长度单位
+
+em 相对于本元素的字体大小。用于 font-size 时相对于父元素的字体大小。rem 相对于根元素的字体大小。
+
+vh 和 vw 分别相对于视口的高度和宽度。
+
+举个例子，父元素的字体大小设置为`16px`，将子元素的`font-size`设置为`1em`可以使得父子元素字体大小相等。
+
+同样 em 也可以用于`width`等属性。
+
+#### ToRead
+
 https://learn.shayhowe.com/html-css/
 
 <!-- Content_END -->