第十一章 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 完全不透明
    两者成倍数关系
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

css vertical-align属性基础介绍

按照W3C的定义,当内联元素的vertical-align设置为:baseline,top,bottom的时候,都是该元素的baseline(或middle,top,bottom)对其周围元素的相同位...
  • cwzhsi
  • cwzhsi
  • 2015年03月15日 19:26
  • 543

学习笔记之 vertical-align

vertical-align: 值:baseline | sub | super | top | text-top | middle |bottom | text-bottom | | | in...

关于vertical-align的一点心得

vertical-align的一些心得

我对CSS vertical-align的一些理解与认识(一)

我对CSS vertical-align的一些理解与认识(一) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.z...

css之vertical-align的理解与认识

一. 简介 1. vertical-align 数值,比如 -2, 相比于基线向下便宜2px,一般用来修复单选框/复选框和12像素文字大小不对齐的问题. 2. 百分比 此标签继承的line-hei...

垂直对齐:vertical-align属性(转)

http://www.cnblogs.com/rixinren2010/archive/2012/03/10/2389301.html 行高与单行纯文字的垂直居中,而如果行内含有图片和文字,...
  • dl429
  • dl429
  • 2015年02月04日 15:38
  • 324

基于vertical-align的表单元素垂直对齐方式研究

当前位置:博客 > 前端表现 > 基于vertical-align的表单元素垂直对齐方式研究 基于vertical-align的表单元素垂直对齐方式研究 By Henry @ 20...

CSS line-hight ,vertical-align,父元素高度以及行框,行内框的关系

参考文章:我对CSS vertical-align的一些理解与认识(一)                     css行高line-height的一些深入理解及应用                 ...

深入理解vertical-align

vertical-align 属性设置元素的垂直对齐方式,通过查阅文档和翻阅他们博客总结下基本的用法...

vertical-align && line-height

vertical-align && line-height 1. vertical-align: 百分比, 可以体现出上面的两个属性之间是有很大的关联的。 2. vertical-alig...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:第十一章 img特征 vertical-align cursor opactiy
举报原因:
原因补充:

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