有几个问题,老师?

有几个问题,老师?

  1. 关于基线的理解:

    http://img1.sycdn.imooc.com//climg/5c6234f60001e63c06210126.jpg

    这句话怎么理解呢?老师?不同元素的基线不应该是相同的吗?基线不是X字母对应的那个字母呢?能不能举个例子?

2.我写了一个例子老师?给span标签设置了垂直:bottom,可是为什么XXXXX仍然是和基线对齐呢?

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta charset="utf-8">

<style type="text/css">

div{background-color: red; /*width: 400px;*//*line-height: 400px;*/}

        img{}

        .one{background-color: yellow;vertical-align: bottom;}

        .two{background-color: blue;vertical-align: bottom;}

</style>

</head>

<body>

    <div>我们是<img src="shiyan.jpg"><span class="one">XXXXX</span><span class="two">XXXXXyyyyyy</span></div>

</body>

</html>

图片如下:http://img1.sycdn.imooc.com//climg/5c6236cf0001635701500150.jpg

正在回答

登陆购买课程后可参与讨论,去登陆

2回答

同学你好,定义了vertical-align:bottom这个样式之后,改变的是元素对于基线的对齐方式,而不是改变了元素的基线。

如果没有给img设置对齐方式,它还是根据x的底部对齐的。

这个属性只作为了解就可以了哦。

  • shine62 提问者 #1
    好的,谢谢老师!
    2019-02-16 12:48:05
山河远阔ZZ 2019-02-12 11:55:14

同学你好,

1、可以参考下面的四线三格的例子,如下:

http://img1.sycdn.imooc.com//climg/5c624305000186b502750057.jpg

  • 小写的x和小写的y的基线不同,x的基线是它的底部,而y的基线是中间。

2、想要改变基线,需要把div里面所有的带标签的内容都添加上vertical-align:bottom,这样效果就能实现,参考下图:

http://img1.sycdn.imooc.com//climg/5c6241ba000175d404310327.jpg

效果图:

http://img1.sycdn.imooc.com//climg/5c6241c80001422e04940167.jpg

可以测试一下,如果帮助到了你,欢迎采纳。

祝学习愉快!

  • 提问者 shine62 #1
    当我给图片,文字分别设置了vertical-align:bottom.该行的基线是不是就下移了?还是说此时文字和图片是和底线对齐的呢?老师? 我明白了,是不是如果我没有给img设置垂直底部对齐方式时,它的对齐方式仍然是和X的底部对齐的,所以和底部是有缝隙的?
    2019-02-14 14:14:44
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师