第十一章 img特征 vertical-align cursor opactiy

原创 2017年10月07日 16:12:14

img特征

  1. 支持宽高
  2. 支持margin
  3. 支持横排展示
  4. 支持text-align(水平居中 在父级元素中设置 作用到子集)
  5. 支持vertival-align(垂直方向居中 设置给本身 作用自己)

vertical-align:垂直方向对其

定义行内元素的基线 相对与该元素所在行的基线的垂直对齐
inline inline-block img才具有 块级元素没有

vertical-align的值:
 1. top 元素的顶端与行中最高元素的顶端对齐
 2. middle 此元素放置在对应元素中部
 3. bottom 元素的底端与行中最低元素的底端对齐
 总结:以上的值与line-height相关
 1. text-top 元素的顶端与父元素字体的顶端对齐
 2. text-bottom 把元素的底端与度元素字体的底端对齐
 3. baseline 默认元素放置在父元素的基线上
 总结:以上的值与font-size相关

注意:

  1. 加上vertical-align的同排元素都要加上verticla-align
  2. vertical-align 可以解决img 下方间隙问题

cursor

指针样式(规定鼠标进入元素内容区域要显示的光标类型)
值:
  1. default
  2. auto
  3. pointer
  4. move
  5. text
  6. wait
  7. help

    引入外部指针样式
    cursor:url(hand.cur) pointer
    第一个值:url定义指定问价路径 此文件以cur为扩展名
    第二个值:当第一个值出现错误时的备用类型


opacity 透明度

  1. 标准 不透明度:opacity:0~1 0完全透明 1完全不透明
  2. IE滤镜(兼容ie下不支持opacity的版本)
    filter:alpha(opacity=0~100); 0完全透明 100 完全不透明
    两者成倍数关系
版权声明:本文为博主原创文章,未经博主允许不得转载。

第11章-img特征,vertical-align,cursor,opacity

1.img特征2.vertical-align垂直对齐方式 与text-align对比3.cursor指针样式 default auto pointer mo...
  • dairenwu
  • dairenwu
  • 2017年09月22日 21:36
  • 127

vertical-align:middle使img标签图片居中的办法

vertical-align:mddle
  • Ink_cherry
  • Ink_cherry
  • 2017年04月09日 11:24
  • 2563

img 'vertical-align:middle;'

img{ vertical-align:middle; }意为设置图片与其它同级行内元素middle对齐例子如下: Document img{...
  • zhoujingying22
  • zhoujingying22
  • 2016年06月06日 00:59
  • 180

div中的图片居中对齐 or vertical-align:middle 属性设置无效

vertical-align 只对行内元素有效,对块级元素无效。 这就是为什么有些人使用vertical-align属性无效的原因。 但是我们可以使用display 属性,设置其值为 table-ce...
  • xuanjiewu
  • xuanjiewu
  • 2016年06月29日 11:37
  • 5069

vertical-align:middle 失效解决方法

学姐给我布置作业叫我实现内联元素的垂直居中,我以为很简单,于是找到了vertical-align:middle          给div设置高度后 我对#test设置vertic...
  • h_qingyi
  • h_qingyi
  • 2016年12月01日 17:30
  • 5930

CSS vertical-align属性的用法

这两天写个页面css的时候用到了vertical-align属性,使用过程中踩到了坑,所以总结如下: vertical-align的定义 W3C上对vertical-align的定义:vertic...
  • u011263845
  • u011263845
  • 2015年07月12日 16:26
  • 1253

css里img图片vertical-align属性

img图片属性 vertical-align用来设置垂直对齐方式,所有垂直对齐的元素都会影响行高   值: baseline | sub | super | top | text-top | mi...
  • milli236
  • milli236
  • 2017年12月29日 14:16
  • 167

深入理解 vertical-align

关于vertical-align属性的值 inherit: 继承 线类: 可选baseline (默认属性值),top,middle,bottom 文本类: text-top,text-bottom ...
  • u012062760
  • u012062760
  • 2016年11月01日 19:51
  • 1847

从零开始前端学习[23]:img标签的属性和水平对齐的属性vertical-align

img标签的属性和垂直属性vertical-align img标签的特征 vertical-align垂直对齐的属性 提示: 博主:章飞_906285288 博客地址:http://bl...
  • qq_29924041
  • qq_29924041
  • 2017年09月25日 21:14
  • 411

简单说 CSS的vertical-align (一)

说明vertical-align属性,是CSS属性中一个比较重要的属性,也是比较不好理解的一个。 我们今天就来说说它。 解释先来看看他的定义。 定义和用法 vertical-ali...
  • FE_dev
  • FE_dev
  • 2017年08月02日 20:43
  • 689
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:第十一章 img特征 vertical-align cursor opactiy
举报原因:
原因补充:

(最多只允许输入30个字)