一、CSS显示模式

一、CSS显示模式

1、垂直对齐方式 vertical-align属性

常用的值：

• vertical-align: baseline; 默认值，基线对齐 英文字母x的下端
• vertical-align: top; 顶端对齐
• vertical-align: bottom; 底端对齐
• vertical-align: middle; 中部对齐

典型应用

• 图片与图片垂直方向的对齐
• 图片与文字垂直方向的对齐
• 图片与文本框垂直方向的对齐

图片下方间隙问题

图片间隙问题产生的原因：父元素没有设置高度，由图片撑开，就会有图片三像素问题

• 为img标签的父元素设置font-size:0;(水平方向和垂直方向间隙)或line-height:0;
• 将img标签转成块级元素img{ display: block;}
• 为img标签设置垂直对齐方式img{ vertical-align: top|bottom|middle; }
• 为img标签的父元素设置高度，高和图片的高一样

图片居中

方法1：父元素{text-align:center}

方法2：图片{display:block;margin:0 auto;}

img{
   
            display: block;
            margin: 0 auto;
        }

2、CSS三大特性总结

1、继承性

概念：父元素向后代元素传递属性的机制

表现：后代元素会继承父元素的属性

总结常用可继承的属性

一般text-,line-,font-,color开头的基本都能继承

      a标签不能继承字体颜色color
      h标签不能继承font-weight
      b.strong不能继承font-weight
      i,em不能继承