H5C3(5)：垂直对齐方式和背景属性本文已参与「新人创作礼」活动，一起开启掘金创作之路。一，垂直对齐方式：verti

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

一，垂直对齐方式：`vertical-align:baseline;`默认是baseline（基线对齐）

基线对齐（和英文本上的第三根线相同）
1. 图片下方间隙的问题（基线到底线的距离，由字体大小决定）
```
   *解决方案：给图片一个`vertical-align的`的其他值覆盖baseline
```
2. 图文对齐，行内元素和行内块元素之间的对齐，块级是没有基线对齐的
  
  *图文居中对齐：给需要对齐的行内行内块元素每人来一个middle
top对齐（该元素的顶端与父元素的line-box的顶端对齐）
- inline-box包括行内元素与内容（有标签包裹）和文本（没有标签包裹的）
```
 img标签，span标签，不带标签文本内容，行内元素 等等
```
- line-box ：行框盒子里面由inline-box组成的一行
- line-box的高度会取决于这一行中最高的那个inline-box
- 1），文字是top对齐，图片是基线对齐
  
  2），图片是top对齐，文字是基线对齐
bottom对齐（该元素的底端与父元素的line-box的底端对齐）

1），图片是bottom对齐，文字是基线对齐

2），文字是bottom对齐，文字是基线对齐
middle对齐（该元素的中线与父元素的基线往上移动小写x的一半距离）

1），图片是middle对齐，line-box是基线对齐

2），文字是middle对齐，line-box是middle对齐
text-top对齐（该元素的顶端与父元素的内容文字的顶端对齐）
- 图片是text-top对齐，和一段继承父元素字体的文字的顶端对齐
text-bottom对齐（该元素的底端与父元素的内容文字的底端对齐）
- 图片是text-bottom对齐，和一段继承父元素字体的文字的底端对齐
px（用于微调input和行内之间对齐）

vertical-align:2px：该元素向上平移20像素

vertical-align:-2px：该元素向上平移20像素

eg：调节这两个标签的位置，使他们对齐
%（不使用）

1），line-height会决定line-box顶端的高度，图片是top对齐

2），vertical-align:50%:代表了line-heght如果原先为400px，该元素就会往上移动200px

二，背景

在css里引入背景图片：background-image:url("images/1.jpg");

1），决定背景图片是否平铺：background-repeat:repeat; (默认)
- 1. 不平铺：no-repeat
- 1. x轴方向平铺：repeat-x
- 1. y轴方向平铺：repeat-y
2），设置背景图片位置：background-position:10px 10px;（支持负值）
- 1. 给两个值（x轴方向值，y轴方向值）
- 1. 给1个值（x轴方向值，y轴默认居中）
- 1. 给1个center值（图片居中）
- 1. 只设置left时或right值时，水平方向居中,当只设置top时或bottom值时，竖直方向居中
  - left，right，top，bottom
- 1. 给%值background-position:20% 20%，（父容器减去背景图的大小）*20%的值
3），设置背景图片大小：background-size:;
- 1. 给一个值，此值代表图片宽度，另一个值等比缩放
  2. 给两个值，自定义背景图片大小
- 1. % 相对于父容器的高度和宽度 eg：background-size:50% 50%;
    - 只给一个%值时，另外一个等比例缩放
- 1. cover：让背景图片等比例放大充满整个父容器
  2. contain：保证父元素让我们的等比例图片容纳在内（只有一条边契合）

4），设置背景关联：background-attachment

1. 默认值：scroll 滚动
2. 图片固定：fixed

复合样式写背景图片的方法（超过3个写）：

background-image:url("images/1.jpg") no-repeat center/100px;
				 图片地址			不平铺		居中	 图片宽度

posiation/size	如果只写100px，会默认为pssiation
如果一定要写：background-image:url("images/1.jpg") no-repeat 0 0/100px;

5），设置精灵图
- 优点：减少图片的请求次数，一张图片无限使用
- 引入精灵图：
  1. 确定外部盒子大小（确定你要放图标的盒子的大小）
  2. 确定背景位置（通过设置图片位置来移动想要的图标到盒子里）

三，圆角

作用：使盒子的边界角变圆
- 分为4个角
```
border-top-left-radius;
border-top-right-radius;
border-bottom-right-radius;
border-bottom-left-radius;
```
- 复合样式==>border-radius 圆角：
  - 四个值：左上右上右下左下
  - 三个值：左上右上左下右下
  - 两个值：左上右下右上左下
  - 一个值：所有角一样的值
- 单位：%/px（给50%是圆角）

H5C3(5)：垂直对齐方式和背景属性

一，垂直对齐方式：vertical-align:baseline;默认是baseline（基线对齐）

二，背景

三，圆角

一，垂直对齐方式：`vertical-align:baseline;`默认是baseline（基线对齐）