首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

CSS - display:(inline | block)和display:box之间的区别?

CSS display:(inline | block)和display:box之间的区别如下:

display:(inline | block)

  1. display:inline
  • 行内元素,如<a><b><i><u><h1><h6><p><div><span><img><input><button>等。
  • 不允许更改元素在文档中的布局。元素按照文档流排列,不可对其应用宽度、高度、行高以及浮动等属性。
  • 继承父元素的字体和字符属性(如font-sizefont-familytext-decoration等)。
  • 可以使用<span><i>标签对文本进行样式修饰。
  1. display:block
  • 块级元素,如<p><div><h1><h6><ul><ol><li>等。
  • 默认宽度为100%。可以通过width或者padding等属性进行设置。
  • 在默认情况下,块级元素在垂直方向上堆叠,可以通过float或者position(尤其是absoluterelative)进行水平布局。
  • 可以使用<div><p><h1><h6>等标签进行页面布局。

display:box

  • display:box 是 CSS Flexbox 布局体系的一部分,用于创建灵活和响应式的布局。
  • 它可以轻松地创建自适应的盒装布局,从而让内容在父容器中沿水平方向排列。
  • display:boxdisplay:flex 相当类似,但针对旧版本的浏览器可能需要进行前缀,如display: -webkit-box

总结来说,这三种显示模式都有各自的应用场景和优劣。选择适当的显示模式取决于项目需求和兼容性要求。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券