王老师html零基础学习笔记第11课—cousor+opacity

一、img特征

1、重新认识img(特征)： 

 A、支持宽高

 B、支持margin 

 C、（横排展示）

 D、能设置text-align 

 E、 能设置vertical-align 

 问题： 标签中间隙被解析 

           不支持margin：auto;

二、vertical-align

vertical-align 垂直对齐方式: 

 1、定义行内元素的基线相对于该元素所在行的基线的垂直对齐。

 2、inline  inline-block    img图片标签才具有,块级元素没有 

 3、vertical-align 可能的值：

     top 元素的顶端与行中最高元素的顶端对齐 

     middle 此元素放置在父元素的中部。 

     bottom 元素的顶端与行中最低的元素的顶端对齐。

    总结：以上值与line-height相关

 text-top 元素的顶端与父元素字体的顶端对齐 

 text-bottom 把元素的底端与父元素字体的底端对齐。

 baseline 默认。元素放置在父元素的基线上。

    总结：以上值与font-size相关 

 注意: a、加vertical-align的同排元素都要vertical-align；

         b、vertical-align可以解决img下方间隙问题；

三、cursor指针样式

1、cursor 指针样式 （规定要鼠标进入元素内容区域要显示的光标的类型） 

 2、Cursor 可能的值：

         default 默认光标（通常是一个箭头）

         auto 默认。浏览器设置的光标。 

         pointer 光标呈现为指示链接的指针（一只手） 

         move 此光标指示某对象可被移动。 

         text 光标指示文本。 

         wait 光标指示正忙（通常是一只表或沙漏）。

         help 光标指示帮助（通常是一个问号或一个气球）

 3、cursor:url(hand.cur),pointer; 

 第一个值：Url() 定义指针文件路径，此文件得是cur后缀 

 第二个值：当第一个值出错的时的备用类型

四、opacity透明度

1、opacity 属性设置元素的不透明级别 

 A 、标准 不透明度：  opacity:0~1; 从 0（完全透明） 到 1（完全不透明） 

 B、IE 滤镜（兼容IE下不支持opacity的版本）：  filter:alpha(opacity=0~100); 从 0（完全透明） 到 100（完全不透明）