CSS布局排版【未完成】

布局和排版总是令人困惑~

MDN-CSS布局

一些布局技术会覆盖默认布局行为：

• display: block,inline
• float值
• position定位：fixed
• display特定布局: CSS Grid, Flex box
• 不同设备的响应式设计：@media
• display表格布局：display:table 组织非表格元素为表格
• 多列布局：区块内容以列布局，如报纸。

float

就像报纸图片那样，浮动起来
float:left

原理：float会使元素脱离文档流，并放在父亲的左上位置。这使得其余元素会包裹在其周围，正常布局从其旁边展开。
清除浮动：即不与浮动元素重合出现
.cleared {clear: left;}
问题：我们希望第一段和浮动元素一个背景。 可以外层使用。
.wrapper {display:flow-root}

position

让元素漂浮固定始终在一个位置。

static定位：就是正常文档流安排的默认位置。默认行为。

relative定位：让元素精确定位到 top bottom left right 位置。 值是相对于默认位置。默认占位依然会有。
absolute定位：脱离文档流，完全独立，默认占位没了。会根据最近设置过position的祖辈元素定位。如果有多个绝对定位重叠，通过z-index表示谁在上面。一般父亲用relative,子元素通过absolute定位。
fixed定位：固定位置。与absolute不同的是，fixed固定在视窗，不会随滑动而改变。 如：固定顶部导航栏
sticky粘性定位：滑动到某一个阈值后，固定在一个地方。如：滚动索引

flex弹性盒子

父元素声明flex, 子元素灵活展开。
四元素：main axis, cross axis, container，物品
通过flex-direction设置方向。
默认会把所有子元素放在一行，超出视界，通过flex-wrap自动换行。
flex-flow: 是direction wrap简写。
元素通过flex值灵活控制占比，如flex:1表示全部剩余空间，flex:2表示一半。也可设最小尺寸如 flex:2 100px;
元素水平/垂直居中对齐：align-items:center 物品沿主轴对齐。justify-content:space-around; 物品在主轴上均匀散开