.trans-content中font-size设置改变时为什么会影响下边图片的展示

来源:4-6 主要内容样式1

落夜星空

2016-08-03

请问老师
   1. 当在.trans-content中设置font-size为2rem时,
      .trans-data span.trans-money中的font-size也得设置为2re吗?
      (1). 如果是为什么?
      (2). 如果不是,那为什么我把.trans-content中设置font-size为1rem,
           .trans-data span.trans-money中的font-size设置为2时,
           会影响下边的图片排版呢?下边第一张图片会往右移动?这时用调试页面查看
           显示整个.trans-data为39px,.把trans-content中设置font-size为2rem后,
           就恢复为36px,反而变小了,这是什么引起的呢?

57a1800a0001f46005000199.jpg

57a1800a000122d205000181.jpg


   2. font-size设置成1rem时因为chrome最小字号为12px会以12px作为一个rem计算,
      但为什么在调试页面中选中该文字所在的最里层包裹层时,包裹层的content层显示的高度和
      我设置的font-size的高度不一样呢?上下都增加了一些像素,测试了一下增加的像素为所
      设置的font-size的一半,在font-size<12px时默认增加的是12px/2=6px,
      (1). 是这样的吗?
      (2). 那在计算该文字所占高度时需要加上吗?
           还是不需要考虑只要将这一行中的所有元素都设成相同的行高来解决就可以了?
           就像.trans-data span的line-height: 3rem;和
           .trans-report a的line-height: 3rem;一样

以下是老师代码:

.trans-content {
   max-width: 90%;
   margin: 0 auto;
   font-size: 2rem;                            <<——在这里
}

.trans-data {
   float: left;
   padding: 1rem;
   text-align: left;
}

.trans-data span {
   display: inline-block;
   line-height: 3rem;
   color: #fff;
}

.trans-data span.trans-money {
   font-size: 2rem;                          <<——在这里
   color: #ff9900;
   letter-spacing: 3px;
   margin: 0 1rem;
   border-radius: 2px;
   background-color: rgba(255, 255, 255, 0.9);
   box-shadow: 1px 2px 2px #333 inset;
}

.trans-report {
   text-align: right;
}

.trans-report a {
   display: inline-block;
   padding: 1rem;
   line-height: 3rem;                   
   color: #fff;
}

写回答

1回答

姜维

2016-08-03

1、如果字体大小一样,.在.trans-content中设置font-size后,trans-data span.trans-money 里面不用再单独设置,会继承。下面图片的排版貌似是因为上面的.transaction没有清除浮动导致的。

2、上下间距应该是继承 body 里面的 line-height: 1.5 造成的。

0
2
落夜星空
非常感谢!
2016-08-03
共2条回复

响应式开发一招致胜

用一套代码开发出不受设备型号、尺寸限制的互联网金融网站

4021 学习 · 752 问题

查看课程