移动端使用rem.js,解决rem.js 行内元素占位问题
2019-08-14 09:42:08来源:博客园 阅读 ()
父级元素:
letter-spacing: -0.5em;font-size: 0;
子级元素:
letter-spacing: normal; display: inline-block; vertical-align: top;
即可解决。
问题剖析:
以input元素为例子:因为input元素是行内块元素,所以它所在的行会形成一个行框。然后行框的高度是和line-height属性相关的,line-height的说明如下:
On a block container element whose content is composed of inline-level elements, 'line-height' specifies the minimal height of line boxes within the element. The minimum height consists of a minimum height above the baseline and a minimum depth below it, exactly as if each line box starts with a zero-width inline box with the element's font and line height properties. We call that imaginary box a "strut."
line-height定义的是行的最小高度,当行内包含行内元素的时候,每个行内元素会生成一个行内框,然后行内元素根据vertical-align属性对齐元素,然后取所有这些框的最高上边界和最低下边界,最高上边界和最低下边界之间的高度组成了实际的行高。
那么规范又是如何保证line-height定义的是行的最小高度的呢?
其实,参与行框形成的元素,除了这些实际存在的行内元素,还存在一个strut元素,这是一个假想的具有块元素的字号和行高的零宽元素,这个元素会参与最后实际的行高。
现在,我们来看这个问题:
你这个页面运行之后,会在html元素上添加一个font-size属性,没有具体看这个大小和什么相关,我运行代码以后的结果是font-size: 50px;,下面以font-size: 50px;来进行说明。
因为font-size属性是可以继承的,所以你的div元素的font-size也是50px;因为line-height的默认值是normal,规范推荐的normal值是字体大小的1.0到1.2之间,和浏览器实现有关,我们这里假设用的1.0;
第一个元素是p元素,是块级元素,不会生成行框,和line-height没有关系;
第二个元素是input元素,input元素是行内块元素,行内块元素生成的行内框是元素上外边界到下外边界(margin的上边界到下边界),然后strut这个假想元素生成了一个高为font-size * line-height = 50px * 1 = 50px的行内框,这两个行内框按照基线对齐的方式进行排列,然后取这两个行内框的最高上边界和最低下边界就是最后的行框。因为input元素生成的行内框远远没有50px,所以最后取得应该是strut的上边界和下边界,所以这个行框是50px,所以导致中间有"所谓"大段的空白。
综上,你可以设置div的font-size: 0px;这样假想的strut元素形成的行内框就不会高于input元素生成的行内框了。
或者设置input元素display: block;,这样input元素就是块级元素了,块级元素是不涉及行框的。
原文链接:https://www.cnblogs.com/zjz666/p/11091153.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:select下拉箭头样式重置
- CSS中的float和margin的混合使用 2020-06-11
- 使用 Apache SSI(Server Side Includes) 制作多语言版静态网 2020-06-01
- 通配符选择器 2020-05-27
- ECharts安装与使用 2020-05-26
- 使用CSS完成商城首页的优化 2020-05-05
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash