样式

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 的边距,不限制宽度

保留间距:

框架默认保留 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">
    <div style="float: left">此元素的浮动可以被清除掉</div>
</div>

设置浮动:

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

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

清除浮动:

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

此元素的浮动可以被清除掉
<div class="clearfix">
    <div style="float: left">此元素的浮动可以被清除掉</div>
</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 保留 1em 的边距,宽度限制到 1400px