1. 行内元素
行内元素或者说内联元素,指的是在一行内出现的元素。比如,,等;与行内元素对应的是块状元素,指的是独占一行的元素,比如 ,, 页面排版是有规则的,默认是自上而下,自左而右。凡是在这个规则之下的元素都是在文档流里的。就相当于电影院里座位安排也是按照一定的顺序来的。但是肯定有特殊情况,比如哪个富二代,哪个官二代要个专属的位子,敢不给吗。所以在页面布局里也有脱离文档流的情况,就是接下来说的三个属性。 2.1 positon:absolute 2.2 position:fixed 2.3 float 关于以上属性的详细用法,同样在这里不做赘述,请自行百度。只要设置了这些属性的无素,就可以脱离原有的布局规则,按新的规则来寻找位置。 通过上面说的几个概念,元素的位置就可以敲定了。在文档流内的就是自上而下,自左而右依序而定。脱离文档流的不在本文讨论范畴。 1. 高度 块状元素,前面说了它的占用大小是根据包装盒的大小决定的,也就是属性设置好的宽和高来的。而行内元素,本身是不具备宽高属性的,它的高度是根据元素本身的大小来定的,比如字体大小,比如内边距。。。 2. 对齐 铺垫了这么长终于要说到重点了。本文要讨论的主要是行内元素的高度对齐。因为块状元素的宽和高都是固定的,没啥争议。而左右对齐也就是靠左或靠右。只有行内元素在垂直对齐跟想像的可能有点出入。 2.1 行内元素是默认对齐顶部吗 可以说是,也可以说不是。因为行内元素简单来说也是按照自上而下自左而右排列的。但是呢,随便找一段文字都看得出来,文字的顶部是留有空隙的,每一行文字之间也是有空隙的。相对父元素,它是顶部对齐;相对内部文字,它是基线对齐。 2.2 文字的位置由什么决定 明确的说,文字的位置由三个元素决定,分别是字号,行高,基线。 2.21 字号 字号越大,文字占的高度越大 2.22 行高 块状元素的行高就是高度,但是文字不一样,文字是不占满整个容器高度的,记得小学时用的作业本吧,四线三格。整个书写行高度用四条线分成三份,行高指的是最顶到最底。 2.23 基线 上面说到的行高分成三份,有些文字只用中间一份,比如x,a,c这些字母,有些占上面两份,比如b,q;有些就占下面两份,比如p,还有三份全占的。文字的占用规则自有其一套体系,咱们可以认为字母x占用空间的底部就是基线。同一行的行内元素默认的垂直对齐方式就是基线对齐。可以这样理解,每行内假想一个字母x,后面出现的行内元素都是默认以自身基线对齐字母x的底部,然后上下延伸,最终行内最顶点到最底点就成为了整行的行高。 3. 实例 3.1 纯文字 注意字母x底部位置 3.2 加入input 字母x与input的中心线是垂直对齐的,与input框内文字底部对齐,说明input的基线是x的底部。 3.2 令第一个input垂直对齐方式为bottom对齐 设置vertical-align: bottom;后,第一个input会寻找行内高度最大值的元素,然后底部与其对齐。 3.3 令第二个input垂直对齐方式为bottom对齐 设置vertical-align: bottom;后,第二个input会寻找行内高度最大值的元素,因为第一个input已经是底部对齐,所以两个input元素都与文字的底部对齐了。 对齐的原理是弄明白了,但是在开发中并不常用到行内元素的垂直对齐。真要涉及到对齐布局,用flex或者多套用几个p要方便的多。不过,在现有项目上如果对齐出现了问题,可以参考这篇文章,分析问题出在哪里。2. 文档流
http://img0.imgtn.bdimg.com/it/u=200851051,3718028993&fm=26&gp=0.jpg元素位置
a x c b d p f
观察高度
观察高度
ps: input的默认属性是inline-block,是具有块状元素和行内元素特性的,所以可以与行内元素在同一行,并且可以设置高度。总结
页面更新:2024-05-12
本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828
© CopyRight 2020-2024 All Rights Reserved. Powered By 71396.com 闽ICP备11008920号-4
闽公网安备35020302034903号