前端（十二）

一布局css

关于布局的css目前学到的有浮动、相对定位，绝对定位、固定定位。关于布局中水平垂直居中的需求在实际开发中很是常见，下边就介绍一下关于居中那些事。

1.1让div水平居中

方式一：使用 marin:0 auto;css样式便可让div水平居中，可是须要一个条件：当前div的宽度是一个固定值。

<div style="margin: 0 auto; background: crimson;width: 100px; height: 100px ;"></div>复制代码

方式二：使用定位样式，让div水平居中。

<div style="position: absolute; left:50%; transform: translateX(-50%); background: crimson; width: 100px; height: 100px;"></div>复制代码

1.2让div垂直居中

只有一个方式，就是经过定位去实现垂直居中。

<div style="position: absolute; top:50%; transform: translateY(-50%); background: crimson; width: 100px; height: 100px;"></div>复制代码

1.3让div水平垂直居中

只有一个方式，就是经过定位去实现水平垂直居中。

<div style="position: absolute; top:50%; left: 50%; transform: translateY(-50%) translateY(-50%); background: crimson; width: 100px; height: 100px;"></div>复制代码

1.4让文字水平居中

经过text-align: center;属性去实现文字水平居中

<div style=" width: 100px; height: 100px; border: 1px solid #ff0000;text-align: center; ">eeeeeeee</div>复制代码

1.5让文字垂直居中

单行文字，使用line-height 等于height的方式达到文字垂直居中：

<div style=" width: 100px; height: 100px; border: 1px solid #ff0000;line-height: 100px ">eeeeeeee</div>复制代码

多行文字,须要使用div包裹，而后使用div的垂直居中的方式去实现文字的垂直居中。

<div style=" position: relative; width: 100px; height: 100px; border: 1px solid #ff0000; "> 
   <div style=" transform: translateY(-50%) ; position: absolute; top:50%; ">
        你好你好你好你好你好你好你好你好你好  
  </div> 
</div>复制代码

1.6让文字水平垂直居中

仅仅须要让文字垂直居中，而后加上一个text-align : center；属性便可让文字水平垂直居中。

二css3新布局方式

就目前所掌握的布局方式，对于块级元素的控制能力很不灵活，由于块级默认独占一行。变成行内又无法设置宽高。浮动规则死板。定位脱离文档流。CSS3在布局方面作了很是大的改进，使得咱们对块级元素的布局排列变得十分灵活，适应性很是强。

flex伸缩布局

• 主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向，从左向右。

• 侧轴：与主轴垂直的轴称做侧轴，默认是垂直方向，从上往下。

PS：主轴和侧轴并非固定不变的，经过flex-direction能够互换。

设置伸缩布局的步骤

1. 指定一个盒子为伸缩布局： display: flex;
2. 设置 flex-direction 来改变水平仍是垂直，从左到右仍是从右到左，从上到下仍是从下到上。

flex-direction属性讲解： 

• row 水平方向（默认值）
• reverse-row 水平反转
• column 垂直方向
• reverse-column 垂直反转

感受有点抄袭android中的线性布局orientation属性，可是丰富了更多属性。

justify-content：设置子元素在主轴上的对齐方式。

justify-content: 属性讲解：

• flex-start 从主轴的起点对齐（默认值）
• flex-end 从主轴的终点对齐
• center 沿主轴方向居中对齐
• space-around 在父盒子里平分
• space-between 两端对齐 平分

有点抄袭android中线性布局gravity属性，可是丰富了一些属性。

align-items：设置子元素在侧轴上的对齐方式。

align-items:属性讲解：

• flex-start 从侧轴开始的方向对齐
• flex-end 从侧轴结束的方向对齐
• baseline 基线 默认同flex-start
• center 中间对齐
• stretch 拉伸

伸缩布局权重

伸缩布局的子布局可使用flex 来表示权重，相似android线性布局的layout_weight。

经过伸缩布局的学习，咱们又增长让布局水平或者垂直居中的方式：

display: flex; align-items: center ;justify-content: center; 复制代码