LCUI
简体中文
简体中文
  • 开始
  • 基础
    • 安装
    • 介绍
    • 约定
    • XML
    • CSS
    • 架构
  • 实例
    • 主循环
    • 工作线程
    • 定时器
    • 事件
  • 组件
    • 属性
    • 样式
    • 原型
    • 事件
    • 生命周期
    • 绘制流程
  • 性能
  • CSS
    • CSS 数据库
    • CSS 解析器
  • 布局
    • 正常流布局
    • 弹性盒子布局
  • 图形
    • 绘制简单的图形
    • 绘制复杂的图形
    • 像素操作
    • 图像文件操作
  • 字体
    • 字体数据库
    • 字体渲染引擎
    • 文本排版与渲染
  • 驱动
    • 事件循环
    • 视频
    • 鼠标
    • 键盘
    • 触控
  • 输入法
由 GitBook 提供支持
在本页
  1. 布局

正常流布局

上一页布局下一页弹性盒子布局

最后更新于4年前

正常流布局的规则是将组件从左到右放置,当一行的空间被占满后则会换到下一行继续放置剩下的组件。默认情况下,一个块级组件的宽度是其父组件的100%,其高度与其内容高度一致,而内联块级组件的宽高则与内容一致。

与网页布局的差异:

  • 没有 inline 显示方式:LCUI 的布局引擎在设计之初就没有考虑支持基于文本的布局,因为实现比较复杂,需要耗费较多的时间和精力去开发和维护,而且当时并没有复杂的文本排版需求。

  • 没有 float 属性:和 inline 一样,在布局引擎开发之初就没有将它考虑在内。

  • 没有 margin 重叠特性:如果相邻的组件都设置了 margin,那么它们的距离是两者 margin 之和,而不是取最大的一个。

test/test_block_layout.c 展示了常见布局的实现方法,效果与下面的在线示例一致,你也可以编译并运行它来体验实际效果。