仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 963|回复: 8
打印 上一主题 下一主题

[DIV+CSS] 来谈谈:CSS教程:vertical-align的值

[复制链接]
小妖女 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 00:04:59 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
这工具比表格好的唯一就是你可以定义一个ID,想怎么玩它就怎么玩他,表格用来处理显示数据,DIV+CSS+TABLE就行了,都什么年代了,以前没有DIV,而且386的年代不也一样,现在都奔腾4了
比来几天细心研讨了一下vertical-align这个属性,了局让我年夜吃一惊,这个很“资深”的CSS尺度居然在各个扫瞄器内里的体现都各不不异。
vertical-align的值有点多,包含baselinesubsuppertoptext-topbottomtext-bottommiddle和各类长度值(%,em,ex等等)。我先给人人看一个我以为最夸大的值:bottom。代码以下:
p{
font-size:18px;
line-height:36px;
font-family:Tahoma,sans-serif;
}
img{
vertical-align:bottom;
}
然后人人看一看这段CSS在各个扫瞄器中的效果(图片是我存心做成谁人模样,为了能够看分明绝对地位):















呃,这个了局实在很让人匪夷所思,一样平常我会以为Firefox会比IE注释得改正确,可是看过Opera以后发明它和IE是一样的,而Safari/Win是站在Firefox何处。说假话,我不晓得这是怎样回事。
细心进修了《CSS威望指南(第二版)》,乃至还往查阅了W3C,然后本人做出一个关于vertical-align的图:



依照W3C的界说,当内联元素的vertical-align设置为:


  • baseline,top,bottom的时分,都是该元素的baseline(或middle,top,bottom)对其四周元素的不异地位,如图片的top和四周笔墨的top对齐。
  • text-top和text-bottom的时分,是该元素的top(或bottom)对齐四周元素的text-top(或text-bottom)。
  • 长度(%,em,ex)的时分,是基于baseline往上挪动,以是负数往上,正数往下。
  • middle的时分,是该元素的中央对齐四周元素的中央。这里“中央”的界说是:图片固然就是height的一半的地位,而笔墨应当是基于baseline往上挪动0.5ex,亦即小写字母“x”的正中央。可是良多扫瞄器常常把ex这个单元界说为0.5em,以致于实在纷歧定是x的正中央(以上图为例,x的高度应当是10px,而em是18px,以是两个值纷歧样)。
可是,即便是依照下面的原则,各个扫瞄器的注释云云悬殊也让我匪夷所思。我也懒得往研讨为何是如许子。总的来讲呢,应当就是它们对字体的每条线的地位的界说都不年夜一样,以是这个成绩不但跟vertical-align有关,而跟扫瞄器对内联文本和内联图片的布局的注释有很年夜干系。
最初给人人一个测试页面,能够方面的看看各个扫瞄器对vertical-align分歧值的注释了局。
http://www.mikkolee.com/weblab/001_vertical/
人人能够测试一下其他的值,好比middle或是text-top,也是各个扫瞄器完整纷歧样。有甚么心得人人来会商一下吧~~

有了CSS,我们不再需要用FONT标签或者透明的1pxGIF图片来控制标题,改变字体颜色,字体样式等等
不帅 该用户已被删除
沙发
发表于 2015-1-18 05:03:27 | 只看该作者
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。
山那边是海 该用户已被删除
板凳
发表于 2015-1-21 20:00:30 | 只看该作者
运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环
飘灵儿 该用户已被删除
地板
发表于 2015-1-30 22:15:40 | 只看该作者
俗话说:兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中,我们难免会遇到各种各样的问题。
变相怪杰 该用户已被删除
5#
发表于 2015-2-6 16:19:47 | 只看该作者
所见则所得网页编辑器的优点就是直观性,使用方便,容易上手.
若相依 该用户已被删除
6#
发表于 2015-2-17 07:34:26 | 只看该作者
所见则所得网页编辑器的优点就是直观性,使用方便,容易上手.
第二个灵魂 该用户已被删除
7#
发表于 2015-3-5 17:23:02 | 只看该作者
Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。
爱飞 该用户已被删除
8#
发表于 2015-3-12 11:44:57 | 只看该作者
布局表格、绘制层、制作CSS样式表等,这些内容迷糊了我的视线,真是没想到制作一个精巧别致的网页是如此的困难,可是心有不甘。
愤怒的大鸟 该用户已被删除
9#
发表于 2015-3-19 22:03:27 | 只看该作者
还是在Dreamweaver所见即所得添加链接是,可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-12-23 21:51

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表