css的问题

老师这里的text不是span元素吗，不可以设置宽高的呀，为什么视频里面设置了还生效了

源自：实战：Vue webapp首页开发 1-3 Navbar 组件--完善

收起

2回答

好帮手慕码回答被采纳获得+3积分 2019-05-09 18:09:59

同学你好！
这边重新想了想，表述不是很严谨，block却有inline-block效果这里可能会误导同学、

举个例子：

这里div设置浮动，那么可以就不独占一行了，但是他还是块级元素啊

这个道理是一样的，同学试着理解一下~

祝学习愉快，欢迎采纳 ~

qq_那些荒废流年提问者 #1

可以这么总结吗老师作为flex布局的子元素的话，无论其是行内或块级元素，其display都会被设置为block，但由于flex布局的特殊性，又使其呈现出了inline-block的性质。如果这句话没有问题的话，我就拿小本本记下了

2019-05-09 18:25:10
好帮手慕码回复提问者 qq_那些荒废流年 #2

同学你好！是可以这样理解的哦~ 祝学习愉快，望采纳！

2019-05-09 18:28:18
qq_那些荒废流年提问者回复好帮手慕码 #3

好不胜感激谢谢老师

2019-05-09 18:33:58

好帮手慕码 2019-05-09 11:08:55

同学你好！

span宽度生效的原因是：&-title这里设置了flex

&-title这里设置了flex,那么span的display属性会表示为block;

这时span设置宽度100%，span就会靠其中的内容撑开父级&-title的宽度。

举个例子：

同学试着理解一下~

如果帮助到了你欢迎采纳祝学习愉快~

提问者 qq_那些荒废流年 #1

老师能解释一下为什么吗或者有相关原理方面介绍的博客的链接吗我想知道原理

2019-05-09 11:17:41
提问者 qq_那些荒废流年 #2

老师我自己试了一下发现虽然浏览器显示的是block但是多个span还是可以排在一行，可以理解为不论其子元素是块级或行内元素，都将他们变成了inline-block 对吗

2019-05-09 13:27:03
好帮手慕码回复提问者 qq_那些荒废流年 #3

同学你好！可以这么理解，这里的span属性为block，是因为父级的flex让他们呈现了inline-block 从而并排显示. 如果帮助到了你欢迎采纳祝学习愉快~

2019-05-09 13:37:03