我有个问题

我有个问题

a标签不是行内标签吗?

为什么可以直接在里面写img?

正在回答 回答被采纳积分+1

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

2回答
好帮手慕张 2021-02-18 16:32:24

同学你好,同学的理解不是完全正确的,a标签是行内元素,行内元素宽度由内容撑开,

http://img1.sycdn.imooc.com//climg/602e25eb09bf06a904670442.jpg

但高度height只与其font-size与font-family有关,是由内容撑开的

http://img1.sycdn.imooc.com//climg/602e2611091a2d3b12620341.jpg

祝学习愉快!

好帮手慕张 2021-02-18 14:23:52

同学你好,a标签是行内元素,一般不建议行内元素嵌套块元素使用。但是因为这里的图片是超链接可以点击的,所以使用a标签嵌套能达到可以点击跳转的效果一般是可以这样使用的。

祝学习愉快!

  • 提问者 xiao白做大事 #1

    这样用a嵌套img便签,是不是可以这样理解: 

    img便签撑起来了a标签。a标签的宽和高就等于内部img 的宽和高

    2021-02-18 14:34:19
  •     ​    ​    ​    ​    ​<li class="pro-grid">

                            <a href="">

                                <div class="pic-box">

                                    <span>机票</span>

                                    <img src="image/jjzyx06.png" alt="">

                                </div>

                                <div class="word-box">

                                    [赠自由行礼包] 上海/杭州/南京/合肥/宁波/徐州直飞日本东京/大阪…

                                </div>

                            </a>

                        </li>

                        <li class="more-grid">

                            <a href="">

                                <div class="pt">

                                    <p>查看更多</p>

                                    <P>机酒自由行产品</P>

                                </div>

                                <span class="iconfont">&#xe619;</span>

                                <ul>

                                    <li>机票</li>

                                    <li>酒店</li>

                                    <li>机+酒</li>

                                    <li>邮轮</li>

                                </ul>

                            </a>

                        </li>

    这里a标签嵌套了所学的标签,嵌套了块级元素啊!很蒙


    2021-02-20 07:41:25
  • 同学你好,行内元素一般是不建议嵌套块元素使用的,但是a标签有些特殊,它是超链接可以点击,因此好多时候需要点击的元素都用a标签嵌套使用,同学只需要记住这个特殊用法即可。

    祝学习愉快!

    2021-02-20 11:24:51
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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