.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,反而变小了,这是什么引起的呢?
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回答
-
1、如果字体大小一样,.在.trans-content中设置font-size后,trans-data span.trans-money 里面不用再单独设置,会继承。下面图片的排版貌似是因为上面的.transaction没有清除浮动导致的。
2、上下间距应该是继承 body 里面的 line-height: 1.5 造成的。
022016-08-03
相似问题