布局&居中

关于布局

1.默认文档流（解决行的布局问题 ‘y轴’）
块元素，独占一行空间，高度由内容决定。块元素默认从上往下排列。

2.浮动布局（解决列的布局问题 ‘x轴’）
float 浮动元素：
建议：尽量给块元素设定宽度而非高度（块元素最终节点可以指定高度）
1>脱离文档流;
2>块元素的宽度不再是100%，而是由内容决定;
3>块元素不再支撑其父元素;
4>同一层次浮动元素会在一行排列，当浮动元素宽度总和大于父元素时，会发生换行。
clear 清理浮动:

• left   不与左浮动元素在同一水平线上
• right 不与右浮动元素在同一水平线上 

3.伸缩盒布局
弹性框布局模块，可以更轻松地设计灵活的响应式布局结构，而无需使用浮动或定位。
div.container > div
ul.container > li
1) 概念
        伸缩盒容器 div.container 、ul.container
        伸缩盒元素 div、li

1) 属性
a.通过将 display 属性设置为 flex，flex 容器将可伸缩。强制让它的子元素沿着主轴方向中显示，并且子元素不会脱离文档流，交叉轴上元素的高度如果没有指定，应该和父元素保持一致。

b.flex-direction 属性定义容器要在哪个方向上堆叠 flex 项目。

.flex-container {
  display: flex;
  flex-direction: column;
}

• column 值设置垂直堆叠 flex 项目（从上到下）
• row 值水平堆叠 flex 项目（从左到右）

c.flex-wrap 属性规定是否应该对 flex 项目换行。

• wrap 值规定 flex 项目将在必要时进行换行
• nowrap 值规定将不对 flex 项目换行（默认）

d.flex-flow 属性是用于同时设置 flex-direction 和 flex-wrap 属性的简写属性。

e.justify-content 属性用于对齐 flex 项目。

• center 值将 flex 项目在容器的中心对齐
• flex-start 值将 flex 项目在容器的开头对齐（默认）
• flex-end 值将 flex 项目在容器的末端对齐
• space-around 值显示行之前、之间和之后带有空格的 flex 项目
• space-between 值显示行之间有空格的 flex 项目

f.align-items 属性用于在交叉轴上对齐 flex 项目。

• center 值将 flex 项目在容器中间对齐
• flex-start 值将 flex 项目在容器顶部对齐
• flex-end 值将弹性项目在容器底部对齐
• stretch 值拉伸 flex 项目以填充容器（默认）

     

• （baseline 值使 flex 项目基线对齐 ）

g.flex-basic: 主轴上的基础长度（基本工资）
   flex-grow : 主轴上剩余空间分配的份数（分红）
   flex-shrink:主轴上亏损空间的分摊份数（亏损）

h.flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

关于居中

1.水平居中

a.块元素的水平居中
margin: auto
设置元素的宽度将防止其延伸到容器的边缘。
然后，元素将占用指定的宽度，剩余空间将在两个外边距之间平均分配。

.center {
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 20px;
}

注意：如果未设置 width 属性（或将其设置为 100％），则居中对齐无效。

b.居中对齐文本
text-align: center

c.居中对齐图像
将左右外边距设置为 auto，并将其设置为块元素

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

 2.左右对齐

a.position: absolute

.right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 20px;
}

注意：绝对定位的元素将从正常流中删除，并可能出现元素重叠。 

b.float

.right {
  float: right;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}

注意：如果一个元素比包含它的元素高，并且它是浮动的，它将溢出其容器。

2.垂直居中

a.使用上下内边距padding

b.使用其值等于 height 属性值的 line-height 属性

.center {
  line-height: 200px;
  height: 200px;
  border: 3px solid green;
  text-align: center;
}

c. 使用 Flexbox

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px solid green; 
}