高校网站站群建设公司,简约大方的网站,潍坊网站设计制作,自建网站 备案1. vertical-align一大堆乱七八糟的属性
有句俗语叫做“见多不怪”#xff0c;我估摸着这些top,bottom属性大家都见过#xff0c;没啥看头#xff0c;没啥说头。老实讲#xff0c;我看到这些养臭虫的属性也头疼#xff0c;所以#xff0c;忘了他们#xff0c;我们说点有…1. vertical-align一大堆乱七八糟的属性
有句俗语叫做“见多不怪”我估摸着这些top,bottom属性大家都见过没啥看头没啥说头。老实讲我看到这些养臭虫的属性也头疼所以忘了他们我们说点有意思的。vertical-align属性与数值。见下面的表 1.1 首先关于数值 我的理解为元素相对于基线向下偏移两像素这个常常用来修复单选框/复选框与12像素文字大小不对齐的问题。这个没有什么好说的
1.2 再者关于百分数值
百分值与数值以我的眼光看去代表了不同的思想以及心态。前者代表着灵活自由与开放后者有严谨精确安稳之意。CSS中支持百分值的属性还不少例如width/height,line-height,font-size,这里的vertical-align属性也是其一。提到百分值必然牵扯到相对于那个属性或值例如宽度百分比都是相对于父块状元素的宽度值的font-size的百分值是相对于向外的第一含有font-size属性的层的font-size大小而言的而这里的vertical-align是相对于此标签继承的line-height值决定的。例如如下示例代码 假设这里的.test的标签继承的行高是20px则这里的vertical-align:-10%所代表的实际值是-10% * 20 2(像素)
1.3 最后关于其他属性像是bottommiddle等 2. 为什么我的vertical-align属性不起作用
知道了vertical-align是垂直对齐的意思不少经验尚浅的同行会试着使用这个属性实现一些垂直方向上的对齐效果会发现有时候可以有时候又不起作用不知道为什么不急慢慢来
我们知道display也有很多属性值其中以inline/inline-block/block三个最常见这代表了页面上三种不同水平的元素。我常常会以液态/固液混合态/固态加以形象化思考对应于现实中的事物就是牛奶/果冻/坚果
我们都知道每个人都有不同的嗜好有的人喜欢吃甜食有的人喜欢吃辣的东西有的人不喜欢吃芹菜有的人不喜欢吃羊肉等等。CSS中的有些元素也是这样他们有的只对牛奶感兴趣有的只喜欢吃坚果和果冻而讨厌牛奶。而vertical-align呢是个比较挑食的家伙它只喜欢吃果冻从小吃果冻长大没有了果冻它就会闹脾气对你不理不睬。我称之为“果冻依赖型元素”又称之为“inline-block依赖型元素”也就是说只有一个元素属于inline或是inline-blocktable-cell也可以理解为inline-block水平水平其身上的vertical-align属性才会起作用。所以类似下面的代码就不会起作用 所谓inline-block水平的元素就是既可以“吸”又可以“咬”的元素既可以与inline水平元素混排又能设置高宽属性的元素。哪些元素呢例如图片按钮单复选框单行/多行文本框等HTML控件只有这些元素默认情况下会对vertical-align属性起作用
虽然vertical-align属性只会在inline-block水平的元素上期作用但是其影响到的元素涉及到inline属性的元素这里千万记住inline水平元素受vertical-align属性而位置改变等不是因为其对vertical-align属性敏感或起作用而是受制于整个line box的变化而不得不变化的这个后面会较为深入的分析
3. vertical-align属性是如何起作用的
这里我使用vertical-align:middle属性作为例子讲讲我对vertical-align是如何起作用的理解
★ 一些简单的例子
这里先列举几个简单的例子方便对vertical-align:middle有了初步的直观的认识。例子内容如下创建一个inline-block属性的元素此元素的高度和宽度均为4像素为了对比效果明显我使用黑白二色背景黑色4像素*4像素的元素为白色vertical-align属性依次为middlebottom和text-bottom当然文字是必须的否则何见对齐呢整个实例的HTML代码都是一致的唯一不同的就是一段vertical-align属性测试环境均是Firefox3.6浏览器HTML代码如下 3.1 默认属性也就是baseline 3.2 bottom 这里将要对齐的元素(小方块)的底端和line boxes(span元素的内容所组成的)的底端对齐
3.3 text-bottom 对比vertical-align:bottom和vertical-align:text-bottom他们的表现似乎一样实际上呢这里的表现一致只是一个巧合而已此话怎讲要显示其差异很简单添加一个line-height值您就会看到不一样的地方了
3.4 line-height:10px vertical-align:bottom 设置行高line-height后小方块在具备行高的条件下也要保持和父容器的底部对齐所以小方块被上移
3.5 line-height:10px vertical-align:text-bottom 可以看到vertical-align:text-bottom属性的那个小方点的位置没有随着line-height的改变而改变还是与文字的底部对齐。如果您细看关于text-bottom以及bottom属性的定义您可以找到其表现的原因text-bottom是与父标签的文字底部对齐在这里也就是后面的“我是一个卡哇伊的文字”这段文字对齐而bottom是相对于父标签的底部对齐而如果您熟悉line box模型且对高度的本质有所了解那么您就会明白为什么line-height会改变标签的bottom的位置了。这点的了解有助于理解下面vertical-align:middle生效的过程及原理
3.6 middle 因为middle是所要对齐的小方块的中垂点和父元素的底部基线向上移动1/2个字母X的位置所对齐
★ 一些复杂的例子
如果说上面的例子只是热身的话那么现在就要开始进入实战了。在这里的实例中我们添加一个新的元素就是图片我们通过观察不同属性下图片的样式表现来理解vertical-align:middle等相关属性是怎么一回事是怎样产生页面表现的
我们发现修改图片vertical-align:middle属性为其他的属性的时候例如top或是bottom的时候您会发现图片位置上移或是下移了但是文字在那里却纹丝不动显然vertical-align的本质上是个独立的个体与后面的line水平的元素是不存在直接的关系的。两者没有必然的联系这是一个需要认识清楚的重要的东西也就是其中一个元素的vertical-align属性的改变并不会影响另一个元素 总结
1. vertical-align只对inline或者inline-block属性的元素起作用对block属性的元素是不起作用的这也是有时候为什么vertical-align会失效的原因
2. vertical-align:text-bottom是指将要对齐的元素和父元素的内容底部进行对齐
3. vertical-align:bottom是指将要对齐的元素和父元素的相对底部进行对齐而不是相对父元素的内容底部进行对齐
4. 任何一个元素的vertical-align属性的表现形式都只和其父元素有关系而和其余元素是没有任何关系的我们通常遇见的和垂直居中对齐都是假象
