十、Vertical-align和img特性鼠标样式

1、IMG的特性

支持宽高
支持margin
横排显示
能设置text-align
能设置vertical-align
标签中间空格被解析
不支持margin:auto

2、Vertical-align

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

只针对inline inline-block 图片标签,块级元素不适用

Vertical-align的值

top 元素的顶端与行中最高元素的顶端对齐
Middle 此元素放置在父元素的中部
Bottom 元素的顶端与行中最低的元素的底端对齐

             以上的值与line-height有关

text-top 元素的顶端与父元素字体的顶端对齐
text-bottom 元素的底端与父元素字体的底端对齐
baseline 默认 父元素放在元素的基线上

            以上的值与font-size有关
  • vertical-align可以解决img下方间隙问题;

3、鼠标样式cursor

规定要鼠标进入元素内容区域要显示的光标的类型

default 默认
default 默认光标(通常是一个箭头)
auto 默认。浏览器设置的光标。 
pointer 光标呈现为指示链接的指针(一只手) 
move 此光标指示某对象可被移动。 
text 光标指示文本。
wait 光标指示正忙(通常是一只表或沙漏)。
help 光标指示帮助(通常是一个问号或一个气球)

引入外部样式:

  • cursor:url(hand.cur),pointer;

pointer必须有;

第一个值:Url() 定义指针文件路径,此文件必须是cur后缀

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

4透明度opacity(0全透明~1不透明)

解决ie8兼容性问题

filter:alpha(opacity=0~100);
0   完全透明
100 完全不透明
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 有些东西我们经常用,但是我们却并不了解它的原理,所以一旦换了场景,好多东西就不知道该怎么用了。最近一直很纠结ver...
    朱小维阅读 5,036评论 8 34
  • 1,基本属性 (1),px和% px是固定的像素值,正值向上升高,负值向下降低,可以理解为xy坐标系中的y坐标,正...
    Bennt阅读 4,161评论 0 3
  • 一,HTML有N多标签,根据显示的类型,主要可以分为3大类 1,块级标签 独占一行的标签 能随时设置宽度和高度(比...
    张不二01阅读 760评论 0 4
  • 基本框 CSS假定每个元素都会生成一个或多个矩形框,这称为元素框。各元素框中心有一个内容区(content are...
    exialym阅读 825评论 0 2
  • 1.块级元素和行内元素 块级(block-level)元素;行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 2,065评论 1 4