有了Float元素之后，网页设计变得非常的轻松简洁，但有朋友经常谈论到Float的用法，就感觉很抽象，比较难懂；其实这些新名词确实是晦涩难懂的，从这篇起，用几篇文章来透切的的讲解，今天主要讲一些名词概念。
本文索引
- viewport 视口
- initial containing block 初始容器
- Containing blocks or containing boxes 包含快或包含框
- Block-level elements and block boxes 块级元素和块框
- Inline-level elements and inline boxes 内联级元素和内联框
- Normal flow 正常摆放内容
- Out of normal flow 溢出内容
- Static positioning 静态定位
- Float positioning 浮动定位
- Relative positioning 相对定位
- Absolute positioning 绝对定位
- Fixed positioning 固定定位
viewport 视口
视口是网页的显示窗口或查看区域。如果网页的页面大于了视口时，就应该出现滚动条。
NoneNone
initial containing block 初始容器
初始容器是整个网页的宽度和高度 （ 包括超出视口之外的页面部分）。
NoneNone
Containing blocks or containing boxes 包含块或包含框
包含块或包含框是包含其他元素的框或块。元素的包含块表示“元素所在的包含块”，也就是他的上级元素。
None
Block-level elements and block boxes 块级元素和块框
None
块级元素（或块框）是可视格式化为块的元素。例如，一段文本
None
Inline-level elements and inline boxes 内联级元素和内联框
内联元素是不形成新内容块的元素;内容按行分发，也就是不换行。
None
Normal flow 正常摆放内容
文档在没有对元素应用定位或浮动时显示的方式。内容将沿着页面自然摆放，从文档中的第一个元素开始，到文档中的最后一个元素结束。
None
Out of normal flow 溢出内容
None
超出块（或框）元素以外的内容，正常显示内容都将完全忽略它，并且不会为其腾出空间。
None
Static positioning 静态定位
就是没有进行位置修饰的。
None
Float positioning 浮动定位
可以以需要向左右偏移，其他内容会随着改变摆放的位置。
None
Relative positioning 相对定位
None
相对定位是以其他元素的位置的数值为参照来确定位置的，比如以其百分比。
None
Absolute positioning 绝对定位
完全按照数值进行定位。
None
Fixed positioning 固定定位
固定定位相对于视区。如果滚动页面，它们不会移动。IE5 /IE6根本不支持这种定位方式。
NoneNone None
油管频道👉 https://bit.ly/2XNfakc 看最新视频，白嫖最新节点！
请朋友们优先使用订阅，特别是手机用户，更方便更快捷！
-
👉Clash-meta 20.37版以后/Shadowrocket订阅：
https://drive.google.com/uc?export=download&id=1wVa6yw-lVRsv814xYe5WX-zB6kB1whgZ
-
👉Clash-旧版 20.37版以前/Shadowrocket订阅：
https://drive.google.com/uc?export=download&id=1wVTNWe_-dzLSqv0GiInPTWHD6QqCEYsb
-
👉V2ray/IOS苹果V2Box/WinXray/Quantumult X订阅：
https://drive.google.com/uc?export=download&id=1wUIpTHm-SC0yp2kvsmo-xV-iiw3gtode
- 👉Clash-meta(点击下载后，本地导入)
- 👉 Clash-旧版(点击下载后，本地打开)
- 👉 IOS 苹果小火箭专用(点击自动下载，订阅地址请右键复制链接地址)
- 👉 V2ray/IOS苹果V2Box/winXray(点击下载后，本地打开)
0 评论