# 样式

## Kico Style 的内置样式

# 容器

## 全局缩放：

给 `html` 元素添加 `font-auto` 类，即可让全局字体实现自动缩放。

> PS：如果你的网站样式采用 `px` 单位编写，则该功能将会对相应元素失效。

分辨率 | 效果
--- | ---
小于 500px 时（移动设备） | 基础字体大小 14px
正常分辨率 | 基础字体大小 16px
大于 1930px 时（2K 屏幕） | 基础字体大小 18px

## 尺寸限制：

添加 `wrap` 类，即可布置一个限制尺寸的框架。

    <div class="wrap min">
      <p>我被限制了</p>
    </div>

wrap 也提供了多种扩展类，可以使用不同宽度的同时，也可以清除边距。

类名 | 行为
--- | ---
wrap | 保留 1em 的边距，宽度限制到 1200px
wrap min | 保留 1em 的边距，宽度限制到 800px
wrap mid | 保留 1em 的边距，宽度限制到 1000px
wrap max | 保留 1em 的边距，宽度限制到 1400px
wrap full | 保留 1em 的边距，不限制宽度

当然，你也可以直接使用 CSS 变量的方式，直接修改默认的边距和宽度限制。它们分别是 `--wrapper-gap` 和 `--wrapper-width`。结合 `:root` 选择器就可以完成替换：

    :root {
        --wrapper-gap: 1.5em;
        --wrapper-width: 1400px;
    }

## 保留间距：

框架默认保留 1.25em 的左右间距，你也可以修改成细的（0.75em）、粗的（1.5em）或者清除掉。

> PS：如果你的页面包含栅格系统，并使用了比容器更大的间距，则会出现页面溢出的现象。可以通过 CSS 的 `overflow: hidden` 方法清除间距。或者干脆使得页面间距和容器间距相同即可。

类名 | 行为
--- | ---
wrap thin | 边距改为 0.75em
wrap thick | 边距改为 1.5em
wrap clear | 清除边距

## 清除浮动：

部分情况下使用 `float` 布局方案会导致父元素塌陷，给元素添加 `.clearfix` 类即可清除浮动，改善塌陷的问题。

此元素的浮动可以被清除掉，防止布局坍塌

查看代码：

    <div class="clearfix">
      <p class="float-left">此元素的浮动可以被清除掉，防止布局坍塌</p>
    </div>

## 设置浮动：

给元素添加 `.float-left` 和 `.float-right` 类，迅速设置左/右浮动，浮动可以清除元素与元素之间的微小间距。

我浮动到右边了

查看代码：

    <div class="clearfix">
      <p class="float-right">我浮动到右边了</p>
    </div>

## 文字对齐：

给元素添加 `.text-left` `.text-right` 类，迅速设置左/右对齐方式。

居中对齐的文字

靠右对齐的文字

两侧对齐的文字，要这段文字出现换行才有效果呢

查看代码：

    <p class="text-center">居中对齐的文字</p>
    <p class="text-right">靠右对齐的文字</p>
    <p class="text-justify">两侧对齐的文字，要这段文字出现换行才有效果呢</p>

类名 | 行为
--- | ---
text-left | 靠左对齐
text-right | 靠右对齐
text-center | 居中对齐
text-justify | 两侧对齐