position定位
position属性：
- static: 占据在正常的文档流中
- relative: 它与静态定位非常相似，占据在正常的文档流中，仍然可以修改top/bottom/left/right来精确指定它的最终位置，包括让它与页面上的其他元素重叠。
position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。
- absolute: 元素会被移出正常文档流，并不为元素预留空间，绝对定位固定元素是相对于
<html>元素或其最近的定位祖先
通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
- fixed: 元素会被移出正常文档流，并不为元素预留空间
而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先。
- sticky: 相对位置和固定位置的混合体，它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点（例如，从视口顶部起10像素）为止，就变得固定了
一个sticky元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的overflow 是 hidden, scroll, auto, 或 overlay时），即便这个祖先不是最近的真实可滚动祖先。
应用举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Position:Sticky</title>
<link rel="stylesheet" href="">
<style type="text/css" media="screen">
body { width: 500px; height: 1400px; margin: 0 auto; }
// 1. 可用于使导航栏随页面滚动直到特定点，然后粘贴在页面顶部。
dt { background-color: black; color: white; padding: 10px; margin: 1em 0; }
.sticky_dt{ background-color: red; position: sticky; top: 30px; left: 30px; }
// 2. 另一种有趣且常用的用法，是创建一个滚动索引页面。在此页面上，不同的标题会停留在页面顶部
dt { background-color: black; color: white; padding: 10px; margin: 1em 0; position: sticky; top: 0px; left: 0px；}
</style>
</head>
<body>
<dl>
<dt>A</dt> <dd>Apple</dd> <dd>Ant</dd> <dd>Altimeter</dd> <dd>Airplane</dd>
<dt class="sticky_dt">B</dt> <dd>Bird</dd> <dd>Buzzard</dd> <dd>Bee</dd> <dd>Beanstalk</dd>
<dt>C</dt> <dd>Calculator</dd> <dd>Cane</dd> <dd>Camera</dd> <dd>Camel</dd>
<dt>D</dt> <dd>Duck</dd> <dd>Dime</dd> <dd>Dipstick</dd> <dd>Drone</dd>
<dt>E</dt> <dd>Egg</dd> <dd>Elephant</dd> dd>Egret</dd>
</dl>
</body>
</html>
float布局
float CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性（与绝对定位相反）。
属性
- left: 表明元素必须浮动在其所在的块容器左侧的关键字。
- right: 表明元素必须浮动在其所在的块容器右侧的关键字。
- none: 表明元素不进行浮动的关键字。
- inline-start: 关键字，表明元素必须浮动在其所在块容器的开始一侧，在ltr脚本中是左侧，在rtl脚本中是右侧。
- inline-end: 关键字，表明元素必须浮动在其所在块容器的结束一侧，在ltr脚本中是右侧，在rtl脚本中是左侧。
clear清除浮动
clear CSS 属性指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面。clear 属性适用于浮动和非浮动元素。
属性
- none: 元素不会向下移动清除之前的浮动。
- left: 元素被向下移动用于清除之前的左浮动。
- right: 元素被向下移动用于清除之前的右浮动。
- both: 元素被向下移动用于清除之前的左右浮动。
flex布局
让布局变得灵活和直观 容器自己决定如何均匀分配它的子元素 – 包括子元素的大小和相互之间的间隔。 自动调整子元素的高和宽，来很好的填充任何不同屏幕大小的显示设备中的可用显示空间 适用于应用组件和小比例布局 flex item(flex项)沿着主轴从左到右排列
解决问题：对齐方式，排列方向，排列顺序
属性
- display:flex
- Flex-direction 改变主轴方向 row/columu/row-reverse /column-reverse
- justify-content 控制 flex item(flex项) 在主轴（main axis）上的对齐
- flex-start: 元素和容器的左端对齐。
- flex-end: 元素和容器的右端对齐。
- center: 元素在容器里居中。
- space-between:元素之间保持相等的距离。
- space-around:元素周围保持相等的距离。
- align-items 属性则定义了 flex item(flex项) 在交叉轴(cross axis)上的对齐方式
- flex-start: 元素与容器的顶部对齐。
- flex-end: 元素与容器的底部对齐。
- center: 元素纵向居中。
- baseline: 元素在容器的基线位置显示。
- stretch: 元素被拉伸以填满整个容器。
- align-self 允许单独设置每个 flex item(flex项) 的对齐方式
- flex-basis 控制一个子元素(flex项)的默认大小，沿着轴线的长度
- flex-grow 初始值都是 1， 每个item的相对宽度
- flex-shrink 决定矩形子元素允许收缩多少的，主要用途是指定哪些 flex项 要缩小，哪些 flex项 不要缩小。默认情况下，每个矩形子元素(flex项)都为 1 – 这意味着每个矩形子元素将 随着容器收缩而收缩
- flex：flex-grow，flex-shrink 和 flex-basis 的缩写
推荐一个很好玩的Flex练习游戏：FlexBox Froggy
https://www.w3cplus.com/blog/tags/157.html
https://hufan-akari.github.io/solved-by-flexbox/
grid网格
- 特点
- 强大，灵活，简单
- 结构和表现分离
- 针对目标为大比例布局
两个核心组成部分是 wrapper（父元素）和 items（子元素）。 wrapper 是实际的 grid(网格 )，items 是 grid(网格) 内的内容
二维的网格容器，我们需要定义列和行
grid-template-columns: 100px 100px 100px;
grid-template-rows: 50px 50px;
定位和调整 items(子元素) 大小，使用 grid-column 和 grid-row 属性来设置起始grid：
grid-column: 1 / 4;
grid-row: 2 / 5;
推荐一个很好玩的Grid练习游戏：Grid Garden
8578
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
