外观
模型 etml-box
约 756 字大约 3 分钟
2025-10-03
etml-box 是底层的基础盒子模型,布局中所有的块级元素最终都是使用该模型来渲染。
盒模型字段
contentRequiredstring
nil
元素的内容区域
displayRequiredsymbol
'inline
显示类型
inlineblock
overflow-yRequiredsymbol
默认值 'auto
设置当内容在垂直方向溢出块级元素的上下边缘时如何显示内容:
visible: 溢出内容正常显示。hidden: 溢出内容会被隐藏。auto: 允许滚动查看溢出内容。溢出时会显示滚动条,不溢出不显示滚动条(无滚动条空间)。scroll-visible: 允许滚动查看溢出内容。无论是否溢出,始终显示滚动条。scroll-hidden: 允许滚动查看溢出内容。无论是否溢出,始终不显示滚动条。scroll-auto: 允许滚动查看溢出内容。无论是否溢出,始终为预留固定的滚动条空间,但是只有溢出时才显示滚动条,不溢出时用空白填充滚动条空间。
;; 使用 face :overline 实现上边框 ;; 使用 face :underline 实现下边框
(content nil "元素的内容区域") (display 'inline "显示类型") (box-sizing 'content-box "框盒计算方式") (width 'auto "内容区域的宽度") (height 'auto "内容区域的高度") (min-width 0 "最小宽度限制") (min-height 0 "最小高度限制") (max-width nil "最大宽度限制") (max-height nil "最大高度限制") (padding-top 0 "上内边距") (padding-right 0 "右内边距") (padding-bottom 0 "下内边距") (padding-left 0 "左内边距") (margin-top 0 "上外边距") (margin-right 0 "右外边距") (margin-bottom 0 "下外边距") (margin-left 0 "左外边距") (border-top-p nil "是否设置上边框") (border-top-color nil "上边框颜色") (border-bottom-p nil "是否设置下边框") (border-bottom-color nil "下边框颜色") (border-bottom-style nil "下边框样式") (border-left-pixel 0 "左边框宽度") (border-left-color nil "左边框颜色") (border-right-pixel 0 "右边框宽度") (border-right-color nil "右边框颜色") (visibility 'visible "可见性") (z-index 'auto "堆叠顺序") (position 'static "定位方式") (y-overflow 'visible "垂直方向溢出处理") (y-scroll-bar (etml-scroll-bar) :type etml-scroll-bar "垂直方向的滚动条") (y-scroll-bar-direction 'right "垂直方向的滚动条的位置 'left or 'right") (x-overflow 'visible "水平方向溢出处理") (x-scroll-bar-color nil "滚动条颜色") (x-scroll-bar-direction right "滚动条方向") (x-scroll-bar-style nil "滚动条样式风格")
;; (float nil "浮动方式") ;; (clear nil "清除浮动") ;; (box-decoration-break 'slice "框装饰拆分方式")
overflow
;; 垂直方向滚动条渲染 ;; overflow-x: scroll 始终给滚动条预留空间; ;; 当有溢出时显示,没有溢出用空白填充 ;; overflow-x: auto
