代码理解问题

代码理解问题

display 属性:inline 和 inline-block 有什么区别呢?

正在回答

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

1回答

1. display:inline (理解将元素转成行内元素)

> inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。

> inline元素设置width,height属性无效。

> inline元素的margin和padding属性,水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果;但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

2. display:inline-block

简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。比如我们给a元素设置inline-block属性,使其既具有block的宽度高度特性又具有inline的同行特性。

希望对你有帮助,祝学习愉快,欢迎采纳。


  • 海内存知己v 提问者 #1
    那请问是否可以理解成"display:inline-block;"与“display:block; float:left;”等价呢?
    2017-02-10 18:12:43
  • 小于飞飞 回复 提问者 海内存知己v #2
    display:inline-block; 准确的说类块级元素的状态,行内显示方式,但是你说的“"display:inline-block;"与“display:block; float:left;”表现上还是有些区别。display:inline-block排版,而行内元素,默认按文字底部对齐(两个块元素的上下对齐不是从顶部开始,而是包含内容的文字底部对齐)。而 float排版可以对齐块元素。
    2017-02-11 23:18:30
  • 海内存知己v 提问者 #3
    非常感谢!
    2017-02-12 15:01:22
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星

相似问题

登录后可查看更多问答,登录/注册

请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

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