今天使用了rem来写样式,前提是要给html设置font-size:100px;这样在计算比例时相对方便点;结果在将一个span标签设置为display:inline-block;时发现span不能能和父元素div同高,然后问了大神,原来是body忘记设置font-size了。

现在,对于我来说,

  html{font-size: 100px;}
  body{font-family:"微软雅黑";font-size: 16px;}
                      这两句都是必不可少的前提啊(抹泪儿)!
 
然后我又在网上查了下这个问题的其他解决办法,大致有以下几种。
······················································(以下为转载内容)
bug:HTML里使用rem单位【html{font-size:100px;}】造成高度撑开,垂直不能顶对齐,像添加了margin-top的值;

     因为html的字体为100px,所有的默认字体就都为100px,要容下100px的字体当然就要这么高的行高。所以其实a的字体的确是22px,line-height也是22px,问题就出现了div上;
hack 1:
(1)你可以试着改一下div的行高就行,但是最一劳永逸的方法其实是将body的font-size设为16px,这样你的rem可以接着用而且字体的默认大小还是16px

(2)垂直对齐的话,添加line-height属性;给你的盒子添加line-height='100px'

链接地址:https://zhidao.baidu.com/question/585309444029037085.html

hack 2:

(1)div设置高度并采用相对定位,span采用绝对定位。

(2)div设置高度,span等内联元素设置vertical-align为top。

链接地址:https://www.cnblogs.com/hdwang/p/9833113.html

html根标签设置font-size为100px,使用rem,body没设置字体大小的更多相关文章

  1. XE6 c++builder 设置 font size GetPropInfo SetOrdProp

    PPropInfo ppi; PTypeInfo pti; TTypeKinds ttk; TRttiContext context; TRttiType *rttiType TObject* obj ...

  2. GetPropInfo Font Size

    设置font size,遍历所有控件,有的控件没有font属性,所以要用GetPropInfo判断 if (GetPropInfo(cmp, "font")) function G ...

  3. asp.net中label控件设置字体大小

    //后台修改label控件字体 protected void Button1_Click(object sender, EventArgs e) {   this.Label1.Font.Size = ...

  4. 安卓下设置系统字体大小影响H5页面布局

    问题描述: 调整好的h5页面,放在安卓app内嵌页面后布局正常,后来用户调整系统里面字体大小,后内嵌H5布局乱掉 问题分析: 因为用户调整了系统字体的大小,修改了根节点和body节点的font-siz ...

  5. Android Studio 主题、字体大小的设置

    1. Android Studio 主题的设置: 设置Android Studio 自带的主题 设置第三方主题 2. Android Studio 字体的设置 设置左面包名的字体大小 设置右面代码编辑 ...

  6. PowerDesinger15设置字体大小

    使用PowerDesigner时,它默认table的字体大小颜色等很难看: 假设通过 Symbol ---> Format进行设置.仅仅能对选中的最改动,新建的Table无效. 能够通过例如以下 ...

  7. rem根据网页的根元素(html)来设置字体大小

    rem根据网页的根元素来设置字体大小,和em(font size of the element)的区别是,em是根据其父元素的字体大小来设置,而rem是根据网页的跟元素(html)来设置字体大小

  8. hiho #1288 微软2016.4校招笔试题 Font Size

    #1288 : Font Size 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 Steven loves reading book on his phone. The ...

  9. LaTeX :font size 修改字体大小的几种方式

    调整字体大小的几种方式,大小依次增大,具体如下: \tiny \scriptsize \footnotesize \small \normalsize \large \Large \LARGE \hu ...

  10. unity UGUI text font size对性能影响较大

    Font Size对ugui text的性能影响非常大. <Cube Duck Run>在itouch5上测试是很流畅的,但是在iphone5上测试,在game over后显示历史最高分时 ...

随机推荐

  1. hadoop HA集群的安装

    1.hadoop集群规化 ip 主机名 安装软件 角色 运行进程 10.124.147.22 hadoop1 jdk.zookeeper.hadoop namenode/zookeeper/jobhi ...

  2. 【leetcode】974. Subarray Sums Divisible by K

    题目如下: Given an array A of integers, return the number of (contiguous, non-empty) subarrays that have ...

  3. 处理post上传的文件;并返回路径

    /** * 处理post上传的文件:并返回路径 * @param string $path 字符串 保存文件路径示例: /Upload/image/ * @param string $format 文 ...

  4. [NOIP模拟测试37]反思+题解

    一定要分析清楚复杂度再打!!!窝再也不要花2h20min用暴力对拍暴力啦!!! 雨露均沾(滑稽),尽量避免孤注一掷.先把暴力分拿全再回来刚正解. 即使剩下的时间不多了也优先考虑认真读题+打暴力而非乱搞 ...

  5. 埋坑一: vue中子组件调用兄弟组件方法

    小计: 开发中遇到子组件需要调用兄弟组件中的方法,如下写个小demo记录下心得,如果你有好的方法,请到评论区域指教 父组件示例代码: 组件功能解析: 通过$emit获取子组件事件,通过$ref调用子组 ...

  6. 前端每日实战:81# 视频演示如何用纯 CSS 创作一个变色旋转动画

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ejZWKL 可交互视频 此视频是可 ...

  7. ASP.NET Core学习——7

    多环境ASP.NET Core介绍了支持在多种环境中管理应用程序行为的改进,如开发(devlopment),预演(staging)和生成(production).环境变量用来指示应用程序正在运行的环境 ...

  8. Oracle 表空间详解

    目录 目录 表空间概述 表空间的分类 默认表空间 查看默认的永久表空间 查看默认的TEMP表空间 查看默认的表空间类型 逻辑结构到物理结构的映射 对表空间的操作 查看表空间使用情况 查看数据库拥有的表 ...

  9. Newline required at end of file but not found

    在启动vue项目中遇到 解决方法 在main.js文件的最后一行加一个空行就可以了

  10. upc组队赛5 Bulbs

    Bulbs 题目描述 Greg has an m × n grid of Sweet Lightbulbs of Pure Coolness he would like to turn on. Ini ...