web前端的恐怖之旅（5）：垂直对齐方式和背景属性

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

---

1. 基线对齐（和英文本上的第三根线相同）

   1. 图片下方间隙的问题（基线到底线的距离，由字体大小决定）

      

         *解决方案：给图片一个`vertical-align的`的其他值覆盖baseline
      

   2. 图文对齐，行内元素和行内块元素之间的对齐，块级是没有基线对齐的

      ​ *图文居中对齐：给需要对齐的行内行内块元素每人来一个middle

2. top对齐（该元素的顶端与父元素的line-box的顶端对齐）

   • inline-box包括 行内元素与内容（有标签包裹）和文本（没有标签包裹的）

      img标签，span标签，不带标签文本内容，行内元素 等等
     

   • line-box ：行框盒子里面由inline-box组成的一行
     

   • line-box的高度会取决于这一行中最高的那个inline-box
     

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

     
     2），图片是top对齐，文字是基线对齐

     

3. bottom对齐（该元素的底端与父元素的line-box的底端对齐 ）

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

   
   2），文字是bottom对齐，文字是基线对齐
   

4. middle对齐（该元素的中线与父元素的基线 往上移动小写x的一半距离）

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

   2），文字是middle对齐，line-box是middle对齐

   

5. text-top对齐（该元素的顶端与父元素的内容文字的顶端对齐）

   • 图片是text-top对齐，和一段继承父元素字体的文字的顶端对齐

     

6. text-bottom对齐（该元素的底端与父元素的内容文字的底端对齐）

   • 图片是text-bottom对齐，和一段继承父元素字体的文字的底端对齐

     

7. px（用于微调input和行内之间对齐）

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

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

   eg：调节这两个标签的位置，使他们对齐

8. %（不使用）

   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
  • 2. x轴方向平铺：repeat-x
  • 3. y轴方向平铺：repeat-y

• 2），设置背景图片位置：background-position:10px 10px;（支持负值）

  • 1. 给两个值（x轴方向值，y轴方向值）
  • 2. 给1个值（x轴方向值，y轴默认居中）
  • 3. 给1个center值（图片居中）
  • 4. 只设置left时或right值时，水平方向居中,当只设置top时或bottom值时，竖直方向居中
    • left，right，top，bottom
  • 5. 给%值background-position:20% 20%，（父容器减去背景图的大小）*20%的值

• 3），设置背景图片大小：background-size:;

  • 1. 给一个值，此值代表图片宽度，另一个值等比缩放
    2. 给两个值，自定义背景图片大小
  • 3. % 相对于父容器的高度和宽度 eg：background-size:50% 50%;
       • 只给一个%值时，另外一个等比例缩放
  • 4. cover：让背景图片等比例放大充满整个父容器
    5. 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%是圆角）