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 接收键盘输入指令: CTRL + P |
| <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> 元素 | |
王皓
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat王皓
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat王皓
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat