🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
# Foundation CSS 参考手册 ## Foundation 默认设置 Foundation 使用浏览器默认字体大小 (`font-size:100%`)。对于大多数桌面设备的浏览器来说,字体大小默认为 16px。对于移动设备的浏览器,字体默认大小为 12px。 默认的字体为 `"Helvetica Neue"`, line-height 默认为 `1.5`。 这些设置是适用于 `<body>` 元素内的元素。 此外, `<p>` 元素与底部的外边距(margin-bottom) 为 1.25rem , line-height 为 1.6。 ## 文本 以下的 HTML 元素,Foundation 设置了独立的样式渲染它,不会采用浏览器默认样式。点击 "尝试一下" 查看在线实例。 | 元素 | 描述 | 在线实例 | | --- | --- | --- | | <h1> - <h6> | h1 - h6 标题 | | <a> | 浅蓝色的链接,鼠标移动到链接会有下划线 | | <small> | 浅灰色的副标题文本 | | <blockquote> | 引用内容模块 | | <strong> | 加粗文本 | | <em> | 斜体 | | <abbr> | 指定单词的缩写,使用该元素文本出现虚线下划线,鼠标移动上去会有提示信息 | | <kbd> | 接收键盘输入指令: <kbd>CTRL + P</kbd> | | <hr> | 水平线 | | <code> | 代码片段 | | <ul> | 无序列表 | | <ol> | 有序列表 | | <dl> | 描述性列表 | ## 文本对齐 使用 CSS 类来修改文本的对齐方式: | 类 | 描述 | 实例 | | --- | --- | --- | | .text-left | 左对齐文本 | | .text-right | 右对齐文本 | | .text-center | 居中 | | .text-justify | 两端对齐 | ## 不同尺寸屏幕的对齐 使用 CSS 类来修改文本的不同尺寸屏幕的对齐方式: | 类 | 描述 | 实例 | | --- | --- | --- | | **左对齐** | | .small-text-left | 所有尺寸屏幕左对齐 | | .small-only-text-left | 小尺寸屏幕左对齐(宽度小于 40em ) | | .medium-text-left | 宽度大于 40.0625em 尺寸屏幕左对齐 | | .medium-only-text-left | 宽度在 40.0625em 到 64em 尺寸的屏幕左对齐 | | .large-text-left | 宽度大于 64.0625em 尺寸屏幕左对齐 | | .large-only-text-left | 宽度在 64.0625em 到 90em 尺寸的屏幕左对齐 | | .xlarge-text-left | 宽度大于 90.0625em 尺寸屏幕左对齐 | | .xlarge-only-text-left | 宽度在 90.0625em 到 120em 尺寸的屏幕左对齐 | | .xxlarge-text-left | 宽度大于 120em 尺寸屏幕左对齐 | | **右对齐** | | .small-text-right | 所有尺寸屏幕右对齐 | | .small-only-text-right | 小尺寸屏幕右对齐(宽度小于 40em ) | | .medium-text-right | 宽度大于 40.0625em 尺寸屏幕右对齐 | | .medium-only-text-right | 宽度在 40.0625em 到 64em 尺寸的屏幕右对齐 | | .large-text-right | 宽度大于 64.0625em 尺寸屏幕右对齐 | | .large-only-text-right | 宽度在 64.0625em 到 90em 尺寸的屏幕右对齐 | | .xlarge-text-right | 宽度大于 90.0625em 尺寸屏幕右对齐 | | .xlarge-only-text-right | 宽度在 90.0625em 到 120em 尺寸的屏幕右对齐 | | .xxlarge-text-right | 宽度大于 120em 尺寸屏幕右对齐 | | **居中对齐** | | .small-text-center | 所有尺寸屏幕居中对齐 | | .small-only-text-center | 小尺寸屏幕居中对齐(宽度小于 40em ) | | .medium-text-center | 宽度大于 40.0625em 尺寸屏幕居中对齐 | | .medium-only-text-center | 宽度在 40.0625em 到 64em 尺寸的屏幕居中对齐 | | .large-text-center | 宽度大于 64.0625em 尺寸屏幕居中对齐 | | .large-only-text-center | 宽度在 64.0625em 到 90em 尺寸的屏幕居中对齐 | | .xlarge-text-center | 宽度大于 90.0625em 尺寸屏幕居中对齐 | | .xlarge-only-text-center | 宽度在 90.0625em 到 120em 尺寸的屏幕居中对齐 | | .xxlarge-text-center | 宽度大于 120em 尺寸屏幕居中对齐 | | **两端对齐** | | .small-text-justify | 所有尺寸屏幕都两端对齐 | | .small-only-text-justify | 小尺寸屏幕两端对齐(宽度小于 40em ) | | .medium-text-justify | 宽度大于 40.0625em 尺寸屏幕两端对齐 | | .medium-only-text-justify | 宽度在 40.0625em 到 64em 尺寸的屏幕两端对齐 | | .large-text-justify | 宽度大于 64.0625em 尺寸屏幕两端对齐 | | .large-only-text-justify | 宽度在 64.0625em 到 90em 尺寸的屏幕两端对齐 | | .xlarge-text-justify | 宽度大于 90.0625em 尺寸屏幕两端对齐 | | .xlarge-only-text-justify | 宽度在 90.0625em 到 120em 尺寸的屏幕两端对齐 | | .xxlarge-text-justify | 宽度大于 120em 尺寸屏幕两端对齐 | ## 其他 | 类 | 描述 | 实例 | | --- | --- | --- | | .left | 元素向左浮动 | | .right | 元素向右浮动 | | .clearfix | 清除浮动 - 必须添加在浮动元素的父元素上 | | .hide | 隐藏元素 (CSS `display: none`) | | .list-inline | 将所有元素设置在同一行 | | .lead | 让 <p> 元素更突出 | | .subheader | 设置浅色的 <h1> - <h6> 元素 |